Movie Tracker
Movie Tracker is a Letterboxd-style site for rating films and TV series out of 5, to one decimal place. Built with Next.js (App Router), TypeScript and Tailwind.
Setup
npm install
cp .env.example .env.local # then add your TMDB key
npm run dev
Open http://localhost:3000.
TMDB_API_KEY accepts either a TMDB v3 API key (sent as api_key) or a v4 read access token (any key longer than 40 characters, sent as a Bearer header). Get one at https://www.themoviedb.org/settings/api. The key is only used by the server route /api/search, never sent to the browser.
Structure
app/page.tsx – Films / TV series tabs, search, rated grid, sorting, stats, import/exportapp/api/search/route.ts – GET /api/search?type=movie|tv&q=... TMDB proxy (18 results max)components/RateModal.tsx – slider, number input, presets, ±0.1, watched date, reviewcomponents/Stars.tsx – five stars with fractional filllib/types.ts – Entry / SearchResult types and rating helperslib/useEntries.ts – storage hook (entries, save, remove, replaceAll)
Storage
Ratings live in localStorage (key reel:entries) behind useEntries. Nothing else touches storage, so swapping in Supabase later only means changing that hook. Use Export / Import (merge by key, newest updatedAt wins) to back up or move ratings between browsers.
