Vibecoding MVP: Film-Tinder auf Node.js und KI

Vibecoding in Aktion: Ein Movie-Tinder-MVP für Paare mit Node.js und TMDB

Ein manueller QA-Engineer hat KiSwipe – eine Webanwendung für Paare, um gemeinsam Filme zu entdecken – innerhalb eines Wochenendes entwickelt. Inspiriert von Tinder’s Swipe-Mechanik und einem vertikalen Trailer-Feed. Kein Budget, minimaler Stack: Node.js, Express, vanilla JS und Swiper.js. KI (Gemini 3.1 Pro) generierte Code basierend auf detaillierten Promptings, während der Entwickler die Architektur und Aufgabenzerlegung voll im Griff behielt.

Die App löst das Problem langweiliger Filmbeschreibungen durch einen automatisierten HD-Trailer-Feed, Up/Down-Swipes, Likes in Favoriten gespeichert und Sitzungs-Synchronisation für gemeinsames Schauen. Der Server erkennt übereinstimmende Likes und löst eine 'Es ist ein Treffer!'-Animation mit dem Filmplakat aus.

So funktioniert KiSwipe: Vom Feed zum Match

Benutzer starten einen Vollbild-Trailer-Feed, der über die TMDB-API geladen wird. Kernfunktionen:

• Automatisches Abspielen von Videos in einem vertikalen Feed mittels Swiper.js.
• Liken eines Trailers speichert ihn in den Favoriten (verwendet localStorage + RAM-Pool auf Serverseite).
• Erstellen einer 'Verbindung' generiert einen eindeutigen Raum (/room=ID).
• Ein Partner schließt sich per Link an und gibt einen Namen ein.
• Likes werden alle 2 Sekunden synchronisiert, mithilfe eines WebSocket-ähnlichen Polling-Mechanismus.
• Wenn beide Benutzer denselben Film mögen, sperrt sich der Feed und zeigt 'ES IST EIN TREFFER!' mit dem Filmplakat.

Genre-Filter erscheinen im linken Sidebar, unendliches Scrollen ist via Pagination aktiviert. Die Oberfläche ist vollständig responsiv – funktioniert nahtlos auf Mobilgeräten und Desktop.

Technologiestack und architektonische Entscheidungen

KI empfahl einen optimalen Stack für schnelle Bereitstellung auf einem VPS:

• Backend: Node.js + Express für API-Endpunkte und statische Dateien.
• Daten: TMDB-API für Filmdaten (keine lokale Datenbank), Räume und Likes werden in RAM-Pools auf Serverseite + clientseitigem localStorage gespeichert.
• Frontend: Vanilla HTML/CSS/JS, Swiper.js für den Feed, YouTube Iframe API für Video-Wiedergabe.

Erste Version war eine monolithische index.js-Datei (~1000 Zeilen). Die QA-Erfahrung riet zur Aufteilung in Module, um Fehler isolieren zu können.

// _ui.js — Nur DOM-Manipulation
class UIManager {
  showModal(type, data) { /* Modals, Toasts */ }
  updateLikeButton(filmId, liked) { /* Buttons */ }
}

// player.js — YouTube Iframe API
class VideoPlayer {
  init() { /* onYouTubeIframeAPIReady */ }
  loadTrailer(videoId) { /* cueVideoById */ }
}

// _swiper.js — Paginierung und Swiping
class SwiperManager {
  fetchNextPage(page) { /* TMDB-API-Aufruf */ }
  handleSwipe(direction) { /* Timing, Preload */ }
}

// storage.js — Wrapper für localStorage
class Storage {
  saveLikes(likes) { localStorage.setItem('likes', JSON.stringify(likes)); }
}

Modularität ermöglichte unabhängige Updates: Änderungen am Swipe-Verhalten brachen den Player nicht. KI generierte Code pro Modul unter strenger Prompt-Kontrolle.

Herausforderungen beim Vibecoding und deren Lösungen

Vibecoding bedeutet, Code über KI aus hochwertigen Beschreibungen zu generieren, ohne tiefgehende Programmierkenntnisse. Vor- und Nachteile: Schnelle MVP-Lieferung, aber schwache Architektur ohne Überwachung.

Wichtige Erkenntnisse:

• Monolith → Module: Logik isolieren (UI, Player, Swiper, Storage) vereinfachte das Debugging.
• Datenspeicherung: RAM + localStorage statt Datenbank – ideal für nicht-dauerhafte MVPs.
• Synchronisationsstrategie: 2-Sekunden-Polling statt WebSockets – minimale Overhead.

Testen: Manuelle QA abdeckte zentrale Szenarien (Swipes, Matches, Raum-Erstellung). Offen für Community-Crash-Tests.

Anpassung an globale Märkte

YouTube Iframe API war in Russland blockiert – führte zu Ladehängern. Lösung: UI auf Englisch umgestellt, TMDB-Region auf USA gesetzt (Netflix, Hulu, Amazon Prime). Trailer laden nun zuverlässig, Conversion bleibt von Netzwerkbeschränkungen unbeeinflusst.

Bereitstellung auf VPS: Läuft reibungslos in Desktop- und Mobilbrowsern. Nächste Schritte: Skalierung des Traffics mittels AI-generierter Shorts mit FFmpeg + OpenAI.

Was wirklich zählt

• Modularer Architektur rettete Vibecoding vor Spaghetti-Code: Eine Datei bearbeiten bricht keine anderen.
• Der Stack Node.js + vanilla JS + TMDB minimiert Abhängigkeiten für schnelle MVP-Entwicklung.
• Like-Synchronisation über RAM/localStorage funktioniert perfekt für Prototypen mit geringer Last.
• Wechsel auf Region USA löste YouTube-Blockierung ohne Proxy-Notwendigkeit.
• QA-getriebene KI-Prompts: Aufgaben in kleinere Teile zerlegen beschleunigt Iteration.

— Editorial Team