Netflix Clone 🎬

A Netflix-inspired movie streaming web application built using React and Firebase.

This project was created to practice React development, Firebase authentication, component-based UI design, and building a responsive movie streaming interface.

🚀 Features

• Netflix-inspired user interface
• User authentication
• Firebase integration
• Movie browsing
• Movie categories
• Movie cards
• Movie banner section
• Responsive design
• Reusable React components
• Navigation between pages

🛠️ Technologies Used

• React.js
• Vite
• JavaScript
• Firebase
• HTML
• CSS

🔐 Authentication

Firebase is used for user authentication.

The authentication flow includes:

User
  ↓
Sign Up / Login
  ↓
Firebase Authentication
  ↓
Authenticated User
  ↓
Netflix Home Page

📚 Concepts Covered

This project helped me practice:

• React Components
• JSX
• Props
• useState
• useEffect
• React Hooks
• Conditional Rendering
• Event Handling
• React Router
• Firebase Authentication
• Firebase Integration
• API/Data Handling
• Reusable Components
• Responsive UI Design
• CSS Styling

📁 Project Structure

netflix/
│
├── public/
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── App.jsx
│   └── main.jsx
│
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

⚙️ Installation

Clone the repository:

git clone https://github.com/AfeedaKN/netflix.git

Go to the project folder:

cd netflix

Install dependencies:

npm install

Start the development server:

npm run dev

Open the local URL provided by Vite in your browser.

🔥 Firebase Setup

Create a Firebase project and configure Firebase Authentication.

Add your Firebase configuration to the project using environment variables.

Example:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Do not commit private credentials or sensitive environment files.

🎯 Purpose

This project was created as a learning project to understand how to build a modern React application and recreate the user experience of a popular streaming platform.

💡 Learning Outcomes

Through this project, I practiced:

• Building a React application with Vite
• Creating reusable UI components
• Managing React state
• Using React Hooks
• Implementing authentication with Firebase
• Creating movie browsing interfaces
• Building responsive layouts
• Organizing a React project

👩‍💻 Author

Afeeda KN

GitHub: AfeedaKN