Cinemate | Jan Lauer

Cinemate auf einem Desktop, einem Tablet und einem Smartphone.

Alle Filme und Serien, die du gesehen hast oder sehen willst, Seite an Seite in einer Sammlung, die jedes Detail kennt, dich auf dem Laufenden hält und bei der Wahl des nächsten Titels hilft.

Seit 2014 bekam jeder Film und jede Serie, die ich gesehen habe, eine Zeile in einer Excel-Tabelle: über 760 gesehene Filme und Serien, über 300 auf der Watchlist, Details wie Besetzung, Regie, Jahr und Genre von Hand eingetragen. Cinemate ist das, was ich mir anstatt dieser Tabelle immer gewünscht hatte – gebaut für alle, die sich merken wollen, was sie gesehen haben.

Die Herausforderung

2025 war mein Archiv mit über 1.000 Titeln zu echter Arbeit geworden. Eine Lösung musste her.

Ich habe mir die etablierten Plattformen angesehen und schnell gemerkt, dass jede nur einen Teil abdeckt. Letterboxd ist ein Filmtagebuch mit Reviews und Community, kennt aber keine Serien. Trakt erfasst Filme und Serien, aber nicht als Sammlung, die sich sortieren und vergleichen lässt. IMDb ist die Referenz für Fakten und das bekannte Rating. JustWatch weiß, wo etwas streamt. Keine davon behandelt die eigene Historie so wie die Tabelle: als eine sortierbare Übersicht über alles, die die Fragen beantwortet, die jeden Tag aufkommen:

Was habe ich gesehen, und wie hat es mir gefallen?
Was schaue ich heute Abend? Was aus meiner Sammlung bietet mein Streamingdienst an?
Was hat sich seit meinem letzten Blick verändert?
Was gibt es noch mit diesem Schauspieler oder von dieser Regisseurin?
Was sagt meine Historie über mich und meinen Geschmack?

Das Ziel: eine App, die vereint, was diese Plattformen einzeln leisten. Film- und Serienreviews wie in Letterboxd und Trakt, Fakten und Bewertungen wie in IMDb und die Streaming-Verfügbarkeit wie JustWatch – in einer sortier- und filterbaren Sammlung, die jedes Detail selbst ergänzt. Daraus wurde Cinemate.

iPad-Mockup der Bibliothekstabelle von Cinemate mit der Überschrift „Your whole collection at a glance“

iPad-Mockup der Cinemate-Bibliothek mit geöffnetem Such- und Bewertungspanel

iPad-Mockup der Cinemate-Bibliothek mit dem Detailpanel eines Films und geöffneten Benachrichtigungen

Entwicklung & Geschichte

Die App ist seit Ende 2025 in Arbeit und ist schrittweise mit meinen Fähigkeiten und meinen Wünschen nach neuen Features gewachsen.

v0: Die ursprüngliche Excel-Filmliste: nummerierte Zeilen mit Jahr, Titel, Regie, Genre und einer Spalte „gesehen in“, alles von Hand eingetragen — 2014, v0: Alles begann mit einer händisch gepflegten Excel-Liste.

v1: eine dunkle Single-Page-Liste mit einem Formular oben und schlichten Tabellenzeilen — Nov. 2025, v1: Eine einzige HTML-Datei, die OMDb-API füllt die Zeilen; aus der Tabelle wird eine sortier- und filterbare Liste.

v2: eine Tabelle mit Postern, Bewertungsspalten und einer Statistik-Sidebar — Jan. 2026, v2: Eigener Server, Datenbank, Statistiken. Die TMDB-API kommt als zweite Datenquelle hinzu – für Poster, Streaming-Infos und Personen.

v3 vor dem Redesign: funktionale Tabelle aus Standardkomponenten — Juni 2026, v3: Von Grund auf neu aufgebaut als moderner Komponenten-Stack mit großen neuen Features: Bewertungen, Empfehlungen, Insights, Import. Es funktionierte, war aber noch nicht gestaltet.

Die Lösung

Für v4 habe ich die App Mitte 2026 von Grund auf neu gestaltet, mit einem in Figma aufgebauten Designsystem und einer Regel: Jedes Feature rückt näher an den Ort, an dem es gebraucht wird.

Das Ergebnis bündelt die gesamte Film- und Serienhistorie in einer Bibliothek, mit einem eigenen Flow für jede alltägliche Frage:

Bibliothek: jeder Titel in einer Liste oder einem Raster, Details öffnen sich daneben.
Dokumentieren: in Sekunden suchen, hinzufügen und mit Sternen und Moods bewerten.
Entdecken: von einem Film zu seiner Besetzung und weiter zum nächsten Film.
Entscheiden: ein Vorschlag für heute Abend, samt Begründung.
Reflektieren: was deine Sehgewohnheiten über deinen Geschmack verraten.
Auf dem Laufenden bleiben: neue Staffeln, Kinotermine, Neuzugänge bei Streamingdiensten.
Importieren: deine Historie aus Letterboxd, IMDb oder einer Tabelle mitnehmen.

