PixelGuessr
Mini-jeu multijoueur de pop culture en temps réel : devinez des œuvres à partir d'images progressivement dépixélisées le plus rapidement, et gagnez un maximum de points pour être le gagnant !
Aperçu du projet
PixelGuessr est un mini-jeu de pop culture multijoueur en temps réel où les joueurs doivent identifier des œuvres (films, jeux vidéo, séries) à partir d'images progressivement dépixélisées.
L'architecture repose sur un serveur WebSocket Node.js orchestré via PartyKit, une librairie dédiée à la gestion de rooms et à la synchronisation d'état en temps réel. Le serveur gère le floutage/défloutage progressif des images et les diffuse à tous les clients connectés, image par image, à la manière d'un flux vidéo.
Le frontend est développé avec Next.js, TypeScript, Tailwind CSS et Framer Motion pour les animations. Une API Next.js fait le pont entre le client et le serveur PartyKit, gérant la création des rooms et la communication bidirectionnelle.
( /!\ toujours en développement)
Défis rencontrés
Streaming d'images progressif
Envoi en temps réel des images dépixélisées étape par étape à tous les clients via WebSocket, simulant un flux continu fluide.
Synchronisation des rooms multijoueurs
Gestion de l'état partagé (scores, réponses, progression) entre tous les participants avec PartyKit pour une expérience cohérente.
Architecture hybride Next.js + PartyKit
Pont entre les routes API Next.js et le serveur WebSocket PartyKit pour une communication en temps réel fiable et scalable.
Captures d'écran
