Cinemate | Jan Lauer

Cinemate shown on a desktop, a tablet and a phone.

Every film and series you've watched or want to watch, side by side in one collection that knows every detail, keeps you updated and helps you pick what's next.

Since 2014, every film and series I've watched got a row in a spreadsheet: 760+ watched films and series, 300+ on the watchlist, details like cast, director, year and genre typed in by hand. Cinemate is what I always wanted that spreadsheet to be, built for anyone who wants to remember what they've watched.

The Challenge

By 2025, at 1,000+ titles, my archive had become real work. A solution was needed.

I looked at already established platforms, and quickly noticed that each cover one part. Letterboxd is a film diary with reviews and a community, but has no series. Trakt tracks films and series but not as a collection you can sort and compare. IMDb is the reference for facts and its famous rating. JustWatch knows where things stream. None of them treats your history like the spreadsheet did: One sortable overview of everything, answering the questions that come up every day:

What did I watch, and how did I like it?
What should I watch tonight? What of my collection does my streaming provider offer?
What has changed since I last looked?
What else is there with this actor, or by this director?
What does my history say about me and my taste?

The goal: an app that combines what these platforms do separately. Reviews for movies and series like Letterboxd and Trakt, the facts and ratings like IMDb, and where it streams like JustWatch, in one sortable collection that fills in every detail by itself. That became Cinemate.

iPad mockup of Cinemate's library table, headlined "Your whole collection at a glance"

iPad mockup of Cinemate's library with the search panel and the rating panel open

iPad mockup of Cinemate's library with a film's detail panel and the notifications open

Evolution & History

The app has been a work in progress since the end of 2025 and has gradually grown along with my skills and wishes for new features.

v0: The original Excel film list: numbered rows with year, title, director, genre and a "seen in" column, all typed by hand — 2014, v0: It all started with a hand-typed Excel list.

v1: a single-page dark list with a form on top and plain table rows — Nov 2025, v1: One HTML file, OMDb API fills in the rows; the spreadsheet becomes a sortable, filterable list.

v2: a table with posters, score columns and a statistics sidebar — Jan 2026, v2: Own server, database, statistics. The TMDB API joins as a second data source, for posters, streaming info and people.

v3 before the redesign: functional table built from stock components — June 2026, v3: Rebuilt from the core as a modern component stack with big new features: rating, recommendations, insights, import. It worked, but wasn't designed yet.

The Solution

For v4 I redesigned the app from scratch in mid-2026, with a design system built in Figma, following one rule: move every feature closer to where it's used.

The result keeps your whole film and series history in one library, with one flow on top for each everyday question:

Library: every title in one list or grid, details open beside it.
Document: search, add and rate in seconds with stars and moods.
Discover: from a film to its cast and on to the next film.
Decide: one pick for tonight, and the reason why.
Reflect: what your watching says about your taste.
Stay updated: new seasons, cinema dates, streaming arrivals.
Import: bring your Letterboxd, IMDb or spreadsheet history with you.

Library: Everything at a glance, details beside it.

One list shows every title with the information chosen for display. Filter, sort and compare by any dimension, from cast and director to year, mood or service.

Click a title and its details open beside the list. The list stays the anchor: scrolling, comparing and switching continue. One panel bundles what matters: poster, rating and moods, where it streams, trailer, cast, film series and similar titles.

The library table with a film's detail panel open beside it: poster, streaming services, trailer, genres, plot and cast — Details open beside the list, so you never lose your place. New titles show at the top of the list, whatever the sort order, until you clear their New badges.

Document: Watched it? Find and rate it in seconds.

The search bar offers an easy way to find new titles.

Search, filter, add: one at a time or several at once, without leaving the library.

Mark or add a film as seen and the rating panel opens right there. A rating has three independent parts: stars, moods and a text review.

23 one-tap chips like Mind-blown, Slow burn or Great soundtrack make rating fast, personal and filterable, while not taking as much time as writing a textreview. They also feed What to watch.

Rate one or more titles in seconds without leaving your collection.

Discover: "Where have I seen this face? Which of my titles can I watch on Netflix right now?"

