Projet personnel · Web collaboratif · JavaScript

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.

JavaScriptGoogle OAuthYouTube APISynchronisation
MODE DE DÉMOORIGINALRendu original intégré

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 SUJETProjet personnel · produit web collaboratif

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é.

LE BESOINPourquoi je l’ai fait

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.

EN DÉMOCe que vous pouvez tester

Le parcours principal est jouable ici. Le dépôt GitHub garde la version complète du projet et ses fichiers.

LE FONCTIONNEMENTComment l’idée devient un programme

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.

LE POINT DÉLICATCe qui demande de la rigueur

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.

DANS LE CODEComment les responsabilités sont rangées

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.

LE CHEMIN DU PROJETDeux comptes Film à regarder
ENTRÉEDeux comptes
01ConnecterGoogle + YouTube
02Choisirswipe et préférences
03Synchroniserroom et lecteur
RÉSULTATFilm à regarder

Démonstration

Voir le projet
prendre vie.

Explorez les fonctionnalités, les interactions et le parcours principal du projet.

WatchParty / JavaScript · Google · YouTube

Trouver une vidéo à regarder à deux

PROJET EN LIGNE
Illustration de WatchParty, une séance vidéo partagée
ROOM ACTIVECOCO-42
MS Moncef connecté+1 Inviter un ami
MATCH TROUVÉVotre prochaine séance

Les deux participants ont aimé la même vidéo YouTube. Le lecteur peut maintenant suivre les mêmes commandes.

Ouvrir la version en ligne
01 Connecter02 Décider03 Regarder
Rendu original intégréVoir le dépôt GitHub
i
Pour aller plus loin

La démo montre le résultat. Le dépôt GitHub contient le code complet et les fichiers du projet.