React Movies App

A modern, responsive web application built with React that allows users to explore movies and TV shows, manage their favorites, and create watch lists. The application uses The Movie Database (TMDB) API to fetch movie and TV show data.

🚀 Features

• Browse popular movies and TV shows
• Search functionality for movies and TV shows
• Filter content by various categories
• Detailed view for each movie/show with expanded information
• Add movies/shows to favorites
• Create and manage watch later list

🛠️ Built With

• React 18 - Frontend library
• TypeScript - Type safety and better developer experience
• Vite - Next generation frontend tooling
• SCSS - For advanced styling
• React Router v6 - For navigation
• Context API - For state management
• TMDB API - For movie and TV show data

📋 Prerequisites

Before running this project, you need:

1. Node.js (version 14 or higher)
2. TMDB API Key (get it from TMDB website)

⚙️ Environment Setup

1. Create a .env file in the root directory
2. Add your TMDB API key:

   VITE_TMDB_API_KEY=your_api_key_here
   

   Replace your_api_key_here with your actual TMDB API key

🚀 Installation

1. Clone the repository:

   git clone https://github.com/yourusername/react-movies.git

2. Navigate to project directory:

   cd react-movies

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

📁 Project Structure

react-movies/
├── src/
│   ├── components/     # Reusable components
│   ├── contexts/       # React Context files
│   ├── styles/         # SCSS style files
│   ├── types/         # TypeScript type definitions
│   ├── utils/         # Utility functions
│   ├── App.tsx        # Main App component
│   └── main.tsx       # Entry point
├── public/            # Static assets
└── index.html         # HTML template

🔑 API Configuration

This application uses The Movie Database (TMDB) API. To use the application:

1. Sign up for a TMDB account at themoviedb.org
2. Go to your account settings
3. Navigate to the API section
4. Request an API key (choose "Developer" option)
5. Once you have your API key, add it to the .env file as shown in the Environment Setup section

⚠️ Important: Never commit your .env file or expose your API key publicly

🎨 Features and Usage

• Home Page: Displays a grid of popular movies with infinite scroll
• TV Shows: Browse popular TV series
• Search: Search for movies and TV shows using the search bar
• Filters: Filter content by various categories (popularity, rating, etc.)
• Favorites: Save your favorite movies/shows (requires local storage)
• Watch Later: Add movies/shows to your watch list
• Responsive Design: Works on desktop, tablet, and mobile devices

📄 License

This project is licensed under the MIT License - see the LICENSE file for details

🙏 Acknowledgments

• The Movie Database (TMDB) for providing the API
• All the contributors who have helped with code and suggestions