Trending Movies
Movie discovery app — TMDB-powered, with watchlist, genre filters, and full detail views.
Frontend (Solo) Next.jsTypeScriptTMDB APITailwind CSSReact Context In Development
Overview
A Netflix-style movie discovery app powered by the TMDB API. Trending carousels, debounced search, full detail pages, and a local watchlist — all server-rendered with Next.js App Router.
No backend needed: the watchlist persists via localStorage, so users can save movies without an account.
My Role
- Architected the app with Next.js App Router — server-rendered data, client interactivity scoped to watchlist and UI state.
- Built the TMDB API layer (trending, search, detail, cast, similar) with full TypeScript types.
- Designed the hero, trending carousel, and genre-filter components — scroll-snap, keyboard nav, skeleton placeholders.
- Implemented the watchlist with React Context + localStorage persistence and a dedicated /watchlist page.
- Built a skeleton loading system matched to every component layout, eliminating layout shift on load.
Tech Stack
Next.jsTypeScriptTMDB APITailwind CSSReact Context
Challenges & Learnings
Server-rendering the initial trending data was the right call: first paint stays fast even against a third-party API I don't control. Genre filtering runs client-side so it feels instant.
Search needed a debounce tight enough to respect the TMDB rate limit but loose enough to feel live. 350ms with cancel-on-unmount cleanup did it — no stale results racing newer ones.