Project
Movies App
Frontend Framework/Library
3rd party Component
TMDB API
Single Page Application
Duration
3 weeks
Beginner
Introduction
Dive into modern frontend development by building a captivating Movies App with the TMDB API. This project will teach you to create a dynamic single-page application, allowing users to explore the world of cinema easily. Leverage modern frameworks to create interactive interfaces and real-time movie data from the TMDB API. Discover new releases, search for favorites, and watch trailers with ease.
Prerequisites
- Practical knowledge of HTML & CSS and Javascript.
- Knowledge of at least one Frontend Framework.
Requirements
Please refer to the above video for a visual walkthrough of the project requirements.
Home Page
- Static Navbar Component with a Logo, search bar, light/dark theme icon, and favorite button.
- Implement light/dark mode.
- Implement custom fetch with caching requests for 1 hour.
- Show a list of now-playing, trending, top-rated, and upcoming movies in a carousel.
- Add reusable movies card component to show movie details and on hover show genre and favourite button.
Search Page
- Search based on the query submitted and update the app route with the query.
- Implement infinite scroll using Intersection Observer API.
- Implement caching for infinite scroll fetch.
Detail and Favourite Page
- Add a movie detail card.
- Use 3rd party package to play the youtube trailer.
- Add a movie cast section.
- Add a similar movie section.
- Implement feature to allows users to add a movie to their favorites list or remove the movie from their favorites list.
- Add a favorite movie page and show the user's favorite movies.
General
- Responsive UI.
- Show a spinning loader where needed.
- Handle error and empty state.
Roadmap
Below is the weekly breakdown of how to approach the project. This is how an actual developer would approach and build the project.
Complete the Home Page.
Tasks
- Static Navbar Component with a Logo, search bar, light/dark theme icon, and favorite button.
- Implement light/dark mode.
- Implement custom fetch with caching requests for 1 hour.
- Show a list of now-playing, trending, top-rated, and upcoming movies in a carousel.
- Add reusable movies card component to show movie details and on hover show genre and favourite button.
Complete the Search Page.
Tasks
- Search based on the query submitted and update the app route with the query.
- Implement infinite scroll using Intersection Observer API.
- Implement caching for infinite scroll fetch.
Complete the Detail and Favourite Page.
Tasks
- Add a movie detail card.
- Use 3rd party package to play the youtube trailer.
- Add a movie cast section.
- Add a similar movie section.
- Implement feature to allows users to add a movie to their favorites list or remove the movie from their favorites list.
- Add a favorite movie page and show the user's favorite movies.
Helpful Resources
- Use TMDB API to get all the necessary data to implement this project.
- Learn how to implement Cache API Calls.
- Get necessary icons Iconscout.
We recommend using the following packages, but you can choose other options if they meet your requirements.
- Circular progress bar component react-circular-progressbar.
- Carousel component react-multi-carousel.
- Simple React component to play YouTube videos react-youtube.
Contributor(s)
John Doe
Founder and Fullstack Developer at freeCodeProject.org
Created this project.