🎬 Movie Tracker

A modern full-stack movie management and discovery platform built with HTML, CSS, JavaScript, Firebase, and TMDB API.

Movie Tracker allows users to build their personal watchlist, discover new movies, track favorites, manage watched content, watch trailers, and receive recommendations through an intuitive and responsive interface.

---

🌟 Key Capabilities

• 🔐 Secure Firebase Authentication
• 🎬 TMDB Movie Discovery
• 🎥 Trailer Support
• 🤖 Personalized Recommendations
• 🔥 Real-Time Firestore Sync
• 📱 Fully Responsive Design
• 🚀 Deployed on Vercel

---

🌐 Live Demo

---

📸 Application Screenshots

🏠 Landing Page

Modern and responsive landing page introducing Movie Tracker, its features, and user experience.

🔐 Authentication System

Secure login and signup experience powered by Firebase Authentication with support for Email/Password and Google Sign-In.

🎬 Dashboard

Interactive movie management dashboard featuring search, filters, favorites, watched tracking, recommendations, and real-time synchronization.

📄 Movie Details Modal

Rich movie information panel displaying overview, genres, runtime, cast, director, trailers, similar movies, and personalized recommendations.

---

✨ Features

🔐 Authentication

• Email & Password Signup/Login
• Google Authentication
• Persistent Sessions
• Protected User Routes
• Secure Logout

🎬 Movie Management

• Add Movies
• Edit Movies
• Delete Movies
• Undo Delete
• Favorite Movies
• Watched / Unwatched Tracking
• Category Organization
• Random Movie Picker

🔍 Search & Filters

• Real-Time Search
• Category Filters
• Favorites Filter
• Watched Filter
• Unwatched Filter
• Movie Sorting

🎥 TMDB Integration

• Movie Posters
• Ratings
• Release Year
• Movie Metadata
• Automatic Movie Information Fetching

🚀 Advanced Movie Features

• 🎬 Detailed Movie Overview
• 🎭 Genre Information
• ⏱ Runtime Information
• 👨‍🎤 Cast Information
• 🎬 Director Information
• ▶ Trailer Support
• 🎯 Similar Movies
• 🤖 Personalized Recommendations
• 📄 Interactive Movie Details Modal

🎨 UI / UX

• Responsive Design
• Dark Theme
• Theme Persistence
• Modern Card Layout
• Skeleton Loading
• Toast Notifications
• Empty States
• Statistics Dashboard
• Smooth Animations

---

🔒 Security Features

• Firebase Authentication
• Firestore Security Rules
• User Data Isolation
• Protected Routes
• Field Validation
• Hidden TMDB API Keys
• Serverless API Proxy (Vercel Functions)

---

🛠 Tech Stack

Frontend

• HTML5
• CSS3
• Vanilla JavaScript

Backend & Database

• Firebase Authentication
• Cloud Firestore

APIs

• TMDB (The Movie Database)

Deployment

• Vercel

---

🏗 Architecture

Frontend (HTML/CSS/JavaScript)
        ↓
Firebase Authentication
        ↓
Cloud Firestore Database
        ↓
TMDB API via Secure Serverless Proxy
        ↓
Vercel Deployment

---

📂 Project Structure

Movie-Tracker/
│
├── api/
│   └── movie.js
│
├── css/
│   └── app.css
│
├── js/
│   └── app.js
│
├── images/
│
├── index.html
├── login.html
├── app.html
│
├── robots.txt
├── sitemap.xml
│
└── README.md

---

📈 Project Status

Module	Status
Planning & Architecture	✅ Complete
Authentication	✅ Complete
Movie Management	✅ Complete
TMDB Integration	✅ Complete
Search & Filters	✅ Complete
UI / UX	✅ Complete
Firestore Integration	✅ Complete
Security Hardening	✅ Complete
Deployment	✅ Complete
SEO Optimization	✅ Complete
Advanced Movie Features	✅ Complete
Analytics Dashboard	🚧 Coming Next

---

🎯 Current Highlights

✅ Firebase Authentication

✅ Real-Time Firestore Database

✅ TMDB Integration

✅ Trailer Support

✅ Similar Movie Discovery

✅ Personalized Recommendations

✅ Advanced Search & Filters

✅ Responsive Dark Theme

✅ Secure Serverless Architecture

✅ Production Deployment on Vercel

---

🚀 Upcoming Roadmap

📊 Phase 17 — Analytics Dashboard

• Watch History
• Favorite Genre Analysis
• Monthly Statistics
• Interactive Charts
• User Insights

📱 Phase 18 — PWA & Branding

• Favicon
• Manifest
• Installable Application
• Offline Support
• App Icons

🤖 Phase 19 — AI Features

• Smart Recommendations
• Mood-Based Recommendations
• Personalized Suggestions
• AI Assistant

👥 Phase 20 — Social Features

• Share Watchlists
• Public Profiles
• Collaborative Lists
• Friend Recommendations

---

💡 Challenges Solved

During development, several real-world challenges were solved:

• Firebase Authentication Flow
• Firestore Permission Errors
• API Security & Key Protection
• Deployment Issues on Vercel
• TMDB Data Handling
• State Management
• UI Responsiveness
• Production Debugging
• Git Merge Conflicts

---

📚 What I Learned

This project helped strengthen my understanding of:

• Authentication Systems
• Database Design
• API Integration
• Frontend Architecture
• State Management
• Security Best Practices
• Responsive UI Development
• Deployment Workflows
• Product Thinking

---

🤝 Connect With Me

🌐 Portfolio: harshvardhan-dev-seven.vercel.app

💼 LinkedIn: Harshvardhan Singh Karki

💻 GitHub: harshskarki

---

⚖️ Disclaimer

This product uses the TMDB API but is not endorsed, certified, or otherwise approved by TMDB.

---

⭐ If you like this project, consider giving it a star on GitHub!