Build a Movie App using IMDB's API

Live version.

Features:

• List top 250 movies;
• Show a card with name, year and crew (on hover), image and score (rounded up);
• Search form.

Nice to have:

• Language selector with: EN, PT and ES as options;
• Button to list Box Office Movies.

Must have:

• React Context to store the movie list;
• On submitting search form: filter by name;
• On submitting empty search form: show all movies.

IMDB API Tutorial

• Go to.
• Register

• Confirm your email
• Go to.
• Your API Key will show up as below:

Top 250 Movies endpoint

Box Office endpoint

Code Snippet in the bottom of the page

Phase 2

Must have:

• Language selector with: EN, PT and ES as options.

Example

• Button to list Coming Soon Movies.

Button styles:

    background: #22254b;
    border-radius: 50px;
    border: 1px solid #FFF;
    color: #FFF;
    padding: 0 16px;
    font-size: 16px;
    cursor: pointer;

• Score should have diffent color depending on value.

    If score >= 7 it should be green. 
    Yellow if 3 < score < 7. 
    Red if score <= 3.

Phase 3

Must have:

• On clicking a movie, show a modal with the following movie information: Name, year, background image, plot local (using the language selector), genre, stars and languages

Referece: https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered

Phase 4

Create account on Firebase

Must have:

• Auth com Firebase
• Routes: Sign In, Sign up
• Route: Favorites (only show option on header when user is logged in)

Nice to have:

• Toast showing when user logged in and logged out

Phase 5

Firestore Get started

Must have:

• Plug Firestore
• User can add movies to favorites
• List favorite movies by user

Nice to have:

• Users can remove movies from favorites (Favorite page only)