Netflix Clone Application

Overview

A responsive web application built with React, designed to replicate key features of Netflix. This project demonstrates my proficiency in front-end development, including user authentication, dynamic content loading, and API integration. The application allows users to explore trailers, view detailed movie information, and manage personalized watchlists.

While it does not support full movie streaming, it provides a seamless and engaging user experience, simulating the core functionality of Netflix.

---

Features

• User Authentication:
  • Sign up and log in using Firebase authentication.
  • User-specific data storage for personalized experience.
• Movie Listing:
  • Display a curated list of movies fetched from the TMDB API.
• Interactive Pop-Up:
  • View movie details and add movies to a personalized watchlist.
• Watchlist Management:
  • View and manage a custom watchlist with options to add or delete movies.
• Movie Details:
  • Watch trailers and view additional information about movies.

---

Technologies Used

• Frontend: React, SCSS
• API Integration: TMDB API, Axios
• Video Playback: React YouTube
• Backend: Firebase (Authentication and Firestore)
• Environment Configuration: .env file for sensitive data

---

Screenshots

Desktop View

• Sign-Up Page

• Sign-In Page

• Home Page

• Popup Page

• Watchlist Page

Mobile View

• Sign-Up Page

• Sign-In Page

• Home Page

• Popup Page

• Watchlist Page

---

Installation and Usage

Follow these steps to set up and run the project locally:

Prerequisites

• Ensure you have Node.js installed on your system.
  • Download Node.js

Steps

1. Clone the Repository or Download the ZIP File

   • Clone the repository:

    git clone https://github.com/shabeeltt/netflix-clone-react.git
    cd netflix-clone-react

   • Or download the ZIP file and extract it.

2. Install Dependencies

   npm install

3. Set Up Environment Variables

   • Create a .env file in the project root directory.

     • Add your TMDB API key:

     REACT_APP_TMDB_API_KEY=your_tmdb_api_key

     • Add your Firebase configuration:

     REACT_APP_FIREBASE_API_KEY=your_firebase_api_key  
     REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain  
     REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id  
     REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket  
     REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id  
     REACT_APP_FIREBASE_APP_ID=your_firebase_app_id

4. Run the Project

   npm start

   • Open http://localhost:3000 in your browser to view the app.

---

Contributions

---

Contributions are welcome! If you'd like to improve this project, please:

• Fork the repository and make your changes.

• Submit a pull request with a detailed description of your changes.

---

License

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

• Report issues or suggest features by creating a new issue.

Feel free to reach out if you have any questions or need support!