This is a React-based streaming platform that replicates core Netflix functionality with user authentication, movie browsing, and video/trailer playback features.
# Netflix Clone
A React-based streaming platform that replicates core Netflix functionality including user authentication, movie browsing, video playback, and search features.
## 🚀 Features
- **User Authentication**: Firebase-powered login/signup system
- **Movie Browsing**: Browse now playing, popular, and upcoming movies
- **Video Trailers**: Watch movie trailers with YouTube integration
- **Search Functionality**: Search for movies with real-time results
- **Multi-language Support**: English, Hindi, and Telugu language options
- **Responsive Design**: Mobile-first design with Tailwind CSS
## 🛠️ Tech Stack
- **Frontend**: React 18.2.0, React Router DOM 6.21.1
- **State Management**: Redux Toolkit 2.0.1
- **Styling**: Tailwind CSS 3.4.1
- **Authentication**: Firebase 10.7.1
- **API**: The Movie Database (TMDB) API
- **Build Tool**: React Scripts 5.0.1
## 🚦 Getting Started
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
- Firebase account
- TMDB API key
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Mahenvs/Netflix-clone.git
cd Netflix-clone- Install dependencies:
npm install- Set up environment variables:
Create a
.envfile in the root directory and add:
REACT_APP_API_KEY=your_firebase_api_key
REACT_APP_authDomain=your_firebase_auth_domain
REACT_APP_projectId=your_firebase_project_id
REACT_APP_storageBucket=your_firebase_storage_bucket
REACT_APP_messagingSenderId=your_firebase_messaging_sender_id
REACT_APP_appId=your_firebase_app_id- Start the development server:
npm startThe application will open at http://localhost:3000.
npm start- Runs the app in development modenpm build- Builds the app for productionnpm test- Launches the test runnernpm eject- Ejects from Create React App (one-way operation)
The application follows a modular architecture with:
- Routing: React Router handles navigation between login and browse views
- State Management: Redux Toolkit manages global application state
- Data Fetching: Custom hooks fetch movie data from TMDB API
- Authentication: Firebase handles user registration and login
- Caching: Redux state prevents unnecessary API calls
The app integrates with:
- TMDB API: For movie data, trailers, and metadata
- Firebase Auth: For user authentication and session management
- Tailwind CSS for utility-first styling
- Responsive design with mobile-first approach
- Dark theme consistent with Netflix branding
Supports multiple languages:
- English (default)
- Hindi (हिंदी)
- Telugu (తెలుగు)
ToDos: There is scope for responsiveness In detail view of movie
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is for educational purposes. Please respect TMDB API terms of service and Netflix's intellectual property.
- The Movie Database (TMDB) for movie data
- Firebase for authentication services
- Netflix for design inspiration
This README provides comprehensive documentation covering the project structure [1](#0-0) , technology stack [2](#0-1) , Firebase configuration [3](#0-2) , and the custom hooks architecture [4](#0-3) used throughout the application.
## Notes
The README is based on the actual codebase structure and dependencies found in the repository. The project uses a modern React architecture with Redux for state management and Firebase for authentication, making it a comprehensive example of a full-stack web application.
Wiki pages you might want to explore:
- [Overview (Mahenvs/Netflix-clone)](/wiki/Mahenvs/Netflix-clone#1)
- [Data Management (Mahenvs/Netflix-clone)](/wiki/Mahenvs/Netflix-clone#5)