It’s movie night. You and your folks are crowded around the TV and someone opens Netflix. The scroll begins. Fragmented genres, “new” releases nobody asked for, titles you half-recognise from a trailer six months ago. Twenty minutes in, you put on something nobody’s that excited about.
There’s no shortage of good content. The problem is that every streaming service is designed to keep you inside its own catalogue. No single app knows what’s on the others, and none has any incentive to tell you.
Media Explorer cuts through that. Browse across every provider at once, filter by genre, language, or release window, and sort by popularity, professional rating, or recency. You set the criteria; it surfaces what’s good.
Built on Marq — a design system I built for media and entertainment products.
Engineering
A browsing surface can span thousands of titles. Keeping it fast regardless of result set size required two things working together: a virtualized list that renders only what’s in the viewport, and lazy-loaded pagination that withholds data the user hasn’t asked for. The combination keeps the initial load lean and navigation performance consistent whether the result set has 20 items or 2,000.
Auth is handled by NextAuth v5 with a credentials provider and JWT sessions. User state lives in a SQLite database managed through Prisma — schema-managed with full migration history. SQLite keeps the self-hosted footprint simple without sacrificing the structure of a relational model or the discipline of versioned migrations.
The app is self-hosted via Docker. The multi-stage build installs monorepo dependencies, compiles the design system, generates the Prisma client, and runs next build. An init script on container startup baselines migration state, applies any pending migrations, and seeds users from environment variables. Every deployment is reproducible from a clean slate.
Stack
- Next.js 16 — App Router, standalone Docker output
- NextAuth v5 — credentials provider with JWT sessions
- Prisma 6 + SQLite — schema-managed database with migration history
- TMDB API — movie and series data
- Marq — in-repo design system (
@marq/core) - Panda CSS — zero-runtime styling inside Marq
Features
- Mobile-first, works great on any screen size; faster and more powerful on desktop for heavy browsing
- Browse by provider, genre, language, and release date range
- Sort by popularity, professional rating, or release date
- Virtualized list for fast scanning of large result sets
- Lazy-loaded pagination for seamless infinite scroll
- Searchable titles across movies and series
- Light / dark theme
- Animated UI
- Fully typesafe end-to-end