Netflix UI Clone

This project is a responsive clone of Netflix's user interface, built using React.js and Tailwind CSS. It includes user authentication and the ability for users to store their favorite movies and TV shows using Firebase.

Project Links

• Live Website (Hosted on Firebase): NetflixUI-Clone
• GitHub Repository: GitHub Repo

Screenshots

Homepage

SignIn

Features

• User Authentication: Users can sign up and log in using Firebase Authentication.
• Favorite Movies/TV Shows: Users can add movies or TV shows to their list of favorites, with data stored in Firebase.
• Responsive Design: The UI is fully responsive, providing a seamless experience across devices.
• Netflix-like UI: Replicates the look and feel of Netflix, including navigation and content display.

Technologies Used

• React.js: Frontend library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for styling.
• Firebase: Used for authentication and storing user data (favorite movies/TV shows).

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/netflix-clone.git

2. Navigate to the project directory:

   cd netflix-clone

3. Install the dependencies:

   npm install

4. Create a .env file and add your Firebase configuration:

   REACT_APP_FIREBASE_API_KEY=your-api-key
   REACT_APP_FIREBASE_AUTH_DOMAIN=your-auth-domain
   REACT_APP_FIREBASE_PROJECT_ID=your-project-id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your-storage-bucket
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
   REACT_APP_FIREBASE_APP_ID=your-app-id

5. Start the development server:

   npm start

6. Open your browser and go to:

   http://localhost:3000
   

Usage

• Sign up or log in using the authentication form.
• Browse the available content (mock data can be used to display shows/movies).
• Add shows or movies to your favorites list.

Future Improvements

• Add real movie/TV show data from an API like TMDB.
• Include a detailed movie/TV show information page.
• Implement streaming functionality.