# 🎬 ChillHub - Netflix Clone with React + Firebase + TMDB API

ChillHub is a full-stack Netflix clone built with React, Firebase Authentication, Firestore, Tailwind CSS, and the TMDB (The Movie Database) API. It allows users to browse trending, top-rated, and Netflix original movies, watch trailers, and manage their personal watchlist with a beautiful and responsive UI.

🚀 Live Preview

View Live Site

---

📸 Preview

Desktop View	Mobile View

---

✨ Features

• 🔐 Authentication – Sign up and log in using Firebase Auth.
• 📺 Trending/Top/Original Rows – Powered by TMDB API.
• ❤️ Watchlist – Save movies with a single heart tap.
• 📽️ Trailer View – Opens YouTube trailer in a new tab.
• 📱 Responsive UI – Looks great on mobile, tablet, and desktop.
• 🎨 Tailwind CSS – Clean design and animations using Framer Motion.
• 🔔 Toast Notifications – Instant feedback for watchlist actions.

---

🛠️ Technologies Used

• React (with Hooks & Router)
• Firebase (Auth & Firestore)
• Tailwind CSS
• Framer Motion
• TMDB API
• React Hot Toast

🔑 Getting Started

1. Clone the Repository

git clone https://github.com/TerminatorSS24/ChillHub.git cd ChillHub

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env file in the root directory:

REACT_APP_FIREBASE_API_KEY=your_firebase_key REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com REACT_APP_FIREBASE_PROJECT_ID=your_project_id REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id REACT_APP_FIREBASE_APP_ID=your_app_id REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id REACT_APP_TMDB_API_KEY=your_tmdb_api_key 🔐 Keep this file secret and never commit it.

4. Run the Development Server

npm start

📦 Deployment

You can deploy this project using platforms like:

Vercel Netlify Firebase Hosting

Be sure to set the same environment variables on your chosen platform.

🙌 Credits

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Subhraneel Saha CV LinkedIn