A Netflix inspired project showcasing movies and trailers from different genres using the TMDB API.
-min.webp)
Genres are referenced often in different components. To avoid prop-drilling, I wrapped the entire app with genre data using the Context API in React.
The search functionality is also using the Context API but it’s not needed as high in the app architecture as genres. For this reason, it only wraps the components that rely on it, like the Navigation.
The api.ts file has several utility functions to organize various endpoints and functions to execute relevant calls to the API.
For styling, I went with styled components for this build.
To keep things organized, there are three main folders in the src folder — components, context, and pages. The other files — i.e., index.ts, api.ts, etc — are located in the root directory.
The TMDB API is the source for all of the data. It has a robust API allowing you to retrieve data with different parameters like genres, trending movies, networks, actors/actresses, credits, and more.
Packages used to complete this build:
Collection of the main components.
The Navbar includes links to different pages, a dropdown to select a particular genre, and a global search bar that provides instant results as the user types.
A dropdown to browse and select different movie genres.
Instant search as the user types. This is possible with the search endpoint provided by the TMDB API. As the key is pressed, an API call is made to the search endpoint, instantly returning relevant results.
On page load, a random movie from the action genre is selected to be featured in the hero section. There is a button to see more action movies and a button to play the trailer of the currently featured movie.
A swipeable carousel to preview movies from different genres. Clicking on a movie in the carousel opens the modal component to autoplay the trailer. The first genre carousel plays automatically.
A movie card showing the movie poster and rating.
A modal that autoplays a youtube video showing the trailer of a movie. When a user clicks on the "play trailer" button in the hero section on the homepage or when they click on a movie poster, an API call is made to check for the movie trailer. If there is a trailer, the modal component is mounted and a trailer is autoplayed. If there is no movie, a toast message is shown stating a trailer is not available.
View movies based on trending, top rated, and upcoming. Below is a screenshot of the trending movies page.
The TMDB API returns a page number when a request is made. Each time a user clicks on a page number in the paginated component, that number is used to retrieve results for that specific page.
This build was a great reminder on the importance of implementing type checking.
