React - Movie Database Site

React Movie Labs is a movie application built using React, which allows users to view, filter, and explore movies using live data from The Movie Database (TMDB) API.

React Movie Labs is a web application designed for browsing and discovering movies using real-time data from The Movie Database (TMDB) API.

The app allows users to explore a wide variety of movies, including popular, top-rated,and upcoming titles, displayed through dynamically generated movie cards.

Users can filter movies by genres, providing an easy way to find films based on personal preferences.

Table of Contents

1. Overview
2. Features
3. Getting Started
4. API Integration
5. Components
6. Filtering Movies
7. Running the App
8. Future Improvements

Overview

This project aims to provide a simple and clean interface for browsing movies. It uses live data from the TMDB API, which is displayed using various React components. The app also allows filtering based on movie genres, helping users find exactly what they’re looking for.

Features

• Display a list of movies fetched from the TMDB API.
• Movie Card component to showcase individual movie details.
• Filter movies based on genre.
• Clean and responsive UI.
• Utilizes React hooks (useState, useEffect) for managing state and fetching data.

Getting Started

Prerequisites

To get the app up and running, ensure you have the following installed:

• Node.js (version >= 14.x)
• NPM or Yarn

Installation

1. Clone the repository:

   git clone https://github.com/JacobDicksonOfficial/react-movie-labs.git
   cd react-movie-labs

2. Install dependencies:

   npm install

3. Get an API key from TMDB, and create a .env file with your key:

   REACT_APP_TMDB_API_KEY=your_api_key_here

4. Start the app:

   npm start

The app will be running at http://localhost:3000.

API Integration

This project utilizes The Movie Database (TMDB) API to fetch live movie data. All API requests are handled using fetch within React’s useEffect hook.

Example API request:

const fetchMovies = async () => {
    const response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.REACT_APP_TMDB_API_KEY}`);
    const data = await response.json();
    setMovies(data.results);
};