Find a film, keep a watchlist
A film catalogue with genres, TMDB ratings, favourites and watchlists, built to stay fast on top of a large third-party catalogue.
Personal project by Mykhailo Plokhin. Work in progress.
Next.js · TypeScript · Tailwind CSS · Prisma · TMDB API
The problem
A film catalogue is mostly someone else's data. The work is keeping it fast and reliable when that source is slow or changes.
- Fetching TMDB on every visit makes TMDB's bad day your bad day.
- Rendering everything in the browser makes a slow phone wait for the first poster.
- Watchlists belong to one person, so they cannot be cached like the catalogue.
How it is built
Catalogue pages render on the server and are cached for an hour. Only personal data — favourites and watchlists — reads the database.
Key decisions
Each choice, and the alternative it beat.
Cache catalogue pages for an hour
The catalogue is the same for everyone, so it is rendered once an hour instead of on every visit. If TMDB is down, visitors see slightly older data instead of an error.
Film pages rendered on the server
Film pages, Top Rated and New Releases arrive as HTML, so a slow phone is not left waiting for JavaScript. The main browse page is still rendered in the browser — next on the list.
The database only for personal data
Favourites and watchlists need real per-person reads; everything else stays out of the database.
Numbers
Wovie is a work in progress with a public demo, and its source is open.
| Figure | What it means | Basis |
|---|---|---|
| < 90msPage change | The target for moving between pages — not measured yet.Target | Target |
| 1 hCatalogue refresh | Catalogue pages are rendered once and refreshed every hour.Measured | Measured |
- Target
- — What the build is designed for — not a measured result
- Measured
- — Checked in the code or on the live build
Need something similar?
Tell us what you need in a few lines. A person from the team replies.
Start a project