Best50Series
Discover what's worth watching. A modern entertainment platform featuring weekly Top 50 rankings of movies and TV series, rich artwork, trailers, and viewing information.
Overview
Best50Series, branded “THE 50” on the site, is a production entertainment platform that publishes two weekly rankings: the Top 50 TV series and the Top 50 movies people are watching right now. Both lists are rebuilt automatically every week from Trakt’s most-watched data and presented with rich artwork, synopses, trailers and week-over-week movement, in English, French, German and Italian. Every page is prerendered and served from Cloudflare’s edge, so a visit never waits on a server render or a third-party API.
Problem
Deciding what to watch means piecing together information scattered across many streaming services. There was no single, fast place showing what people are actually watching this week, with the artwork, synopsis and trailer needed to make a choice.
Solution
A static-first Next.js 16 platform on Cloudflare Workers. Every Monday an automated pipeline pulls Trakt’s weekly most-watched series and movies, enriches them with metadata, artwork and trailers from TVmaze, Fanart.tv, Wikipedia, Wikidata and YouTube, and runs a strict quality gate before publishing the new week to Cloudflare R2 in one atomic step. The site is then prerendered in four languages and deployed. If any step fails, the previous week stays live and an issue is opened automatically.
Features
Weekly Top 50 series and movies
Two ranked lists of 50 titles each, ordered exactly as Trakt’s weekly most-watched data, with every card showing its real rank.
Automated refresh with a quality gate
A Monday job builds both lists and checks them: 50 + 50 titles, ranks 1–50, no duplicates, one week, at least 45 of 50 posters. Only then is the week published. On failure the previous week stays live and a GitHub issue is opened.
Cinematic hero carousel
A full-width backdrop hero for the top 5 titles with rank, movement, genres and a trailer button. Slides change only through the controls, never on autoplay.
Search, genre and favorites filters
Search by title, filter by this week’s genres or show only favorites. Cards keep their real rank, and the grid expands from a short preview to all 50.
Favorites without an account
A heart on each title saves it in the browser, separately for series and movies. Blocked storage is handled gracefully and never breaks the page.
Trailers in an accessible modal
One native <dialog> player with focus handling, Escape and an inert background. The privacy-enhanced YouTube embed exists only while the dialog is open.
Rich poster cards and rank movement
Poster cards with rank, year, genres and NEW / up / down badges matched by title, not position. The synopsis slides up on hover or keyboard focus, and multi-source artwork fallbacks never show a broken image.
Countdown, sources and sharing
Each ranking shows when it was made, a live countdown to the next update and its data source, plus a share button that uses the native share sheet or copies the link.
Four languages
English, French, German and Italian interfaces with localized synopses. English keeps clean URLs (/series); other languages use prefixed paths (/fr/series).
SEO and social cards
JSON-LD with an ItemList that mirrors the ranking in order, generated social images per language and list, plus sitemap, robots and web manifest.
Screens
The weekly 50 with search and genre filters 
Top 50 movies, synopsis on hover
Technical Stack
- Next.js 16 (App Router)Ranking pages prerendered at build time from the active weekly data, with localized routes
- React 19Mostly server components, with small client parts for filters, trailers, carousel, language and sharing
- TypeScriptApp, data pipeline scripts and tests
- Tailwind CSS v4Styling
- Cloudflare Workers + OpenNextHosting and runtime, with prerendered pages served from static assets
- Cloudflare R2Published weekly rankings and the artwork, trailer and description caches
- Cloudflare Imagesnext/image optimization to AVIF and WebP on Workers
- GitHub ActionsWeekly cron refresh and the only production deploy path, gated by lint, typecheck and tests
- Trakt APIRanking source (weekly most-watched) and French, German and Italian synopses
- TVmaze · Fanart.tv · Wikipedia · Wikidata · OMDbSeries metadata, multi-source artwork and trailer candidates
- YouTube Data APITrailer checks during the weekly refresh; playback through privacy-enhanced embeds
- next/fontSelf-hosted Geist and DM Serif Display, no external font request
Engineering notes
- Static-first delivery: OpenNext’s static-assets cache with cache interception serves prerendered pages without booting the Next.js server.
- All-or-nothing publishing: the series list, then the movies list, then the active pointer is written to R2 last, and the deploy is pinned to that exact generation.
- A custom Worker wrapper caches optimized images at the edge for 7 days, keyed by negotiated format (AVIF, WebP or original).
- Small client footprint: filters, favorites and trailers use delegated listeners that toggle server-rendered cards instead of re-rendering the grid.
- Internationalization without a library: a typed locale config, JSON message files and a server translator, with unprefixed English URLs through rewrites.
- Strict production Content Security Policy with an explicit artwork-host allowlist and YouTube-only frames, plus HSTS, X-Frame-Options and Permissions-Policy.
See it in production
best50series.com
Need a site like this?
I design and build websites and web apps for businesses: landing pages for €199, business websites for €499, custom projects by quote.