🎬 React Netflix Clone (Firebase + Vite)

A fully responsive Netflix-inspired web application built with React, Vite, and Firebase Authentication, powered by the TMDB API.
This project focuses on clean UI, scalable architecture, and real-world production practices.

🔗 Live Demo: Netflix Clone Live

📦 Repository: react-netflix-firebase-clone

---

Features

Category	Feature
Authentication	Email & Password authentication using Firebase Auth
Authentication	Secure login, signup, and logout flows
Authentication	Auth state persistence across page refresh
Authentication	Automatic redirect based on authentication state
Movie & TV Content	Real-time movie and TV data fetched from TMDB API
Movie & TV Content	Categorized rows for trending, popular, upcoming, and top-rated content
Movie & TV Content	Netflix-style reusable content rows
Player & Media	Dedicated movie player page
Player & Media	Dynamic trailer fetching via TMDB Videos API
Player & Media	Embedded YouTube trailer playback
Routing & Navigation	Client-side routing using React Router
Routing & Navigation	Protected navigation flow for authenticated users
Routing & Navigation	Dynamic player routes using /player/:id
UI / UX	Netflix-inspired modern user interface
UI / UX	Hero banner with featured content
UI / UX	Fully responsive layout for desktop and mobile
UI / UX	Smooth hover effects and transitions
User Feedback	Toast notifications for authentication feedback
User Feedback	Visual loading spinner during auth operations
State & Async Handling	Centralized auth state handling with Firebase listeners
State & Async Handling	Loading state management during authentication
State & Async Handling	Graceful error handling for API requests
Performance & DX	Vite-powered fast builds and hot module replacement
Performance & DX	Lazy loading and optimized imports
Performance & DX	Environment-based configuration for API keys

---

🧱 Tech Stack

Frontend

• React 18
• Vite
• React Router v6
• CSS Modules / Custom CSS

Backend / Services

• Firebase Authentication
• TMDB API (movies & TV data)

Tooling & Deployment

• Vercel (production hosting)
• ESLint (code quality)
• Environment Variables (.env)

---

📁 Project Structure

NETFLIX-CLONE
├── node_modules/          # Installed dependencies (not committed)
├── public/                # Static public assets
│   ├── background_banner.jpg
│   └── netflix_favicon.ico
│   │
├── src/
│   ├── assets/            # Images, icons, media assets
│   │   ├── cards/         # Movie card images & metadata
│   │   │   ├── card1.jpg
│   │   │   ├── card2.jpg
│   │   │   ├── ...
│   │   │   ├── card14.jpg
│   │   │   └── Cards_data.js  # Card metadata (titles, images, ids)
│   │   ├── logo.svg
│   │   ├── hero.png
│   │   └── ...
│   │
│   ├── components/        # Reusable UI components
│   │   ├── Navbar/
│   │   │   ├── Navbar.jsx
│   │   │   └── Navbar.css
│   │   ├── Footer/
│   │   │   ├── Footer.jsx
│   │   │   └── Footer.css
│   │   └── TitleCards/
│   │       ├── TitleCards.jsx
│   │       └── TitleCards.css
│   │
│   ├── pages/             # Route-level pages
│   │   ├── Home/
│   │   │   ├── Home.jsx
│   │   │   └── Home.css
│   │   ├── Login/
│   │   │   ├── Login.jsx
│   │   │   └── Login.css
│   │   └── Player/
│   │       ├── Player.jsx
│   │       └── Player.css
│   │
│   ├── config.js          # Firebase initialization + TMDB config
│   ├── firebaseAuth.js    # Firebase Auth instance (singleton)
│   ├── firebaseActions.js # Auth actions (signup, login, logout)
│   ├── App.jsx            # Routes & protected navigation
│   ├── index.css          # Global styles
│   └── main.jsx           # React app entry point
│
├── .env                   # Environment variables (not committed)
├── .eslintrc.js           # ESLint configuration
├── .gitignore             # Git ignore rules
├── index.html             # HTML entry file
├── package.json           # Dependencies & scripts
├── package-lock.json      # Dependency lock file
├── vite.config.js         # Vite configuration
└── README.md              # Project documentation

🔐 Environment Variables

Create a .env file in the project root: These variables are required for Firebase Authentication and TMDB API access.

VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_TMDB_ACCESS_KEY=your_tmdb_access_key

⚠️ Do not commit .env files to GitHub.

🛠️ Installation & Local Setup

1️⃣ Clone the repository

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

2️⃣ Install dependencies

cd react-netflix-firebase-clone
npm install

3️⃣ Start development server

npm run dev

App will run at:

http://localhost:5173

🚀 Deployment

This project is deployed on Vercel.

Vercel Configuration

• Framework: Vite
• Build Command: npm run build
• Output Directory: dist

Required Environment Variables (Vercel)

• VITE_FIREBASE_API_KEY
• VITE_TMDB_ACCESS_KEY

🧪 Authentication Flow

Auth state persistence using onAuthStateChanged

config.js  ──Initializes Firebase App (singleton)

firebaseAuth.js ──Creates Firebase Auth instance

firebaseActions.js ──Handles signup / login / logout

App.jsx ──Controls routing via onAuthStateChanged

The authentication architecture follows a clean separation of responsibilities:

This ensures:

• No duplicate Firebase initialization
• Clean separation of concerns
• Production-safe architecture

📌 Why This Project?

This repository demonstrates:

• Real-world React project structure
• Secure Firebase authentication handling
• Proper environment variable management
• Scalable frontend architecture
• Clean, maintainable, portfolio-ready code

This is not a tutorial dump, but a production-style application. Built to reflect real-world frontend engineering practices.

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a Pull Request

📜 License

This project is for educational and portfolio purposes only.

All Netflix branding, logos, and media content belong to their respective owners.

👤 Author

Sushant Shinde
Frontend Developer | React & UI Enthusiast

If you like this project, consider giving it a ⭐