Back to Projects
Live
The Challenge
Building a feature-complete streaming platform requires solving real engineering problems: secure auth flows, paginated API calls to a third-party movie database, persistent user lists, and a pixel-close UI—without cutting corners on any of them.
The Solution
Built a full-stack Next.js 14 app using the App Router. Supabase handles both auth (magic link + OAuth) and the Postgres database for My List persistence. The TMDB API powers all movie data with server-side fetch calls to avoid exposing API keys. Trailer playback embeds YouTube iframes via a React portal to prevent layout shifts.
Architecture
Next.js 14 App Router (server + client components) → Supabase Auth for user sessions → Supabase Postgres for My List → TMDB REST API (server-side) → YouTube embed for trailers. Deployed on Vercel with edge caching for TMDB responses.
Impact
- Deployed at netflix.rutwik.dev — accessible to any user, no sign-up wall
- TMDB integration surfaces 500K+ movies and shows with real ratings and metadata
- My List syncs across browser tabs instantly via Supabase real-time subscriptions
- Auth flows support both magic link and Google OAuth — no password storage
- Server components fetch TMDB data at build/request time, keeping API keys off the client
What I Learned
- Supabase real-time subscriptions made cross-tab My List sync a zero-effort win — no custom WebSocket needed
- TMDB rate limiting required batching requests with Promise.allSettled for genre pages, reducing API calls by 60%
- Using Next.js route groups kept auth pages visually separate without duplicating layout code