After a layoff earlier this year, I decided to challenge myself by building a fully functional, responsive, production-ready Netflix clone — and I call it NetflixGPT.
This project helped me strengthen my frontend skills, especially around React hooks, Firebase Auth, React Query, and PWA architecture.
⚙️ Tech Stack
React + Vite — Fast build and modular structure
Firebase Auth — Login with Email/Google
TMDB API — Movie & TV metadata
Tailwind CSS — Responsive layout
React Query — Caching & async fetch management
Debounced Search — With useRef to avoid repeat calls
PWA Support — With manifest, icons, installability
✨ Key Features
✅ Debounced real-time search using TMDB
✅ Firebase login flow (email + Google)
✅ Responsive header/navigation with Tailwind
✅ Movies filtered by genre
✅ Built-in caching of search results
✅ Installable as a PWA (Add to Home Screen)
✅ Deployed via Firebase Hosting
💡 Lessons Learned
*How to optimize component-level re-renders using memoization
*Caching API responses with custom hooks + useRef
*Handling stale closures in setTimeout inside React
*Structuring PWA metadata for installability
*Fine-tuning Firebase Auth redirects and route guards
🚀 Try It Yourself
https://netflixgpt-c2b80.web.app/
🙏 Final Thoughts
This was a project I really enjoyed building. If you're preparing for frontend interviews or building your React portfolio, I highly recommend cloning and tweaking it.
Also, a special thanks to Akshay Saini — his videos helped me refresh my JavaScript foundation and sparked the idea for this project. If you're starting out, his content is gold.
Feel free to leave feedback, suggestions, or questions!
🧑💻 I'm open to frontend roles — remote or hybrid.
tags: #react #firebase
Top comments (0)