← Build Log

$ cat watchup.md

WatchUp

A feature-rich movie & TV discovery web application featuring multi-criteria search, streaming provider availability, watchlists, and native TMDB user account synchronization.

Launch Live Demo↗Source Code↗

Spec sheet

type
web app
stack
React, Vite, Tailwind CSS, TMDB API, OMDB API, Single Page Application, Axios, Radix UI
status
● stable · since 2025
repo
https://github.com/Chrimo02/WatchUp
demo
https://watch-up-khaki.vercel.appLIVE
watchup — preview
demo ↗
WatchUp previewOpen Live Demo↗
fig. 01 · interface previewscale 1:1 · rev 2025

Overview

WatchUp is a responsive media discovery and tracking web application developed as a collaborative group project for the Frontend-Systems module in the Computer Science bachelor’s program at THWS (Technical University of Applied Sciences Würzburg-Schweinfurt) in the summer semester of 2025.

The mission was to build a clean, high-performance, and accessible Single Page Application (SPA) that aggregates entertainment data across thousands of movies, series, and actors, while empowering users to manage their personal watchlists and ratings seamlessly.

Key Features

  • Comprehensive Discovery & Filter Engine: Browse movies and TV series with real-time filters by genre, release dates, age certifications (US MPAA, German FSK), and ratings.
  • Deep Media Details: Explore synopsis, cast and crew credits, trailer previews (embedded YouTube modal), and streaming platform availability (Watch Providers).
  • Multi-Search & Dedicated Profiles: Instant multi-search across movies, series, and people, complete with dedicated artist pages and filmographies.
  • Full TMDB Account Integration: Implemented the official TMDB authentication flow (session-based OAuth), allowing authenticated users to directly manage their personal favorites, custom lists, watchlists, and star ratings on TMDB.
  • Internationalization (i18n): Real-time language switching (e.g., English / German) dynamically affecting titles, overviews, and localized age ratings.
  • Responsive Dark/Modern Interface: Crafted with Tailwind CSS and Radix UI primitives for an accessible, mobile-first streaming guide experience.

Architecture & Tech Stack

  • Architecture: Client-Side Single Page Application (SPA) with React Router 6.
  • Core Framework & Tooling: React 18, Vite (SWC), JavaScript (ES Modules).
  • Styling & UI Components: Tailwind CSS, Radix UI Primitives, Lucide Icons, Headless UI.
  • APIs & Data Fetching: Axios, The Movie Database (TMDB v3 API), OMDB API.
  • State Management: Modular React Context Architecture (AuthContext, MovieContext, PersonContext, LanguageContext, OmdbContext).
  • Containerization & Deployment: Docker multi-stage build & Nginx for static file serving with client-side route fallback.

Key Takeaways & Highlights

  • Serverless Session Flow: Integrated third-party user authentication and user-specific mutations (watchlist, favorites, list creation) purely client-side without needing a dedicated backend database.
  • Agile Team Collaboration: Practiced agile methodologies and Git branch workflows in a team of 5 developers, conducting regular code reviews and component refactoring.
  • API Orchestration & Resilience: Handled asynchronous multi-API requests, gracefully managing missing media assets, rate limits, and language fallbacks.