Netflix Clone

Netflix Clone is a web application that replicates the functionality and design of Netflix, allowing users to browse and stream movies and TV shows.

Demo

netflix-clone

Screenshots

Features

• ** Movie & TV Show Browsing:** Users can browse through a large library of movies and TV shows.
  for each transaction.
• ** Favorites:** Users can add movies and TV shows to their favorites for easy access later.
• User Profiles: Create and manage user profiles.
• ** Video Playback Controls:** Includes play, pause, skip, and volume controls.
• ** Responsive Design:** Adaptable interface that works on different screen sizes.

Technologies Used

• Zustand - State management library.
• Next.js - React framework for server-side rendering and static site generation.
• React.js - JS library for crafting user interfaces
• Tailwind CSS - A utility-first CSS framework
• Material-UI (MUI) - React components for faster and easier web development.
• NextAuth.js - Authentication for Next.js applications.
• SWR - React Hooks library for data fetching.
• Lodash - JavaScript utility library for working with arrays, objects, and other data types.
• React Icons - A library of popular icons for React applications
• Vercel - Hosting platform for deploying Next.js applications.

Database

• Prisma - Prisma ORM is an open-source next-generation ORM
• MongoDB Atlas Cloud Database - Cloud-based NoSQL database for storing and managing data.

Installation

Prerequisites

• Install Node.js

• Clone the repo

  After cloning the repo install dependecies with

  npm install

Setting Up the .env File

1. Cloning the Project:

   • Once you've cloned the project, you'll need to create a .env file.
   • I've included an .env.example file with detailed instructions on which environment variables the project requires and how to set them up.

2. Creating the .env File:

   • Start by copying the .env.example file and creating a new file named .env.
   • Make sure to fill in the contents of the .env file.

3. Defining Environment Variables:

• In the .env file, you need to define the following environment variables to set up authentication with Google and GitHub using NextAuth.js:.

  # Google OAuth credentials
     GOOGLE_CLIENT_ID=your_google_client_id
     GOOGLE_CLIENT_SECRET=your_google_client_secret

  # GitHub OAuth credentials
     GITHUB_ID=your_github_client_id
     GITHUB_SECRET=your_github_client_secret

  # NextAuth.js secrets
     NEXTAUTH_SECRET=your_nextauth_secret
     NEXTAUTH_JWT_SECRET=your_nextauth_jwt_secret

4. Generating OAuth Credentials:

• For Google:

  • Go to the Google Cloud Console.
  • Create a new project or select an existing project.
  • Navigate to APIs & Services > Credentials.
  • Click on Create Credentials and select OAuth 2.0 Client IDs.
  • Configure the OAuth consent screen and set up the credentials.
  • Copy the Client ID and Client Secret and add them to your .env file.

• For Github:

  • Go to GitHub Developer Settings.
  • Click on New OAuth App.
  • Fill in the required information and create the app.
  • Copy the Client ID and Client Secret and add them to your .env file.

5. Generating NextAuth.js Secrets
   :

• NEXTAUTH_SECRET: This secret is used to encrypt the session and JWT tokens. You can generate a secure random string using a tool like openssl or uuid:

   openssl rand -base64 32

• NEXTAUTH_JWT_SECRET: This secret is used for signing JWT tokens. You can use the same method as NEXTAUTH_SECRET to generate a secure string.

6.Completing Setup:

• Once you have generated and added all the necessary credentials and secrets to the .env file, you are ready to start the application.

License

MIT