Case study · Movie discovery platform

One page. 45+ universes. Every watch order in the right order.

Every Cinematic Universe turns scattered franchise timelines into one fast interface. Pick a universe, filter by phase, and see every film and show in story order.

Franchise universes in one interface: 45+
MCU entries ordered chronologically: 59
MCU phases you can filter by: 6
Accounts or sign ups needed: 0

Role: Solo developer, design to deployVisit live site

Next.js
TypeScript
OMDB API
Netlify
Netlify Blobs
JSON-LD

Image slotFull page screenshot of the MCU timeline with the universe tab strip

The homepage: universe tabs on top, chronological timeline below.

The challenge: watch orders are a mess

Release order and story order almost never match. Fans bounce between wikis, forum threads and listicles just to answer one question: what do I watch next?

Most pages answer it badly. They bury the list under ads, split one universe across ten posts, or give a flat table with no sense of where a title sits in the timeline.

“A watch order is a data problem first and a design problem second.”
Dev notes

Image slotCollage of the scattered sources fans use today: wikis, forum threads, listicles

Before: the answer exists, but it lives in a dozen places.

Goals and success metrics

I wrote the success criteria before the first component.

Answer "what do I watch next" without a page refresh or a scroll hunt
Every view shareable: the URL restores the exact universe, phase and sort
Structured data so search engines understand each timeline
Posters that never block first paint

User and research

Research was desk based: existing watch order sites, forum threads, and the search results for queries like MCU chronological order.

Casual fans catching up before a new release want one clear next step
Completionists want both chronological and release logic, with context
Search visitors arrive with one franchise in mind and leave fast if it is buried

Process and approach

I built data first, interface second, polish last.

Model one universe as typed data: title, hook line, in universe year, phase
Build one timeline component that every universe reuses
Add phase filter and sort as custom dropdowns
Sync state to the URL
Layer posters and SEO on top once the core felt fast

Solution

A tab strip of universes with short badges, a phase filter, a sort control, and a numbered timeline. Each card carries the title, a one line hook, the in universe year and its phase.

A footer count confirms the scope, for example 59 films in chronological order.

Image slotClose up of timeline cards with phase badges and order numbers

Timeline cards: order number, hook line, year, phase badge.

Technical details

The stack is deliberately small.

Next.js and TypeScript, with typed universe data as the single source of truth
Custom dropdown components built to match the design instead of native selects
URL syncing so filters and selections survive refresh and sharing
OMDB API for posters, with a placeholder image as the fallback
Deployed on Netlify, including a fix for Netlify Blobs environment differences
JSON-LD structured data on timeline pages

Simplified example of the structured data pattern

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "ItemList",
  name: "Marvel Cinematic Universe in chronological order",
  itemListElement: entries.map((entry, i) => ({
    "@type": "ListItem",
    position: i + 1,
    item: { "@type": "CreativeWork", name: entry.title },
  })),
};

Results

The platform is live on Netlify with 45+ universes browsable from one page, and the MCU alone runs to 59 entries across six phases.

Universes live: 45+
MCU entries mapped: 59
Phases filterable: 6
Page to answer the question: 1

“The fastest feature is the one that answers the question on arrival.”
Dev notes

Lessons

Model the data before the UI. Every later feature got cheaper.
Treat the URL as state. Sharing is the growth channel for this kind of site.
Serverless storage behaves differently locally and in production. Test on the platform early.
A good fallback image is a feature, not a stopgap.

Next steps

Dedicated URLs and metadata for every universe
Toggle between release order and chronological order
Watched tracking saved per device
Absolute metadata base URL so social previews always resolve