MVP Vibecoding : Tinder pour films sur Node.js et IA

Vibecoding en action : un MVP de cinéma Tinder conçu par un ingénieur QA avec Node.js et TMDB

Un ingénieur QA manuel a créé KiSwipe — une application web pour les couples qui veulent découvrir des films ensemble, inspirée du mécanisme de glissement de Tinder et d’un flux vertical de bandes-annonces — en moins de deux jours. Budget zéro, stack minimal : Node.js, Express, JavaScript vanilla et Swiper.js. L'IA (Gemini 3.1 Pro) a généré du code à partir de prompts détaillés, tout en laissant le développeur garder le contrôle total sur l’architecture et la décomposition des tâches.

L’application résout le problème des descriptions de films ennuyeuses grâce à un flux automatique de bandes-annonces HD, des glissements vers le haut ou le bas, des likes sauvegardés dans les favoris, et une synchronisation de session pour une vision partagée. Le serveur détecte les likes mutuels et déclenche une animation « C’est un match ! » avec l'affiche du film.

Comment fonctionne KiSwipe : du flux au match

Les utilisateurs accèdent à un flux complet de bandes-annonces tiré de l’API TMDB. Fonctionnalités principales :

• Lecture automatique des vidéos dans un flux vertical alimenté par Swiper.js.
• Un like sauvegarde la bande-annonce dans les favoris (localStorage + pool de mémoire côté serveur).
• La création d’une « Connexion » génère une pièce unique (/room=ID).
• Un partenaire rejoint via lien et entre un nom.
• Les likes sont synchronisés toutes les 2 secondes grâce à un mécanisme de sondage similaire à WebSocket.
• Dès que les deux utilisateurs aiment le même film, le flux se fige et affiche « C’EST UN MATCH ! » avec l’affiche du film.

Les filtres par genre apparaissent dans la barre latérale gauche, et le défilement infini est activé via pagination. L’interface est entièrement réactive — elle fonctionne sans accroc sur mobile comme sur desktop.

Stack technique et choix architecturaux

L’IA a recommandé une pile optimale pour un déploiement rapide sur VPS :

• Backend : Node.js + Express pour les points d’API et le service de fichiers statiques.
• Données : API TMDB pour les métadonnées des films (pas de base de données locale), les pièces et les likes stockés dans des pools de mémoire côté serveur + localStorage côté client.
• Frontend : HTML/CSS/JS vanilla, Swiper.js pour le flux, API Iframe YouTube pour la lecture vidéo.

La version initiale était un fichier monolithique index.js (~1000 lignes). L’expérience en QA a conseillé de le découper en modules pour isoler les bugs.

// _ui.js — manipulation DOM uniquement
class UIManager {
  showModal(type, data) { /* modales, toasts */ }
  updateLikeButton(filmId, liked) { /* boutons */ }
}

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

// _swiper.js — pagination et glissements
class SwiperManager {
  fetchNextPage(page) { /* appel API TMDB */ }
  handleSwipe(direction) { /* timing, préchargement */ }
}

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

La modularité a permis des mises à jour indépendantes : changer le comportement de glissement n’a pas cassé le lecteur. L’IA a généré le code par module sous contrôle strict de prompt.

Défis du vibecoding et leurs solutions

Le vibecoding consiste à générer du code via IA à partir de descriptions haut niveau, sans expertise approfondie en programmation. Avantages : livraison rapide d’un MVP. Inconvénients : architecture faible sans supervision.

Principaux enseignements :

• Monolithe → Modules : Isoler la logique (UI, lecteur, swiper, stockage) a simplifié le débogage.
• Stockage des données : RAM + localStorage au lieu d’une base de données — idéal pour les MVP non persistants.
• Stratégie de synchronisation : sondage toutes les 2 secondes au lieu de WebSockets — charge minimale.

Tests : QA manuelle couvre les scénarios clés (glissements, matches, création de pièce). Ouvert à un test de crash communautaire.

Adaptation au marché mondial

L’API Iframe YouTube était bloquée en Russie — entraînant des chargements bloqués. Solution : changement de l’interface en anglais, région TMDB réglée sur États-Unis (Netflix, Hulu, Amazon Prime). Les bandes-annonces chargent désormais de façon fiable, et la conversion n’est pas affectée par les restrictions réseau.

Déploiement sur VPS : fonctionne sans souci sur navigateurs desktop et mobile. Étapes suivantes : mise à l’échelle du trafic via des Shorts générés par IA avec FFmpeg + OpenAI.

Ce qui compte vraiment

• Une architecture modulaire a sauvé le vibecoding de code spaghetti : modifier un fichier n’endommage pas les autres.
• La pile Node.js + JS vanilla + TMDB minimise les dépendances pour un développement rapide de MVP.
• La synchronisation des likes via RAM/localStorage fonctionne parfaitement pour les prototypes à faible charge.
• Changer de région vers les États-Unis a résolu le blocage YouTube sans passer par des proxies.
• Prompting IA piloté par QA : diviser les tâches en morceaux plus petits accélère l’itération.

— Editorial Team