Building a Dynamic Movie Database App with React Using the TMDB API
Tags: webdev, react, css, api
Published: 2023-08-19 13:10:04

In this guide, I'll walk you through the process of integrating the TMDB (The Movie Database) API into your React MovieDB app. We'll cover the steps to set up your project, make API requests, and display the retrieved data using Tailwind CSS for styling.

**Note**: Make sure you have Node.js and npm (Node Package Manager) installed on your machine before you begin.

## Table of Contents

1. [Prerequisites](#prerequisites)
2. [Setting Up Your Project](#setting-up-your-project)
3. [Getting TMDB API Key](#getting-tmdb-api-key)
4. [Making API Requests](#making-api-requests)
5. [Displaying Data with React Components](#displaying-data-with-react-components)
6. [Styling with Tailwind CSS](#styling-with-tailwind-css)

## Prerequisites

Before you start, ensure you have the following:

- Node.js and npm installed on your machine.
- Basic understanding of React.js and npm packages.
- A TMDB API key, which you can obtain from the TMDB website.

## Setting Up Your Project

1. Create a new React app using Create React App. Open your terminal and run:

   ```bash
   npx create-react-app movie-db-app
   ```

2. Navigate to your project directory:

   ```bash
   cd movie-db-app
   ```

3. Start your development server:

   ```bash
   npm start
   ```

Your React app should now be running at http://localhost:3000.

## Getting TMDB API Key

1. Visit the TMDB website (https://www.themoviedb.org/) and sign up for an account.
2. Once signed in, go to your account settings and click on the "API" section.
3. Create a new API key for your application. Make sure to follow TMDB's terms of use.

## Making API Requests

1. Install the `axios` library to handle HTTP requests:

   ```bash
   npm install axios
   ```

2. Create a new file, e.g., `tmdb.js`, in the `src` directory to manage your API requests:

   ```jsx
   // src/tmdb.js
   import axios from 'axios';

   const API_KEY = 'YOUR_TMDB_API_KEY';
   const BASE_URL = 'https://api.themoviedb.org/3';

   export const fetchPopularMovies = async () => {
     try {
       const response = await axios.get(`${BASE_URL}/movie/popular?api_key=${API_KEY}`);
       return response.data.results;
     } catch (error) {
       console.error('Error fetching popular movies:', error);
     }
   };
   ```

3. Import the `fetchPopularMovies` function into your main `App.js` file and use it to fetch movie data.

## Displaying Data with React Components

1. Create a new component to display the list of popular movies:

   ```jsx
   // src/components/MovieList.js
   import React, { useEffect, useState } from 'react';
   import { fetchPopularMovies } from '../tmdb';

   const MovieList = () => {
     const [movies, setMovies] = useState([]);

     useEffect(() => {
       const fetchMovies = async () => {
         const popularMovies = await fetchPopularMovies();
         setMovies(popularMovies);
       };

       fetchMovies();
     }, []);

     return (
       <div>
         <h1>Popular Movies</h1>
         <ul>
           {movies.map((movie) => (
             <li key={movie.id}>{movie.title}</li>
           ))}
         </ul>
       </div>
     );
   };

   export default MovieList;
   ```

2. Import and use the `MovieList` component in your `App.js`:

   ```jsx
   // src/App.js
   import React from 'react';
   import MovieList from './components/MovieList';

   function App() {
     return (
       <div className="App">
         <MovieList />
       </div>
     );
   }

   export default App;
   ```

## Styling with Tailwind CSS

1. Install Tailwind CSS and its dependencies:

   ```bash
   npm install tailwindcss postcss autoprefixer
   ```

2. Create the configuration files for Tailwind CSS:

   ```bash
   npx tailwindcss init -p
   ```

3. Open `src/index.css` and add the following lines to import Tailwind CSS styles:

   ```css
   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
   ```

4. Style your components using Tailwind CSS classes.

5. In your `MovieList.js` component, apply Tailwind CSS classes:

   ```jsx
   // src/components/MovieList.js
   // ... (previous code)

   const MovieList = () => {
     // ...

     return (
       <div className="container mx-auto">
         <h1 className="text-3xl font-bold mb-4">Popular Movies</h1>
         <ul className="grid grid-cols-2 gap-4">
           {movies.map((movie) => (
             <li key={movie.id} className="border p-4 rounded shadow">
               {movie.title}
             </li>
           ))}
         </ul>
       </div>
     );
   };

   // ...
   ```

6. Restart your development server to apply the Tailwind CSS styles.

Congratulations! You've successfully integrated the TMDB API into your React MovieDB app and styled it using Tailwind CSS. Your app should now display a list of popular movies with a great UI.

Remember to replace `'YOUR_TMDB_API_KEY'` with your actual TMDB API key in the `tmdb.js` file.


[DEMO](https://maligaurav947.github.io/moviedb-react/)