An actor's or director's name sounds familiar? One click opens their detailed page and filmography and shows what's already been seen and what's still missing. The streaming filter shows what's available right now.

From a search to a film to its actor to the next film on the watchlist.

Decide: Tonight, sorted.

What to watch picks one film or series from your watchlist, or one worth watching again, filterable by mood, decade, runtime and services. Every pick explains why it's a match. Every new rating makes the suggestions more accurate.

Pick a mood or another filter and get suggestions, each with the reason it fits.

Reflect: What your watching says about you.

Who is your most-watched actor? Which genre and which decade do you rate highest? When do you watch what? Every chart works on any slice of the collection, down to questions like: how do you rate Denis Villeneuve's sci-fi films on your Favorites list? Insights turns the collection into answers.

Insights: taste persona, filterable viewing diary and more.

Stay updated: What's hot? What's new? You'll know.

Trending shows what's popular this week: before typing, the search panel lists the week's trending titles, and in the library a flame marks which titles everyone is talking about.

Notifications report what you can act on: a new season of a series you watched, a cinema date for a film on your watchlist, a new project by a person you follow, or a watchlist film arriving on your streaming service.

The library table's news column, showing each title's latest updates right in its row — A special column keeps you updated without needing to leave your collection.

The notification panel listing different kinds of updates for the titles and people you follow — Adjustable notifications: you choose what you want to hear about.

Import: Bring your history.

Switching shouldn't mean starting over. Drop a Letterboxd export, your IMDb ratings, watchlist and lists, or a spreadsheet, and Cinemate matches every line to its title. An import only fills gaps: nothing is overwritten, and the whole import can be undone.

Switching without starting over: the import fills the library title by title, and every import can be undone.

Visual Design & System

A film library is mostly data, so the design is information design: every kind of data has its own look, so the eye sorts before it reads.

Shape, color, typeface, icon: each kind of data gets its own look.

The table is for comparing and sorting; the grid is for browsing. Zoom levels allow different informational depth.

The status badges in their full and icon-only variants — A colored status badge on every entry and tinted posters represent their status.

Customize the look and choose between different color tints in four strength levels.

Underneath sits a system built from scratch: tokens, hues, type roles and motion patterns, so every panel, list and overlay feels the same way.

Token board: color and font tokens — Color: Seven hues in up to five steps, built on a grayscale foundation. Two typefaces with 13 styles each.

Figma component sheets: every component, every state — Collection of Figma components that were created for the design.

Design to Code

In v4, every screen started in Figma: about 90 component sheets, each showing every state, built on 396 variables. The variables went into the code as tokens, value for value, so a change to a token reaches every screen at once.

How it was built. Design, UX, specs and every product decision are mine; the code is written with AI coding agents under my direction. I started v1 by hand, moved to Gemini and later to Claude as the tools improved. The app runs on Next.js, React and Tailwind CSS, with shadcn/ui components themed by the Figma tokens.

Stack: Figma · Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · shadcn/ui (Radix) · Lucide · TanStack Table & Query · SQLite (Drizzle) · TMDB API · Playwright & Vitest · Claude Code

Impact & Reflection

The biggest design step was building a design system from scratch, on my own: variables, components and every state, all consistent with each other. I knew the pieces, but never had to make all of them hold together. Keeping hover, selected and focus states consistent without losing contrast, and ordering information through shape and color alone, was harder than any single screen.

The second lesson: good UX is rarely about adding more. In the redesign, I broke each feature down to its core and asked where it's actually needed. The rating page became a panel right on the title, the statistics moved to a page of their own. Nothing got lost, everything got easier to reach. Less, but closer.

Using the app every day is the real test: most of these decisions came from my own use. The next test is other people: friends get it first, before any public launch.

Roadmap & Next Steps

Cinemate is a work in progress. Next up:

Light mode. The token architecture is ready; the light palette is next.
Name & logo. "Cinemate" is a working title.
Insights redesign. The statistics page gets the new design treatment, UI and UX.
Mobile. Optimizing for phones before any launch; a native app is on the far horizon.
Launch. First friends as a test group, later public.

Film data and images from TMDB. Streaming data by JustWatch. This project is not endorsed by either.