Movie app — technical assessment
Throughout my job search, I received a technical assessment where I was asked to build an app that will load 20 movies from an API and to order them by rating.
I liked the idea and I was so excited about it when I received the challenge.
I decided to create a React app and to use Redux, Material UI(for icons) and GreenSock.
It was a simple app as there was only a couple of components. I started by making my layout:
- created the React app
- installing Redux, Material UI and GreenSock
Then I created a Header
component where I build the “logo” and two buttons (for sorting the movie list ascending and descending)
I loaded the movie list in the Redux store using a fetch
request in the componentDidMount()
lifecycle method of the main app. Then I map
ed over them and loaded a MovieCard
component for each.
To give a professional impression I used GreenSock to make a nice animation of the description of the movie when a user hovers the cursor over a movie card.
To implement the order I created another two actions and two cases in Redux reducer.
The case for ordering in ascending order in reducer was looking like:
In the Content
container of the app I set the state as:
ascending: false,
descending: false
The buttons from the header were creating the toggle and if no button was pressed the order of the movies was random.
I deployed if on firebase:
And the full repo can be found here:
Thanks for reading and hopefully I will pass this assessment.