WatchParty part d’un moment très simple — choisir quoi regarder à deux — pour en faire un parcours complet : se connecter, rejoindre une room, décider ensemble puis regarder la vidéo dans un lecteur partagé.
Projet en action ✦
WatchParty
Un outil qui croise mes préférences YouTube avec celles d'un ami pour trouver une vidéo qui nous plaît à tous les deux. Dès qu'on matche, la vidéo se lance en simultané pour commencer la séance ensemble.
Le projet, derrière l’écran ✦
Le projet
sans détour.
Le sujet, le fonctionnement, le point difficile et les choix de code : tout ce qu’il faut pour comprendre le projet rapidement.
Le projet m’a permis de travailler une vraie expérience multi-utilisateur, où l’interface doit rester claire tout en orchestrant des comptes Google, des recommandations personnalisées, des décisions croisées et un état de lecture commun.
Le parcours principal est jouable ici. Le dépôt GitHub garde la version complète du projet et ses fichiers.
Le client utilise Google Identity Services avec un accès YouTube en lecture seule. Les abonnements et vidéos aimées alimentent les recommandations, les swipes sont envoyés dans la room, puis un match déclenche le lecteur YouTube. BroadcastChannel garde les onglets synchronisés localement et l’API de rooms relaie les événements entre appareils.
Faire circuler les décisions, les présences et l’état du lecteur entre deux utilisateurs, tout en restant honnête lorsque Google, YouTube ou le service de rooms n’est pas disponible.
Le front-end reste statique et lisible : index.html porte les écrans, styles.css la direction visuelle, app.js l’état de l’expérience, config.js la configuration publique et le worker Cloudflare les routes de rooms. D1/SQLite conserve les salons, présences, décisions et événements du lecteur.
Démonstration ✦
Voir le projet
prendre vie.
Explorez les fonctionnalités, les interactions et le parcours principal du projet.
Trouver une vidéo à regarder à deux

Les deux participants ont aimé la même vidéo YouTube. Le lecteur peut maintenant suivre les mêmes commandes.
Ouvrir la version en ligneLa démo montre le résultat. Le dépôt GitHub contient le code complet et les fichiers du projet.