work

case study

watchlr

A movie and TV tracker with built-in streaming, AI summaries, a mood-based picker and taste stats

Solo — design & full-stack · June 2026 · personal

overview

Watchlr tracks what you watch, what you plan to watch and what you dropped, while also letting you watch movies and TV shows directly in the app. On top of that, it adds an AI layer: spoiler-free summaries, ending explanations, daily picks and a chat that suggests something for tonight. I built it in Next.js with MongoDB, TMDB for title data and Groq for the language model, and wrapped it as an Android app with Capacitor.

problem

Trackers are good at logging and bad at answering the question you actually have, which is usually "what should I watch tonight?" or "what happened at the end of that?". Streaming apps let you watch, but they don't know your personal watch history or give you useful context around what you're watching.

I wanted Watchlr to bring those pieces together: discover something, watch it, track it, understand it and get your next recommendation — all in one place. Recommendations and explanations come from your real watch history, and suggested titles are resolved against TMDB so the UI only shows real titles with real posters.

approach

  1. 01I modelled statuses (want to watch, watching, completed, favorite, dropped, hidden), one-click logging for movies and per-episode logging for shows, plus ratings out of 10, reviews and custom collections in MongoDB via Mongoose.
  2. 02Watchlr also includes built-in playback for movies and TV shows, so users can go from discovering a title to actually watching it without leaving the app.
  3. 03Every AI feature follows one pattern: ask the model for strict JSON, resolve each suggested title against TMDB search (matching media type, a poster, and release year within one year), and drop anything that doesn't resolve, so the UI only shows real titles.
  4. 04I cache AI output in MongoDB per title and summary type, and tag each cached row with the model name plus a prompt version, so changing a prompt invalidates old results. Daily picks are cached for 24 hours with a reshuffle button.
  5. 05The /tonight page is a conversation: you describe a mood, it checks your own want-to-watch list before the wider catalogue, shows what it inferred as removable chips, and treats "not this" as input for the next turn. The thread is saved per user.
  6. 06The dashboard aggregates watch history into hours watched, weekly rhythm, a genre breakdown and a GitHub-style heatmap, and a taste roast is generated from the same signals only once there are enough data points.

features

Watch & track

Watch movies and TV shows directly in Watchlr, while tracking six statuses, per-episode progress, ratings, reviews and collections.

AI summaries

Several summary types per title, including spoiler-free, ending explained and should-I-watch, cached per title.

Tonight picker

A mood-based chat that suggests titles from your own list first and narrows with each reply.

Daily AI picks

Personal picks with a one-line reason each, based on your history, with a reshuffle option.

Stats dashboard

Hours watched, weekly rhythm, genre breakdown and a consistency heatmap.

Public profiles & Android app

Shareable profile pages at /username, plus an Android build via Capacitor from the same codebase.

challenges

Stopping hallucinated titles

Language models suggest films that don't exist or get years wrong. I resolve every suggestion against TMDB by type, poster and a one-year window, and discard misses before anything reaches the UI.

Cache invalidation for prompts

Cached summaries went stale whenever I changed a prompt. I store a model-plus-prompt-version tag with each cached result and regenerate when it doesn't match.

Drag rails vs. clicks

The horizontal rails are grab-and-drag, which swallowed clicks on cards. I added a drag threshold so a short press still opens the title.

outcome

Watchlr is live at watchlr.justtayyabkhan.com with movie and TV playback, tracking, AI features, stats and public profiles, with an Android APK built from the same codebase.

stack

Next.js 15 (App Router)React 19TypeScriptMongoDBMongooseAuth.js (next-auth v5)TanStack QueryZustandTailwind CSS v4Framer MotionTMDB APIGroqCapacitor (Android)

contact

Have something worth building?

Open to freelance. Fastest response on WhatsApp ↗ — usually within the hour.

tayyabkhangk4734@gmail.com

next project

wePass