Movie & TV Shows App on NodeJS

In this article, we’ll building a movie app or tv shows app using TMDB (The Movie Database) API which is readily available for free. This app will allow users to browse, search, and discover movies, providing an immersive cinematic experience. Please take a look at the per-requisites before moving further.

Prerequisites:

Please make sure you have the following prerequisites in place before moving further in this article.

  1. Basic knowledge of React.
  2. Node.js and npm installed on your machine.
  3. A TMDB API key. You can get one by signing up at the TMDB website (https://www.themoviedb.org/).

Setting Up the Project:

To begin, let’s set up our project by creating a new React app. Open your terminal and execute the following commands:

npx create-react-app movie-app
cd movie-app

Once the project is created, open it in your preferred code editor.

Fetching Data from the TMDB API:

Now, it’s time to fetch movie data from the TMDB API. Create a new file named api.js in the src folder and add the following code:

import axios from 'axios';

const apiKey = 'YOUR_API_KEY'; // Replace with your TMDB API key

const fetchMovies = async (searchQuery) => {
  try {
    const response = await axios.get(
      `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${searchQuery}`
    );
    return response.data.results;
  } catch (error) {
    console.error('Error fetching movies:', error);
    return [];
  }
};

export { fetchMovies };

Replace YOUR_API_KEY with your actual TMDB API key. We’re using the axios library to make the API request.

See also  How To Use HuggingFace🤗 [Beginner's Guide w/ Examples]

Creating the Movie App Component:

Now, let’s create the main component of our movie app. Open the src/App.js file and replace the existing code with the following:

import React, { useState } from 'react';
import { fetchMovies } from './api';

const App = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [movies, setMovies] = useState([]);

  const handleSearch = async () => {
    const moviesData = await fetchMovies(searchQuery);
    setMovies(moviesData);
  };

  return (
    <div>
      <h1>🎥 Movie App 🍿</h1>
      <input
        type="text"
        placeholder="Search movies..."
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

In this code snippet, we’re defining the App component, which handles the movie search functionality. It uses React hooks (useState) to manage the search query and the retrieved movie data. The handleSearch function is triggered when the user clicks the search button, and it calls the fetchMovies function we defined earlier.

See also  How to Install Python on Windows & Mac For Free (2023 Edition)

Styling the Movie App:

Let’s add some basic styling to our movie app to make it visually appealing. Create a new file named App.css in the src folder and add the following CSS:

body {
  font-family:

 Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 40px;
}

input {
  margin: 20px;
  padding: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px;
}

Make sure to import this CSS file into the src/App.js file by adding the following line at the top:

import './App.css';

Running the Movie App:

Now that our movie app is ready, let’s run it! In the terminal, execute the following command from the project root:

npm start

Once the development server starts, open your browser and navigate to http://localhost:3000. You should see the movie app with a search input and a button. Try searching for movies and see the results dynamically appear on the page!


Congratulations! 🎉 You’ve successfully built a movie app in React using the TMDB API. You’ve learned how to fetch data from an external API, utilize React hooks, and create a visually appealing user interface. Now you can enhance the app further by adding features like movie details, pagination, or even integrating additional 🍿🎬

See also  Git 101: How to Install Git on Mac & Windows (2023 Edition)

References:

  1. TMDB API Documentation: https://developers.themoviedb.org/3/getting-started/introduction
  2. React Documentation: https://reactjs.org/docs/getting-started.html
  3. Axios Library: https://axios-http.com/docs/intro