Retour aux projets

Projet personnel

EmeraldCast

Plusieurs streams Twitch sur un seul écran, avec un chat fusionné.

Rôle
Conception et développement
Année
2026

Aperçu

EmeraldCast permet de regarder autant de streams Twitch que l'on veut sur un seul écran. On passe d'une grille à un mode focus (un stream principal et une barre latérale redimensionnable), on réorganise les tuiles par glisser-déposer et on choisit quel stream garde le son pendant que les autres restent muets.

Tout se passe dans le navigateur, sans serveur. Les lecteurs utilisent les embeds officiels de Twitch, la recherche de chaînes, les catégories et le statut en direct (spectateurs, durée, fin de live) passent par l'API GraphQL publique de Twitch, et le chat unifié se connecte en lecture seule à la passerelle IRC de Twitch via WebSocket, avec les emotes et une couleur par chaîne.

Le projet a d'abord eu un serveur et des paquets partagés, que j'ai retirés une fois que tout pouvait être fait côté client : moins de pièces à héberger, et une application qui se déploie comme une simple page statique.

Côté usage, il y a une palette de commandes (⌘K), des raccourcis clavier, des murs de streams sauvegardés, des liens de partage qui encodent toute la configuration, et une synchronisation entre onglets. Tout ce qui est enregistré reste dans le localStorage.

Points clés

  • Grille ou mode focus, réorganisation par glisser-déposer (dnd-kit)
  • Chat unifié en direct via la passerelle IRC WebSocket de Twitch
  • Recherche, catégories et statut en direct via l'API GraphQL de Twitch
  • Palette de commandes ⌘K, raccourcis clavier, murs sauvegardés et liens de partage
  • Application 100 % statique : pas de compte, pas de backend

Stack

  • React
  • TypeScript
  • Vite
  • SCSS
  • dnd-kit
  • Vitest
  • Vercel