Bibliothek: Alles auf einen Blick, Details direkt daneben.

Eine Liste zeigt jeden Titel mit den Informationen, die zur Anzeige ausgewählt wurden. Filtern, sortieren und vergleichen nach belieben – von Besetzung und Regie bis zu Jahr, Mood oder Streamingdienst.

Ein Klick auf einen Titel öffnet seine Details direkt neben der Liste. Diese bleibt der Anker: Scrollen, Vergleichen und Filmwechseln gehen weiter. Ein Panel bündelt das Wesentliche: Poster, Bewertung und Moods, Streaming-Verfügbarkeit, Trailer, Besetzung, Filmreihe und ähnliche Titel.

Die Bibliothekstabelle mit dem geöffneten Detailpanel eines Films daneben: Poster, Streamingdienste, Trailer, Genres, Handlung und Besetzung — Details öffnen sich neben der Liste, so geht die eigene Position nie verloren. Neue Titel erscheinen unabhängig von der Sortierung ganz oben in der Liste.

Dokumentieren: Film gesehen? In Sekunden gefunden und bewertet.

Die Suchleiste bietet einen einfachen Weg, neue Titel zu finden.

Suchen, filtern, hinzufügen: einzeln oder mehrere auf einmal, ohne die Bibliothek zu verlassen.

Wird ein Film oder eine Serie als gesehen markiert oder hinzugefügt, öffnet sich das Bewertungspanel direkt an Ort und Stelle. Eine Bewertung besteht aus drei unabhängigen Teilen: Sternen, Moods und einer Textrezension.

23 Chips wie Mind-blown, Slow burn oder Great soundtrack, auswählbar mit einem Klick, machen das Bewerten schnell, persönlich und filterbar – und kosten deutlich weniger Zeit als eine geschriebene Rezension. Außerdem fließen sie in What to watch ein.

Einen oder mehrere Titel in Sekunden bewerten, ohne die Sammlung zu verlassen.

Entdecken: „Woher kenne ich dieses Gesicht? Welche meiner Titel kann ich gerade auf Netflix schauen?“

Der Name eines Schauspielers oder einer Regisseurin kommt bekannt vor? Ein Klick öffnet die Detailseite mit Filmografie und zeigt, was schon gesehen wurde und was noch fehlt. Der Streaming-Filter zeigt, was gerade verfügbar ist.

Von der Suche zum Film, vom Film zum Schauspieler und weiter zum nächsten Film auf der Watchlist.

Entscheiden: Was heute Abend schauen?

What to watch wählt einen Film oder eine Serie aus deiner Watchlist – oder einen Titel, der sich ein zweites Mal lohnt –, filterbar nach Mood, Jahrzehnt, Laufzeit und Streamingdiensten. Jeder Vorschlag erklärt, warum er passt. Jede neue Bewertung macht die Vorschläge treffsicherer.

Einen Mood oder einen anderen Filter wählen und Vorschläge erhalten, jeweils mit der Begründung, warum sie passen.

Reflektieren: Was deine Sehgewohnheiten über dich verraten.

Wer ist dein meistgesehener Schauspieler? Welches Genre und welches Jahrzehnt bewertest du am höchsten? Wann schaust du was? Jedes Diagramm funktioniert für jeden beliebigen Ausschnitt der Sammlung, bis hin zu Fragen wie: Wie bewertest du die Sci-Fi-Filme von Denis Villeneuve auf deiner Favoritenliste? Insights macht aus der Sammlung Antworten.

Insights: Geschmacks-Persona, filterbares Sehtagebuch und mehr.

Auf dem Laufenden bleiben: Was ist angesagt? Was ist neu? Du verpasst nichts.

Trending zeigt, was diese Woche beliebt ist: Noch vor dem Tippen listet das Suchpanel die Trend-Titel der Woche, und in der Bibliothek markiert eine Flamme, über welche Titel gerade alle reden.

Benachrichtigungen melden, was interessant für dich ist: eine neue Staffel einer Serie, die du gesehen hast, ein Kinotermin für einen Film auf deiner Watchlist, ein neues Projekt einer Person, der du folgst, oder ein Watchlist-Film, der bei deinem Streamingdienst neu verfügbar ist.

Die News-Spalte der Bibliothekstabelle mit den neuesten Updates jedes Titels direkt in seiner Zeile — Eine eigene Spalte hält dich auf dem Laufenden, ohne dass du die Sammlung verlassen musst.

Das Benachrichtigungspanel mit verschiedenen Arten von Updates zu den Titeln und Personen, denen du folgst — Anpassbare Benachrichtigungen: Du entscheidest, worüber du informiert wirst.

