How to build a Movie App in React using TMDB API

React Movie App or Movie App in React is a fun project that every React developer should make once, in order to improve/ enhance/ polish their React coding skills. It is a must considering AIs like ChatGPT which can do pretty much anything even coding are now among us. So it’s better to understand these concepts well in order to use them in our future projects

In this blog, we will be making a movie app in React using TMDB API by using some very easy but tricky concepts to make our app more entertaining. These concepts are -

1. Fetching data from API
2. Displaying data in the form of a card
3. Pagination
4. Filtering data of both Movies and TV Shows based on their genre
5. A custom hook to help us in this filtering process
6. A Custom Search Bar using which we can search movies as well as tv series.

We will be using Bootstrap for default styling and the rest will be done by custom CSS which will not be discussed in this blog as the main focus of this blog is explaining the construction and use of the different components that we have made in this app like the Filter Component, Custom Hook, etc. But for people who want to practice the styling part as well, here is the GitHub repo of this project and the live link.

Let’s Start…

Index

1. Creating the React App
2. Getting data from TMDB API
3. Working on the UI part of the App
4. Creating different pages of our App
5. Creating the Trending Page
6. Creating the Movies Page
7. Creating the TV Series Page
8. Creating the Custom Search Page
9. Summary

Creating the React App

First and foremost we have to create our React app. It’s straightforward to create a React app — just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app the-movie-central

If you are unsure how to set up a create-react-app project properly, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

Our movie app wouldn’t be any good if we didn’t have any movies to display. So to solve this issue we will be using the TMDB API as our source for movies and other stuff related to it. This API is free to use, and all we have to do is sign up and get an API key. Let’s see how.

Getting the API Key from TMDB’s official website
TMDB stands for The Movie DataBase which is basically an online database that contains information related to films, television programs, and video games. It is a community-built resource, open to anyone who would like to contribute.

The TMDB API provides access to detailed information about movies, television shows, actors, crew members, and more. The API includes over 3 million pieces of data, including movie posters, release dates, cast and crew information, plot summaries, and more.

And we are going to take advantage of all these features that this API is providing while making our Movie App, though we will be limiting ourselves to the Movie Section and the TV Series Section.

Continue Reading…