Movie Matrix

🚀 Overview

This project replicates the core Netflix experience:

• User authentication
• Movie discovery
• Trailers
• Favorites
• Personalized accounts

Focuses on clean UI, scalable folder structure, and real-world tools used in production-grade React applications.

✨ Features

• 🔐 Authentication System – Signup, login, password recovery (Firebase Auth)
• 🎞️ Movie Discovery – Netflix-style rows & categories
• 📄 Movie Details Pages – Trailers + detailed information
• 🔍 Search Functionality – Search movies across the platform
• ❤️ Favorites – Save and manage favorite movies
• 👤 User Account Page – Profile and preferences management
• 💳 Subscription Plans – Display available tiers (mock)
• ▶️ Trailer Playback – YouTube integration
• 📱 Responsive UI – Mobile-first design with Tailwind CSS

🛠️ Tech Stack

Frontend

• React 19
• Vite
• React Router v7

Styling

• Tailwind CSS
• Lucide React (icons)

Backend / Auth

• Firebase Authentication

Data & APIs

• Axios
• The Movie Database (TMDb) API

📸 Screenshots

Landing Page

Search Feature

Movie Details

🎯 Learning Outcomes

• Implemented full authentication flow + protected routes
• Integrated third-party APIs (TMDb) with clean data fetching
• Built scalable React architecture using Context API
• Created responsive, modern UI with Tailwind CSS
• Worked with embedded video playback (YouTube)

📌 Future Improvements

• Real payment integration (Stripe / subscription handling)
• Watch history & continue watching
• Advanced recommendation system
• Lazy loading + performance optimizations
• Caching (React Query / SWR)
• Dark/light theme toggle
• Trailers autoplay on hover (like Netflix)