Movie Swipe – Vom Random Generator zur Tinder-Style Web-App

von und

Im vergangenen Modul «Interaktive Medien 2» entstand ursprünglich ein simpler Random Movie Generator mit einfachen Genre-Filtern. Nun haben wir das Projekt komplett neu gedacht, gecodet und als moderne Web-App mit intuitiver Swipe-Mechanik im Tinder-Stil zu neuem Leben erweckt.

Ausgangslage

Die ursprüngliche Idee aus dem Modul bestand darin, unentschlossenen Filmfans die Auswahl des abendlichen Programms abzunehmen. Die erste Version war eine funktionale, aber sehr statische Webseite mit Dropdown-Menüs für Genre-Filter. Wir sahen viel unausgeschöpftes Potenzial in der User Experience (UX) und beschlossen, das Konzept durch sogenanntes «Vibecoding» grundlegend zu modernisieren. Das Ziel: Die Filmauswahl sollte nicht mehr wie eine Suchanfrage wirken, sondern spielerisch und interaktiv sein.

Konzept & Funktionen 

Die neue Web-App teilt sich in drei klare Kernbereiche auf, die stark an moderne Dating-Apps angelehnt sind:

  • Profile & Preferences: Die User können ihre Filmauswahl präzise eingrenzen. Neben einem Slider für die Jahreszahlen (z.B. 2000–2026) lassen sich favorisierte Genres wie Action, Comedy oder Drama per Klick aktivieren. Zudem zeigt das Dashboard eine Statistik der bisherigen Interaktionen (Liked, Passed, Watched).
  • Discover (Swipe-Mechanik): Das Herzstück der App. Hier werden Filmposter samt Titel, Erscheinungsjahr, Genres und Bewertung als interaktive Karten präsentiert. Durch Swipen nach rechts («Like») oder links («Pass») – alternativ über die Buttons am unteren Bildschirmrand – wird schnell und intuitiv entschieden, was gefällt.
  • Watchlist: Alle gelikten oder abgelehnten Filme werden sauber in einer Grid-Ansicht gespeichert, aufgeteilt in die Tabs «Liked» und «Passed». So behält man stets den Überblick über die persönliche Filmauswahl.

Umsetzung 

Das Redesign erforderte ein komplettes Neuschreiben des Frontends, um die dynamischen Swipe-Karten flüssig darzustellen. Für das Beziehen der Filmdaten griffen wir auf die gleiche Schnittstelle zurück, die wir bereits im ursprünglichen Projekt in «Interaktive Medien 2» verwendet hatten: die OMDb API (https://www.omdbapi.com/). Die visuelle Sprache der App wurde bewusst dunkel und modern gehalten (Dark Mode), mit farblichen Akzenten (Rot für Like/Start, Blau/Violett für Pass/UI-Elemente), um den filmischen Charakter zu unterstreichen.

Webseite (Link)

https://nkstudios.ch/moodflix/

(mmi)

Der Schritt, ein bereits abgeschlossenes Projekt neu aufzurollen und UX-technisch komplett neu zu denken, war extrem wertvoll. Die grösste technische Herausforderung beim «Vibecoding» lag in der sauberen Implementierung der Swipe-Gesten für Desktop- und Mobile-Ansichten sowie im reibungslosen State-Management zwischen der Discover-Ansicht und der Watchlist. Während die reine Filterfunktion der alten Seite ihren Zweck erfüllte, sorgt die neue Mechanik für eine massiv höhere User-Retention und macht schlichtweg mehr Spass. Für die Zukunft wäre noch die Anbindung einer Empfehlungs-KI denkbar, die basierend auf den «Likes» selbstständig ähnliche Filme vorschlägt, anstatt nur nach fixen Genres zu filtern. Mit dem visuellen und technischen Sprung vom ersten Prototypen zu dieser fertigen Web-App sind wir sehr zufrieden.