Netflix Clone

A fully responsive, feature-rich Netflix clone built using React (Vite) and Firebase. This project mimics the core functionality and aesthetic of the popular streaming platform, serving as a practical exercise in modern front-end web development, API integration, and user authentication.

🚀 Features

What's Working

• User Authentication: Complete sign-up and sign-in flows powered by Firebase Authentication. User data is stored in Firestore.
• Dynamic Hero Banner: The home page fetches daily trending movies from the TMDB (The Movie Database) API, updating the background, title, and synopsis dynamically on load.
• TMDB API Integration: All movie data (trending, top-rated, upcoming, popular) is pulled live from TMDB, ensuring the content stays fresh.
• Live Search: A functional search bar in the navigation menu with a debounce effect (to prevent API spamming) and a dropdown overlay for quick results.
• Movie Detail Modal: Clicking a movie card triggers a custom, Netflix-style modal showing the movie's backdrop, rating, release year, language, and overview. It also locks the background scroll while open.
• Trailer Playback: Clicking "Play Trailer" in the modal fetches the YouTube trailer key from TMDB and plays it inside a dedicated player route.
• Skeleton Loading: Shimmering skeleton placeholders display while the API fetches movie data, creating a smooth user experience.
• Horizontal Scrolling: Movie rows support mouse-wheel horizontal scrolling, mimicking the native platform experience.
• Responsive Design: The UI scales smoothly across desktop, tablet, and mobile devices.

What's Not Working (Yet)

• "My List" / Bookmarking: The ability to save movies to a personal list is present in the UI but not currently hooked up to the backend database.
• User Profile Management: The dropdown allows signing out, but profile picture changing and account settings are not yet implemented.
• Full Video Streaming: The player currently embeds YouTube trailers instead of hosting full video files due to API and storage limitations.

🛠️ Tech Stack

• Frontend Framework: React 19 (via Vite)
• Routing: React Router v7
• Styling: Pure Vanilla CSS
• Backend & Auth: Firebase (Authentication, Firestore)
• Data Source: TMDB (The Movie Database) API
• Notifications: React Toastify

💡 Recent Improvements

As part of continuous development, I've recently made several key upgrades to the codebase:

1. Refactored API Logic: Extracted hardcoded TMDB bearer tokens and base URLs into a centralized constants.js file for better maintainability.
2. Fixed Asynchronous Bugs: Resolved an issue where the loading spinner during login would disappear instantly by properly awaiting the Firebase auth functions.
3. Enhanced Navigation: Fixed a routing bug where the player's back button skipped a page (navigate(-1) instead of -2).
4. Memory Management: Cleaned up rogue event listeners in the Navbar component that were causing memory leaks upon unmounting.
5. UI/UX Polish: Upgraded from static mock data to dynamic API responses for the hero banner, added the movie detail modal, and implemented skeleton loading screens.

📦 Getting Started

To run this project locally on your machine:

1. Clone the repository.
2. Run npm install to install dependencies.
3. Create a .env file and add your own Firebase config and TMDB API keys (refer to src/utils/constants.js and src/firebase.js).
4. Run npm run dev to start the Vite development server.