Vibecoding MVP: movie-tinder on Node.js and AI

Vibecoding in Action: A Movie Tinder MVP Built by a QA Engineer with Node.js and TMDB

A manual QA engineer built KiSwipe — a web app for couples to discover movies together, inspired by Tinder’s swipe mechanics and vertical trailer feed — over a weekend. Zero budget, minimal stack: Node.js, Express, vanilla JS, and Swiper.js. AI (Gemini 3.1 Pro) generated code based on detailed prompts, while the developer maintained full control over architecture and task decomposition.

The app solves the problem of dull movie descriptions with an automated HD trailer feed, up/down swipes, likes saved to favorites, and session sync for shared viewing. The server detects matching likes and triggers a 'It’s a Match!' animation with the movie poster.

How KiSwipe Works: From Feed to Match

Users enter a full-screen trailer feed pulled from the TMDB API. Core functionality:

• Auto-play videos in a vertical feed powered by Swiper.js.
• Liking a trailer saves it to favorites (using localStorage + server-side RAM pool).
• Creating a 'Connection' generates a unique room (/room=ID).
• A partner joins via link and enters a name.
• Likes are synchronized every 2 seconds using a WebSocket-like polling mechanism.
• When both users like the same film, the feed locks and displays 'IT’S A MATCH!' with the movie poster.

Genre filters appear in the left sidebar, and infinite scroll is enabled via pagination. The interface is fully responsive — works seamlessly on mobile and desktop.

Tech Stack and Architectural Decisions

AI recommended an optimal stack for rapid deployment on a VPS:

• Backend: Node.js + Express for API endpoints and static file serving.
• Data: TMDB API for movie metadata (no local database), rooms and likes stored in server-side RAM pools + client-side localStorage.
• Frontend: Vanilla HTML/CSS/JS, Swiper.js for the feed, YouTube Iframe API for video playback.

Initial version was a monolithic index.js file (~1000 lines). QA experience advised splitting into modules to isolate bugs.

// _ui.js — DOM manipulation only
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 — pagination and swiping
class SwiperManager {
  fetchNextPage(page) { /* TMDB API call */ }
  handleSwipe(direction) { /* timing, preload */ }
}

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

Modularity allowed independent updates: changing swipe behavior didn’t break the player. AI generated code per module under strict prompt control.

Challenges of Vibecoding and Their Solutions

Vibecoding means generating code via AI from high-level descriptions without deep programming expertise. Pros: fast MVP delivery. Cons: weak architecture without oversight.

Key takeaways:

• Monolith → Modules: Isolating logic (UI, player, swiper, storage) simplified debugging.
• Data Storage: RAM + localStorage instead of a database — ideal for non-persistent MVPs.
• Sync Strategy: 2-second polling instead of WebSockets — minimal overhead.

Testing: Manual QA covered core scenarios (swipes, matches, room creation). Open to community crash testing.

Global Market Adaptation

YouTube Iframe API was blocked in Russia — leading to loader hangs. Solution: switched UI to English, set TMDB region to US (Netflix, Hulu, Amazon Prime). Trailers now load reliably, and conversion remains unaffected by network restrictions.

Deployment on VPS: runs smoothly across desktop and mobile browsers. Next steps: traffic scaling via AI-generated Shorts using FFmpeg + OpenAI.

What Matters Most

• Modular architecture saved vibecoding from spaghetti code: editing one file doesn’t break others.
• The Node.js + vanilla JS + TMDB stack minimizes dependencies for rapid MVP development.
• Like synchronization via RAM/localStorage works perfectly for low-load prototypes.
• Switching to the US region resolved YouTube blocking without needing proxies.
• QA-driven AI prompting: breaking tasks into smaller pieces accelerates iteration.

— Editorial Team