Nexus
Marvel catalogue and timeline, with its own CMS.
The Problem
Presenting a massive, multi-decade cinematic catalogue — spanning 40+ films, dozens of television series, chronological storylines, and evolving phase structures — in a smooth, cinematic web interface.
Maintaining this interlinked dataset required a purpose-built editorial CMS allowing administrators to manage cast lists, trailer embeds, chronological timelines, and release schedules.
What I Built
Cinematic Catalog & Quick-View Modal
A high-performance streaming interface with real-time client-side search, category filtering, and an instant quick-view overlay that displays synopsis, runtime, cast, and trailer without breaking scroll position.
Interactive Chronological Timeline
A timeline view organizing the entire franchise in in-universe story order, grouped by narrative arcs and phases, incorporating pre-MCU foundational titles.
Upcoming Releases & Watchlist (The Vault)
An upcoming release calendar with countdown timers alongside "The Vault", a local-storage-backed watchlist that tracks watched titles and view progress without requiring an account.
Full Public Experience
Complete scroll capture of the public homepage displaying featured hero, trending titles, phase collections, and search.
Chronological Scroll View
Full-height view of the complete chronological MCU timeline from Captain America to future phase releases.
Key Decisions
Custom TMDB CDN image loader
Poster and backdrop artwork originate from TMDB's global CDN, which already provides optimized dimensions (w185, w500, w780, w1280). A custom Next.js image loader maps requested viewport widths directly to the closest safe TMDB bucket, eliminating Vercel image transformation billing while delivering maximum image fidelity.
High-contrast flat design system
Eliminated drop shadows, borders, and decorative noise in favor of strict aspect ratios, precise typographic hierarchy, and pure black background layers, allowing dense grids of movie poster art to remain clean and legible.
Client-side instant search and Vault persistence
Implemented an in-memory search index for immediate filtering across hundreds of media entities, with watchlist state persisted to localStorage for zero-latency client state.
Outcome
A responsive, streaming-grade media catalog with an administrative management dashboard running on its own production domain.
Built With
Next.js 16 · React 19 · TypeScript · Prisma · PostgreSQL · NextAuth · Framer Motion · Tailwind v4 · Vercel