/movies

Exercise in UI design for movie search against TMDB

Primary LanguageJavaScript


Home Assignment Instructions

Introduction

The purpose of this assignment is to allow you to demonstrate your coding skills, in a project that is using the core technologies that we use in our daily frontend development in Powtoon.

Setup

You may work in any IDE you find most convenient. You may use the internet to search for anything - just as you would on your daily work routine. You’ll need a GitHub/Bitbucket account. If you don’t have one, please create one now. Next, please fork this repo into your own repo. This project has been built using the create-react-app tool, so you need only to clone the repository and run npm install to fetch all the necessary dependencies and then run npm run start to get a development mock up server running on your localhost.

Assignments

Please go through the assignments below one by one. You can choose the order according to your preferences - it has no importance.

The code you write should display your coding skills and standards. Please push code that you feel is worthy of being merged to the codebase.

Each assignment should have 1 or more commits in your repo, but avoid grouping more than one assignment in a single commit. Please mention the assignment number in the commit message, e.g. ״TASK 1 - make MovieList display movie posters”, etc.

TASK 1

Convert UI of movie list to boxes showing the movie posters (Netflix style). Change onClick UI to show movie details in a modal. No specific styling is required, this is your chance to show-off your CSS skills.

TASK 2

Implement the sorting options on the “Sort” pull-down menu. Please sort the results locally (do not use the API sort option).

TASK 3

Replace movie mock data with real data coming from the API of TMDB (The Movie DataBase).
Use their “now playing” endpoint (find the API documentation on the TMDB website). Please load the first 3 pages of movies from the API when the application starts.

API_KEY = 54ffed57deb5a7a8688be4de3007e578

TASK 4

Implement “infinite-scroll”, so more movies are added to the list as the user scrolls down.

Conclusion

After completing your assignments, please push your work to your GitHub/Bitbucket project and send us a link to your GitHub repo.