# React Ecosystem

Congratulation getting this far into the React environment. As you are now equiped with many tools to build an interactive front-end web app, our next project challenge will be creating one of the most famous website projects, the **Movie App**.


We will be using the API from [The Movie Database](https://developers.themoviedb.org/3) to make the app. This is one of the most comprehensive and high quality , yet free, API on the internets. It provides high quality images, many filter options, dynamic search endpoint and even authentication to the actual TMDB account to add movie to favorite list. So read carefully the documentation as they are very detailed.

## The Movie App

You are required to build a React front end web to display movies info around the world.

### User Story
- User sees many movies layout on website
- User sees paginate through all movies from the database
- User sees detail of one single movie, in a seperate page, when select a movie from the list
- User sees information about movie (authors, description, title, genres ...)
- User sees filter UI and can filter movie by genres
- User sees search UI and can search movie in the database by keyword
- User sees the website is responsive for the minimum of Desktop, Iphone and Tablet
- User sees routes that allow user revisit to the same display when using such routes
- :rocket: User can pick favorite movie and save it.
- There is an endpoint to make this happen, it is quite challenging however. So we also allow using `localStorage` as a solution. But keep in mind that **the correct way** to make features like this is using a dedicated endpoint from the API to interact with the server and update the data

:bulb: Not sure how to design the layout ? check out the section below

### Real website to *steal* design :laughing:

**[Netflix](https://www.netflix.com/vn-en/)**

/cdn.vox-cdn.com/uploads/chorus_image/image/46541084/netflix2.0.0.0.png)

**[Amazon Prime](https://www.primevideo.com/?ref_=dvm_pds_amz_vn_dc_s_g_mkw_stPg5MhMD-dc_pcrid_292961275573&mrntrk=slid__pgrid_40407285527_pgeo_1028581_x__ptid_kwd-914739956)**


**[The Movie Database](https://www.themoviedb.org/)**


## Marking guide

Everyone will start at 100 score.

| Requirement | Grade |
| -------- | -------- |
| Missing any of the user story that are not rocket | - 5 |
| Made rocket | + 10 |
| Resonable design | + 10 |

This assignment minimum pass score is 80/100

<hr>

**Good luck have fun!**