Vibecoding MVP: tinder para películas en Node.js y AI

Vibecoding en acción: un MVP de Tinder de películas creado por un ingeniero QA con Node.js y TMDB

Un ingeniero QA especializado en pruebas manuales desarrolló KiSwipe — una aplicación web para parejas que descubren películas juntas, inspirada en el sistema de deslizamiento de Tinder y una fila vertical de tráilers — en apenas un fin de semana. Sin presupuesto, con una pila mínima: Node.js, Express, JavaScript puro y Swiper.js. La inteligencia artificial (Gemini 3.1 Pro) generó código a partir de instrucciones detalladas, mientras el desarrollador mantuvo el control total sobre la arquitectura y la descomposición de tareas.

La app resuelve el problema de descripciones aburridas de películas con una alimentación automática de tráilers en alta definición, deslizar hacia arriba o abajo, guardar gustos en favoritos y sincronización de sesiones para ver juntos. El servidor detecta coincidencias en los gustos y activa una animación de '¡Es una coincidencia!' con la portada de la película.

Cómo funciona KiSwipe: desde la lista hasta la coincidencia

Los usuarios acceden a una fila completa de tráilers extraídos de la API de TMDB. Funcionalidades clave:

• Reproducción automática de videos en una lista vertical impulsada por Swiper.js.
• Al dar me gusta a un tráiler, se guarda en favoritos (usando localStorage + memoria RAM del servidor).
• Crear una 'Conexión' genera una sala única (/room=ID).
• Un compañero se une mediante un enlace y introduce un nombre.
• Los gustos se sincronizan cada 2 segundos usando un mecanismo de sondeo similar a WebSocket.
• Cuando ambos usuarios les gusta la misma película, la lista se bloquea y aparece '¡ES UNA COINCIDENCIA!' con la portada de la película.

Los filtros por género aparecen en la barra lateral izquierda, y el desplazamiento infinito está habilitado mediante paginación. La interfaz es completamente responsiva — funciona sin problemas en móviles y escritorios.

Pila tecnológica y decisiones arquitectónicas

La IA recomendó una pila óptima para despliegue rápido en un VPS:

• Backend: Node.js + Express para endpoints de API y servir archivos estáticos.
• Datos: API de TMDB para metadatos de películas (sin base de datos local), salas y gustos almacenados en memorias RAM del servidor + localStorage del cliente.
• Frontend: HTML/CSS/JS puros, Swiper.js para la lista, YouTube Iframe API para la reproducción de videos.

La versión inicial era un archivo monolítico index.js (~1000 líneas). La experiencia en QA aconsejó dividirlo en módulos para aislar errores.

// _ui.js — manipulación del DOM solo
class UIManager {
  showModal(type, data) { /* modales, notificaciones */ }
  updateLikeButton(filmId, liked) { /* botones */ }
}

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

// _swiper.js — paginación y deslizamientos
class SwiperManager {
  fetchNextPage(page) { /* llamada a la API de TMDB */ }
  handleSwipe(direction) { /* temporización, pre-carga */ }
}

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

La modularidad permitió actualizaciones independientes: cambiar el comportamiento de deslizamiento no rompía el reproductor. La IA generó código por módulo bajo estricto control de prompts.

Desafíos del vibecoding y sus soluciones

El vibecoding implica generar código mediante IA a partir de descripciones de alto nivel sin profundidad técnica. Ventajas: entrega rápida del MVP. Desventajas: arquitectura débil sin supervisión.

Conclusiones clave:

• Monolito → Módulos: Aislar lógica (UI, reproductor, swiper, almacenamiento) simplificó la depuración.
• Almacenamiento de datos: RAM + localStorage en lugar de base de datos — ideal para MVPs no persistentes.
• Estrategia de sincronización: Sondeo cada 2 segundos en lugar de WebSockets — bajo costo computacional.

Pruebas: QA manual cubrió escenarios principales (deslizamientos, coincidencias, creación de sala). Abierto a pruebas de colapso comunitarias.

Adaptación al mercado global

La API de YouTube Iframe estaba bloqueada en Rusia — lo que provocaba retrasos en la carga. Solución: cambiar la interfaz a inglés y establecer la región de TMDB en EE.UU. (Netflix, Hulu, Amazon Prime). Ahora los tráilers cargan sin problemas, y la conversión no se ve afectada por restricciones de red.

Despliegue en VPS: funciona sin problemas en navegadores de escritorio y móvil. Próximos pasos: escalabilidad de tráfico mediante Shorts generados por IA usando FFmpeg + OpenAI.

Lo que más importa

• La arquitectura modular salvó el vibecoding del código espagueti: editar un archivo no rompe otros.
• La pila Node.js + JS puro + TMDB minimiza dependencias para desarrollo rápido del MVP.
• La sincronización de gustos mediante RAM/localStorage funciona perfectamente en prototipos de bajo tráfico.
• Cambiar a la región EE.UU. resolvió el bloqueo de YouTube sin necesidad de proxies.
• Prompts de IA guiados por QA: dividir tareas en partes más pequeñas acelera la iteración.

— Editorial Team