StreamGrid

UX DesignUI DesignDéveloppementProjet personnel

Plusieurs streams Twitch, une seule fenêtre.

Lucas BIZE

Rôle

UX/UI Designer & Développeur

Durée

En cours

Année

2026

Tech stack

5 technologies

Le projet

Ce que ce projet raconte.

StreamGrid est une application web permettant de suivre plusieurs streams Twitch en même temps : un stream principal en grand, les autres réduits dans une bande de miniatures, et le chat Twitch intégré à côté. Les tuiles sont réordonnables par glisser-déposer et ne rechargent jamais leur lecteur, même en changeant de vue ou de position — idéal pour suivre des tournois ou événements multi-streamers sans jongler entre plusieurs onglets.

modes d'affichage (simple, duo, bento)3

streams suivis simultanément9

rechargement de lecteur au changement de vue0

Accès au projet

Voir le site

Technologies

Next.jsReactTypeScriptZustandTailwind CSS

La démarche

Comment le projet a pris forme.

Lecteurs persistants

Chaque stream garde un seul et même lecteur Twitch, sans rechargement, quel que soit son déplacement : position dans la grille, principal ↔ bande ↔ duo, ou changement de vue. Le glisser-déposer repose sur une détection par géométrie (pointer capture) plutôt que sur les événements natifs de drag HTML, peu fiables au-dessus d'une iframe Twitch.

Chat et compte Twitch intégrés

Le chat est le véritable embed officiel Twitch, avec toutes ses fonctionnalités natives et la session du navigateur. Une fois connecté via OAuth, l'utilisateur retrouve ses chaînes suivies (en direct en premier) pour les ajouter en un clic, sans jamais retaper un pseudo.

Presets, permaliens et historique

Une combinaison de chaînes et de disposition peut être sauvegardée en preset, partagée via un permalien sans passer par le stockage local du visiteur, ou retrouvée dans l'historique des chaînes déjà ajoutées — le tout persistant en local et restauré à la prochaine visite.

Aperçu