Skip to content

Latest commit

 

History

History
152 lines (97 loc) · 4.28 KB

README.md

File metadata and controls

152 lines (97 loc) · 4.28 KB

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

signUp

  • Sign-In Page

login

  • Home Page

HomePage

  • Popup Page

popup

  • Watchlist Page

watchList

Mobile View

  • Sign-Up Page

mobilesignup

  • Sign-In Page

mobilesignin

  • Home Page

mobileHomepage

  • Popup Page

mobilepopup

  • Watchlist Page

mobilewatchlist

Installation and Usage

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

Prerequisites

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

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!