Skip to main content

● Personal project · built on the TMDB API

Cinematch

Step into the theatre. Every screen treated like cinema.

  • Full-stack engineering
  • UI / UX design
  • Design system & motion

The brief

Cinematch is a personal project exploring what a streaming service feels like when every screen is treated like a piece of cinema — deep blacks, champagne-gold accents, a high-contrast serif, and motion that behaves like a title sequence.

It runs on a live catalogue from The Movie Database (TMDB): browse trending, popular and top-rated films and series, search the whole catalogue, discover titles by mood, and — once signed in — keep a personal watchlist and history across profiles. I designed and built the whole thing end to end.

// the reel

Three screens, one reel

Film, television and discovery — the real product, pulled through the gate frame by frame.

  • A Cinematch film detail page with a full-bleed backdrop, poster, synopsis, rating, genre chips and a cast row
    01 · movie — backdrop, synopsis, cast
  • A Cinematch series detail page with seasons, an episode selector and episode cards
    02 · series — seasons & episodes
  • Cinematch's discover screen with a type toggle, mood and genre filters, and a grid of film posters
    03 · discover — by type, mood & genre

// discover by mood

Tell it how you feel.

Beyond genres, the discover screen filters the whole TMDB catalogue by mood. Pick one — the matches light up.

// under the hood

The projection booth

A pnpm monorepo: a Laravel API with a queue layer that keeps the catalogue fed, and a Next.js front end built for speed and four languages. I designed and built it end to end.

  • Laravel 13
  • PHP 8.4
  • Next.js 16
  • React 19
  • TanStack Query
  • Postgres 16
  • Redis 7
  • next-intl
  • // tmdb-sync

    A live catalogue, kept fresh

    A Laravel Horizon queue syncs the trending and top-rated hot-lists and hydrates full title details from the TMDB API in the background — so the catalogue stays current without a request ever waiting on an upstream call.

  • // cache-first

    Cache-first, both tiers

    Responses are cached across the Laravel API and the Next.js front end, so browsing, search and detail pages stay instant. TMDB is the source of truth, never the bottleneck.

  • // auth

    Profiles & watchlist

    Sanctum auth with Netflix-style profiles, a personal watchlist, continue-watching and viewing history — all gated behind authentication and scoped to each profile.

  • // i18n

    Four languages, RTL-ready

    The interface is fully internationalised with next-intl across English, Turkish, Arabic and French — including full right-to-left layouts for Arabic.

  • // playback

    The player is chrome, not infrastructure

    I built the player UI and the app around it; the actual playback streams from third-party providers. Cinematch wraps those sources in a cinematic shell — it is not a streaming, CDN or transcoding pipeline.

Catalogue data and artwork come from The Movie Database (TMDB).

An ongoing experiment

Cinematch is a personal, ongoing project — somewhere to push on cinematic UI, motion and a clean, cache-first full-stack architecture rather than chase numbers. It is not a commercial product and has no userbase to report; the craft is the point.

Catalogue data and artwork come from TMDB; playback is handled by third-party providers. Everything else — the design system, the Laravel API and queue layer, the Next.js front end, and the four-language interface — I designed and built.