Demo Application

We gained hands-on experience with different Movie Database API endpoints in the previous chapters. Now, we’ll integrate those endpoints into an example application.

Workflow

1. When we run the application, the first page we see is the home page. The home page has two main components using the API endpoints—the navigation bar, and flashcards.
2. For flashcards, by hovering over them, we can see some basic details of a movie or a TV show. When we click “View Details,” it takes us to the movie or the TV show details page.
3. The various options shown on the top-left side of the webpage are discussed below:
   • “MovieTV” or “Home” take us to the home page if we are not already there.
   • “Movies” takes us to the movies page, where we can see the latest, trending, popular, top-rated, upcoming, and currently playing movies.
   • “TV Shows” takes us to the TV page, where we can see the latest, trending, popular, top-rated, airing today, and on the air TV Shows.
   • “People” takes us to the persons page, where we can see all the popular persons on TMDB.
4. On the top-right side, we have to select the object to be searched, movie, TV show, or person, then we type in our query in the search bar and finally click the search button or press enter. This takes us to the results page.

Demo application

Click “Run” to run the application. Next, click on the URL given at the end of the widget to interact with the application.

Note: The following widget only shows the necessary files required to explain The Movie Database APIs. Also note that we have created and used a custom hook, useFetch, to fetch the data from any API endpoint.