À propos
PixelGuess est un jeu multijoueur inspiré des vidéos de Laink et Terracide. Le concept : deviner des images (films, séries, animes) qui se dépixelisent progressivement au fil du temps.
Comme il n'existait pas de version multijoueur, on l'a créée avec un pote (lui l'idée, moi le dev).
Lancé en 2021, il a été entièrement refait depuis sur une stack moderne (React 19, Vite).
Fonctionnalités
- Salons de jeu multijoueur en temps réel (rounds, scoring, chat)
- Visionneuse d'image qui se dépixelise progressivement
- Liste des salons et système de connexion
- Back-office admin pour gérer le catalogue (400+ images)
Stack technique
- Frontend : React 19 + Vite 6 + Tailwind v4, état global avec Redux Toolkit, routing React Router 7, auth via Better Auth
- Backend : Express.js en TypeScript, PostgreSQL (
pg) - Temps réel : SSE diffusé par Nchan (module nginx), le backend publie les événements via HTTP, Nchan les pousse aux clients abonnés par salon
- Infra : Docker, déploiement continu GHCR + Portainer
Architecture temps réel
Le frontend agit (REST) et écoute (SSE). Plutôt que de gérer les WebSockets côté Node, c'est Nchan qui orchestre le pub/sub : le backend reste stateless sur la diffusion et publie simplement sur /pub/:roomId. Des hooks subscribe/unsubscribe préviennent le backend des connexions/déconnexions.