Wajb kodowanie MVP: kinowy Tinder na Node.js i AI

Wajbkode w akcji: MVP kina-Tinder od QA-ingeniera w Node.js i TMDB

Inżynier testów ręcznych w weekendy stworzył aplikację webową KiSwipe — usługę do wspólnego wyboru filmów według zasady Tinder z pionową listą trilerów. Budżet zerowy, minimalny stos technologiczny: Node.js, Express, czysty JS oraz Swiper.js. Sztuczna inteligencja (Gemini 3.1 Pro) generowała kod na podstawie szczegółowych promptów, a autor kontrolował architekturę i rozkład zadań.

Produkt rozwiązuje problem nudnych opisów filmów: automatyczna lista HD-trailerów, swajpy w górę/dół, polubienie do ulubionych i synchronizacja sesji dla wspólnego oglądania. Serwer wykrywa trafienia polubień i pokazuje matcha z animacją.

Mechanika KiSwipe: od listy do matcha

Użytkownik wchodzi do pełnoekranowej listy trailerów z API TMDB. Logika działania:

• Automatyczne odtwarzanie wideo w pionowej liście opartej na Swiper.js.
• Polubienie trilera zapisuje je do ulubionych (localStorage + puli serwerowe).
• Tworzenie 'Connection' generuje unikalną salę (/room=ID).
• Partner dołącza poprzez link, wpisuje imię.
• Synchronizacja polubień co 2 sekundy przez metodę polling podobną do WebSocket.
• Przy trafieniu ID filmu — blokada listy i powiadomienie 'TO JEST MATCH!' z plakatem.

Filtrowanie po gatunkach w lewym pasku bocznym, paginacja trailerów do nieskończonego przewijania. Interfejs jest responsywny: działa zarówno na mobilnych, jak i desktopowych urządzeniach.

Stos technologiczny i rozwiązania architektoniczne

AI zaproponował optymalny stos do szybkiego wdrożenia na VPS:

• Backend: Node.js + Express do obsługi endpointów API i statycznych plików.
• Dane: API TMDB do metadanych filmów (bez lokalnej bazy danych), pokoje i polubienia w pulach RAM serwera oraz localStorage klienta.
• Frontend: Vanilla HTML/CSS/JS, Swiper.js do listy, YouTube Iframe API do odtwarzacza.

Pierwsza iteracja – monolityczny index.js o długości 1000 linii. Doświadczenie QA podpowiedziało: rozbić na moduły, aby izolować błędy.

// _ui.js — tylko manipulacje DOM
class UIManager {
  showModal(type, data) { /* modalne, toasty */ }
  updateLikeButton(filmId, liked) { /* przyciski */ }
}

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

// _swiper.js — paginacja i swajpy
class SwiperManager {
  fetchNextPage(page) { /* wywołanie API TMDB */ }
  handleSwipe(direction) { /* timing, preload */ }
}

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

Modułowość pozwoliła edytować pojedyncze pliki: zmiana mechaniki swajpów nie psuła odtwarzacza. AI generowało kod modułowo pod surowym kontrolą promptów.

Problemy wajbkodowania i ich rozwiązania

Wajbkodowanie to generowanie kodu przez AI na podstawie opisu bez głębokiego programowania. Zalety: szybkość MVP. Wady: słaba architektura bez kontroli.

Kluczowe lekcje:

• Monolit → moduły: Izolacja logiki (UI, player, swiper, storage) uprościła debugowanie.
• Przechowywanie danych: RAM + localStorage zamiast bazy danych — idealne dla MVP bez trwałej persistencji.
• Synchronizacja: Polling co 2 sekundy zamiast WebSocket — minimalny narzut.

Testowanie: ręczne QA objęło podstawowe scenariusze (swajpy, matchy, pokoje). Otwarte do testów crashowych społeczności.

Adaptacja do globalnego rynku

YouTube Iframe API w Rosji blokował ładowanie — zawieszenia w loaderze. Rozwiązanie: przejście interfejsu na angielski, region TMDB US (Netflix, Hulu, Amazon Prime). Trailery ładują się stabilnie, konwersja nie cierpi z powodu ograniczeń sieciowych.

Wdrożenie na VPS: działa w przeglądarkach desktopowych i mobilnych. Dalej — ruch (generacja Shorts przez AI przy użyciu FFmpeg + OpenAI).

Co najważniejsze

• Architektura modułowa uratowała wajbkodowanie przed spaghetti-kodem: modyfikacja jednego pliku nie psuje reszty.
• Stos Node.js + Vanilla JS + TMDB minimalizuje zależności dla szybkiego MVP.
• Synchronizacja polubień przez RAM/localStorage pasuje do prototypu o niskim obciążeniu.
• Przejście na region US rozwiązało blokadę YouTube bez proxy.
• Podejście QA do promptów AI: dekompozycja zadań przyspiesza iteracje.

— Editorial Team