Vajbkodíng MVP: kino-tinder na Node.js a AI

Vibekódování v akci: MVP kino-Tinder od QA inženýra na Node.js a TMDB

QA inženýr za víkend vyrobil webové aplikace KiSwipe – službu pro společný výběr filmů podobně jako Tinder s vertikální páskou trailerů. Bez rozpočtu, minimální technologický stack: Node.js, Express, čistý JS a Swiper.js. Umělá inteligence (Gemini 3.1 Pro) generovala kód podle detailních promptů, autor zůstal hlavním řídícím při architektuře a rozdělení úkolů.

Produkt řeší problém nudných popisů filmů: automatická HD pása trailerů, swipování nahoru/dolů, lajkování do oblíbeného a synchronizace relací pro společné sledování. Server detekuje shody lajků a zobrazuje match s animací.

Mechanika KiSwipe: od pásky k matchi

Uživatel se připojí na plnoobrazovou pásku trailerů z API TMDB. Funkce:

• Automatické přehrávání videa ve vertikální pásce pomocí Swiper.js.
• Lajk traileru ho uloží do oblíbených (localStorage + serverový pool).
• Vytvoření 'Connection' generuje jedinečnou místnost (/room=ID).
• Partner se připojí podle odkazu a zadá jméno.
• Synchronizace lajků každých 2 sekundy prostřednictvím pollingu podobného WebSocketu.
• Při shodě ID filmů se pása zablokuje a objeví se upozornění 'IT'S A MATCH!' s plakátem.

Filtrování podle žánrů v levém panelu, stránkování trailerů pro nekonečné scrollování. Rozhraní je adaptivní: mobilní i desktop.

Technologický stack a architektonická řešení

AI navrhla optimální stack pro rychlý deploy na VPS:

• Backend: Node.js + Express pro API endpointy a statické soubory.
• Data: TMDB API pro metadata filmů (bez lokální DB), místnosti/lajky v RAM-poolu serveru + localStorage klienta.
• Frontend: Vanilla HTML/CSS/JS, Swiper.js pro pásku, YouTube Iframe API pro přehrávač.

První iterace – monolitický index.js o délce 1000 řádků. Zkušenosti QA ukázaly: rozdělit na moduly pro izolaci chyb.

// _ui.js – pouze manipulace s DOM
class UIManager {
  showModal(type, data) { /* modálky, toasty */ }
  updateLikeButton(filmId, liked) { /* tlačítka */ }
}

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

// _swiper.js – stránkování a swipování
class SwiperManager {
  fetchNextPage(page) { /* volání TMDB API */ }
  handleSwipe(direction) { /* časování, přednačítání */ }
}

// storage.js – obálka kolem localStorage
class Storage {
  saveLikes(likes) { localStorage.setItem('likes', JSON.stringify(likes)); }
}

Modulárnost umožnila upravovat jednotlivé soubory: změna swipování nepoškodila přehrávač. AI generoval kód podle modulů pod přísným kontrolním promptem.

Problémy vibekódování a jejich řešení

Vibekódování = generování kódu AI podle popisu bez hlubokého programování. Přínosy: rychlost MVP. Nevýhody: slabá architektura bez kontroly.

Klíčové lekce:

• Monolit → moduly: Izolace logiky (UI, přehrávač, swipery, úložiště) zjednodušila ladění.
• Ukládání dat: RAM + localStorage místo DB – vhodné pro MVP bez trvalosti.
• Synchronizace: Polling každých 2s místo WebSocketu – minimální overhead.

Testování: ruční QA pokryl základní scénáře (swipy, maty, místnosti). Otevřeno pro crash-testy komunity.

Adaptace pro globální trh

YouTube Iframe API bylo v RF blokováno – zavěšení v loadeři. Řešení: přepnutí UI na angličtinu, TMDB region US (Netflix, Hulu, Amazon Prime). Trailery se nahrávají stabilně, konverze netrpí kvůli síťovým omezením.

Deploy na VPS: funguje v prohlížečích desktop/mobile. Dále – provoz (AI generování Shorts pomocí FFmpeg + OpenAI).

Co je důležité

• Modulární architektura zachránila vibekódování před spaghetti-kódem: úprava jednoho souboru nezlomí ostatní.
• Stack Node.js + Vanilla JS + TMDB minimalizuje závislosti pro rychlé MVP.
• Synchronizace lajků přes RAM/localStorage je vhodná pro nízkozátěžný prototyp.
• Přechod na region US vyřešil blokaci YouTube bez proxy.
• QA přístup k promptům AI: dekompozice úkolů urychlila iterace.

— Editorial Team