Importieren: Deine Historie kommt mit.

Ein Wechsel sollte keinen Neuanfang bedeuten. Einfach einen Letterboxd-Export, die eigenen IMDb-Bewertungen, Watchlist und Listen oder eine Tabelle (CSV oder Excel) hineinziehen – Cinemate ordnet jede Zeile ihrem Titel zu. Ein Import füllt nur Lücken: Nichts wird überschrieben, und der gesamte Import lässt sich rückgängig machen.

Wechseln ohne Neuanfang: Der Import füllt die Bibliothek Titel für Titel, und jeder Import lässt sich rückgängig machen.

Visuelles Design & System

Eine Filmbibliothek besteht vor allem aus Daten, deshalb ist das Design hier Informationsdesign: Jede Art von Daten hat ihr eigenes Erscheinungsbild, damit das Auge sortiert, bevor es liest.

Form, Farbe, Schrift, Icon: Jede Art von Daten bekommt ihr eigenes Erscheinungsbild.

Die Tabelle dient dem Vergleichen und Sortieren, das Raster dem Stöbern. Zoomstufen ermöglichen unterschiedliche Informationstiefen.

Die Status-Badges in ihrer vollen Variante und als reine Icons — Ein farbiges Status-Badge an jedem Eintrag und eingefärbte Poster zeigen den jeweiligen Status.

Das Erscheinungsbild anpassen und zwischen verschiedenen Farbtönungen in vier Intensitätsstufen wählen.

Darunter liegt ein von Grund auf entwickeltes System aus Tokens, Farbtönen, Typo-Rollen und Motion-Patterns, damit sich jedes Panel, jede Liste und jedes Overlay gleich anfühlt.

Token-Board: Farb- und Schrift-Tokens — Farbe: Sieben Farbtöne in bis zu fünf Abstufungen auf einer Graustufen-Basis. Zwei Schriftarten mit je 13 Textstilen.

Figma-Komponentenbögen: jede Komponente, jeder Zustand — Sammlung der Figma-Komponenten, die für das Design entstanden sind.

Vom Design zum Code

In v4 begann jeder Screen in Figma: rund 90 Komponenten, jeder mit allen Zuständen, aufgebaut auf 396 Variablen. Die Variablen wurden Wert für Wert als Tokens in den Code übernommen – eine Änderung an einem Token erreicht so alle Screens auf einmal.

Wie es entstanden ist. Design, UX, Spezifikationen und jede Produktentscheidung und Idee stammen von mir; der Code wird unter meiner Anleitung von KI-Coding-Agents geschrieben. v1 habe ich von Hand begonnen, bin dann zu Gemini und später, mit besser werdenden Tools, zu Claude gewechselt. Die App läuft auf Next.js, React und Tailwind CSS, mit shadcn/ui-Komponenten, die über die Figma-Tokens gestaltet sind.

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

Wirkung & Reflexion

Der größte gestalterische Schritt war, ganz allein ein Designsystem von Grund auf aufzubauen: Variablen, Komponenten und jeder Zustand, alles aufeinander abgestimmt. Die einzelnen Bausteine kannte ich, aber ich musste sie noch nie alle zusammenhalten. Hover-, Selected- und Fokus-Zustände konsistent zu halten, ohne an Kontrast zu verlieren, und Informationen allein über Form und Farbe zu ordnen, war schwieriger als jeder einzelne Screen.

Die zweite Erkenntnis: Gute UX bedeutet selten, mehr hinzuzufügen. Im Redesign habe ich jedes Feature auf seinen Kern reduziert und gefragt, wo es tatsächlich gebraucht wird. Aus der Bewertungsseite wurde ein Panel direkt am Titel, die Statistiken bekamen eine eigene Seite. Nichts ging verloren, alles wurde leichter erreichbar. Weniger, aber näher.

Die App jeden Tag zu nutzen, ist der eigentliche Test: Die meisten dieser Entscheidungen sind aus meiner eigenen Nutzung entstanden. Der nächste Test sind andere Menschen: Zuerst bekommen sie Freunde, noch vor einem öffentlichen Launch.

Roadmap & nächste Schritte

Cinemate ist ein laufendes Projekt. Next steps:

Light Mode. Die Token-Architektur steht, die helle Farbpalette folgt.
Name & Logo. „Cinemate“ ist ein Arbeitstitel.
Insights-Redesign. Die Statistikseite bekommt das neue Design, in UI und UX.
Mobile. Optimierung für Smartphones vor jedem Launch; eine native App ist ein Fernziel.
Launch. Zuerst Freunde als Testgruppe, später öffentlich.

Filmdaten und Bilder von TMDB. Streamingdaten von JustWatch. Dieses Projekt wird von keinem der beiden unterstützt oder empfohlen.