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 maped 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:

React App

And the full repo can be found here:

antonzaharia/movies-app

Thanks for reading and hopefully I will pass this assessment.