shaban-eissa/mern-netflix-clone

A MERN stack project replicating the Netflix UI, featuring user authentication, movie browsing, and watchlist functionality. Built with React, Redux, Axios, and Styled-Components on the frontend, and Node.js, Express, MongoDB (Mongoose), and Firebase for authentication on the backend.

MERN Netflix Clone

A Netflix clone built using the MERN stack (MongoDB, Express, React, Node.js). This project replicates the UI of the Netflix platform and includes features such as user authentication, filter movies and TV shows, and more.

Table of Contents

• Demo
• Features
• Technologies Used
• Installation
• Usage
• Contributing

Demo

Check out the live demo https://mern-netflix-clone-frontend.vercel.app

Features

• User authentication (sign up, login)
• Browse movies
• View movie details including trailers
• Add movies to the watchlist

Technologies Used

• Frontend:

  • React
  • Redux for state management
  • Axios for API requests
  • React Router for navigation
  • Styled-Components for styling

• Backend:

  • Node.js
  • Express.js
  • MongoDB for database
  • Mongoose for ODM

• Authentication:

  • Firebase

• Other:

  • TMDB API for movie data

Installation

1. Clone the repository:

   git clone https://github.com/Shaban-Eissa/MERN-Netflix-Clone.git

2. Change into the project directory:

   cd MERN-Netflix-Clone

3. Install dependencies for both the server and client:

   cd netflix-ui
   npm install
   
   cd netflix-backend
   npm install

4. Create a .env file in the netflix-backend directory and set the following variables:

   MONGODB_URI=your_mongodb_uri

   Replace your_mongodb_uri with your MongoDB connection string.

5. Create a .env file in the netflix-ui directory and set the following variables:

   REACT_APP_API_KEY = your_TMDB_api_key
   REACT_APP_TMDB_BASE_URL = https://api.themoviedb.org/3

   Replace your_TMDB_api_key with your API key from your TMDB account.

6. Run the server:

   cd netflix-backend
   npm run dev

7. Run the client:

   cd netflix-ui
   npm start

The application should now be running on http://localhost:3000.

Usage

Open your browser and go to http://localhost:3000. Sign up or log in to access the Netflix clone features. Explore and enjoy the Netflix-like experience!

Contributing

Feel free to contribute to this project. Open an issue or submit a pull request to suggest improvements or add new features.