How I Built NetflixGPT — A React + Firebase PWA

Aakashpaliwal — Mon, 30 Jun 2025 05:25:48 +0000

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

DEV Community: Aakashpaliwal

How I Built NetflixGPT — A React + Firebase PWA