A modern front-end clone of Netflix, built with Next.js, React, and Firebase.

---

📖 About the Project

This is an open-source clone of the popular streaming platform, Netflix. The project aims to replicate the core UI/UX and essential features of the original website, serving as an excellent demonstration of modern front-end development capabilities.

This project is built to fetch real movie and TV show data using the TMDB (The Movie Database) API, complete with seamless horizontal scrolling and dynamic routing. It also integrates Firebase for authentication and database management.

✨ Features

• 🔐 Authentication: User login and registration functionality via Firebase.
• 🎬 Dynamic Data: Real-time data fetching using the TMDB API.
• 📱 Responsive Design: Fully responsive layout that looks great on all devices (mobile, tablet, desktop).
• 🔍 Search Functionality: Find your favorite movies and TV shows instantly.
• 🗂️ My List: Save movies and shows to a personalized list.
• 🚦 Routing: Fast client-side routing with Next.js (Home, Movies, Shows, My List, Search, etc.).
• 💨 Performance: Implementation of best practices for optimal loading speeds and SEO.

---

🛠️ Tech Stack

• Framework: Next.js
• Library: React.js
• Styling: CSS Modules / Vanilla CSS
• Backend/Auth: Firebase
• API: TMDB API

---

🚀 Getting Started

Follow these instructions to set up the project locally on your machine.

Prerequisites

Ensure you have the following installed:

• Node.js (v16.x or newer)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/shihabcodes/netflix-clone.git
   cd netflix-clone

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up Environment Variables: Create a .env.local file in the root directory and add your API keys:

   touch .env.local

   Add the following content (replace with your actual key):

   NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key_here
   

   You can get a free API key by signing up at TMDB.

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open the app: Open http://localhost:3000 in your browser to view it.

---

📂 Project Structure

netflix-clone/
├── components/   # Reusable UI components (Navbar, MovieCards, Row, etc.)
├── pages/        # Next.js page routing (index, login, search, my-list, etc.)
├── styles/       # Global styles and CSS Modules
├── lib/          # Helper functions and Firebase configuration
└── public/       # Static assets (images, icons)

---

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

To contribute:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.

---

📝 License

Distributed under the MIT License. See LICENSE for more information.

---

Show some ❤️ by starring this repository!