DEV Community

kareem_sulaimon
kareem_sulaimon

Posted on • Edited on

Create a Movie App With React and TMDB API

In this tutorial, we will walk you through the process of creating a movie app using React.js and the TMDB API, ensuring a beginner-friendly and well-explained approach.

Table Of Contents:

  1. What is TMDB API
  2. Install React and Set up React App
  3. Generate TMDB API
  4. Create .env file
  5. Create context folder and stateContext.jsx file 6.0Create Navbar.jsx and paste this code

1. What is TMDB API

The TMDB API provides a comprehensive list of available methods for movies, TV shows, actors, and images. For more information about the API, click here.

2. Install React and Set up React App

a. Create a React app using Vite:

   npx create-vite your_app_name --template react
Enter fullscreen mode Exit fullscreen mode

Once created, run:

   npm install react-icons --save
   npm i react-router-dom
Enter fullscreen mode Exit fullscreen mode

Access the final code on GitHub - KareemSulaimon/movieApp.

3. Generate TMDB API

  1. Follow this link and sign up for an account.
  2. Choose JavaScript as your preferred language and click "Get API Key."
  3. Continue, input your data and URL path (GitHub or personal website link).
  4. Check your notifications for your API Key.

4. Create .env file

  1. Outside the src folder, in your root directory, create 
   touch .env
Enter fullscreen mode Exit fullscreen mode

Inside the .env file:

   VITE_REACT_APP_API_URL=https://api.themoviedb.org/3/
   VITE_REACT_APP_API_KEY=put your generated API key here
Enter fullscreen mode Exit fullscreen mode

Note: We are starting the naming with VITE_REACT because we created it with a React app. It would have been REACT_ .... if we created it for React only.

5. Create context folder and stateContext.jsx file 

touch context/stateContext.jsx
Enter fullscreen mode Exit fullscreen mode

Context provides a way to pass data through the component tree without having to pass props down manually at every level. Read more here: React Context.

In your 'stateContext.jsx' file, copy and paste this code:

import React, { createContext, useContext } from 'react';

const Context = createContext();

const StateContext = ({ children }) => {
  const baseImageUrl = 'https://image.tmdb.org/t/p/original';
  const apiUrl = import.meta.env.VITE_REACT_APP_API_URL;
  const apiKey = import.meta.env.VITE_REACT_APP_API_KEY;

  return (
    <Context.Provider
      value={{
        baseImageUrl,
        apiUrl,
        apiKey
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const useStateContext = () => useContext(Context);
Enter fullscreen mode Exit fullscreen mode

6.Create Navbar.jsx and paste this code

import React from 'react';
import { BiSearch } from 'react-icons/bi';
import menu from '../assets/menu.png';
import logo from '../assets/logo.png';
import { useStateContext } from '../context/StateContext';
import { Link, Form } from 'react-router-dom';

function Navbar() {
  const { handleFormSubmit , query, handleInputChange } = useStateContext();

  return (
    <div className="flex flex-col sm:flex-row w-full justify-center sm:justify-around gap-4 items-center z-20 absolute top-10" data-testid="navbar">
          <Link to={"/"} className='flex items-center' data-testid="logo-link">
              <img src={logo} alt="logo icon" data-testid="logo-img" />
          </Link>
          <Form onSubmit={handleFormSubmit } className="flex w-3/5 sm:w-2/5 h-4 items-center border-white border-2 p-4 rounded-lg shadow-md" data-testid="search-bar">
            <input
              type="text"
              placeholder="What do you want to watch?"
              value={query}
              onChange={handleInputChange}
              className="w-full placeholder-white bg-transparent border-none outline-0 text-sm text-white sm:text-lg"
              data-testid="search-input"
            />
            <BiSearch className="text-white font-bold" data-testid="search-icon" />
    </Form>
    <div className="flex items-center" data-testid="menu-icon">
      <img src={menu} alt="menu icon" />
    </div>
  </div>
  );
}

export default Navbar;
Enter fullscreen mode Exit fullscreen mode

Then, in Navbar.jsx:

  1. The images are located in the assets folder.
  2. The Form and the Link components are imported from react-router-dom, which was previously installed. When the Form is submitted, the onSubmit method calls handleFormSubmit, a function that will be defined later in stateContext.jsx. Likewise, the onChange method calls handleInputChange whenever a change is made to the query value.

Top comments (0)

Read next

dazevedo profile image

The Saga Pattern in Microservices

Daniel Azevedo -

mdarifulhaque profile image

Some Essential Coding Practices Every Experienced Developer Recommends

MD ARIFUL HAQUE -

fleek_ profile image

Introducing Fleek Machines (Early Access): One Click Verified and Private Compute

Fleek -

kiolk profile image

Day 71-72. Lack of knowledge

Kiolk -