home / projects / cinevault ← a browsing UI, not a TV station

no. 02 · media discovery UI

CINEVAULT

A media discovery and browsing interface for exploring movies and shows. TMDB catalog metadata powers search, genre browsing, detail views and trailers, while playback hands off to switchable external embed sources. CineVault stores and hosts no media itself.

CineVault media discovery interface screenshot
TMDBcatalog metadata API
search+genres, watchlist, trailers
PWAmobile-first, TV friendly

The problem

Browsing streaming catalogs is noisy: fragmented services, weak search, no good way to track what to watch next. CineVault explores one clean interface for discovering movies and shows, organizing them into genres and collections, and keeping a personal watchlist with resume support.

Architecture

Next.js 14 App Router + TypeScript
  ↓
TMDB API (catalog metadata, search, trailers)
  ↓
Zustand stores (watchlist, continue watching, likes)
  ↓
External embed providers (playback handoff, server switching)
  ↓
Rate-limited API routes + Docker deploy

My contribution

  • UI/UX Design: streaming-style browsing patterns, visual hierarchy, dark glassmorphic interface
  • Search and Discovery: full-text search, genre and category navigation, trending and Top 10 rows
  • Detail Views: media pages with trailers, cast filmography explorer, season and episode selectors
  • Watchlist and Progress: personal watchlist, continue watching with persisted state, community likes and comments
  • Collections: franchise saga timelines with chronological viewing orders and progress badges
  • Responsive and PWA: mobile-first layout, bottom navigation, TV remote navigation, installable app

Design problems solved

  • Information density: rows, grids and spotlight hero keep a large catalog scannable without clutter
  • Playback failover: multi-source embed switching so a dead source never dead-ends the viewer
  • Abuse resistance: HMAC admin sessions, encrypted VIP codes, Turnstile checks and layered rate limiting on public endpoints
Next.js 14TypeScriptTailwind CSSZustandTMDB APIDocker
Go to site ↗ All Projects →

“We are drowning in information but starved for knowledge.”

— John Naisbitt