0Viewers
Découverte des streamers Twitch à 0 viewers.
À PROPOS DU PROJET
Projet école MDS B3 en binôme : donner de la visibilité aux streamers francophones qui n'ont pas encore d'audience. Une app Next.js interroge l'API Twitch Helix côté serveur et ne garde que les lives français à 5 spectateurs ou moins : pile de lives au hasard, liste filtrable, catégories, mode cinéma. Connexion Twitch facultative pour soutenir ou signaler un streamer, votes stockés sur Neon.
Le principe
0Viewers cherche les streamers Twitch français en direct devant très peu de monde : cinq viewers ou moins, en live depuis plus de dix minutes. L'accueil tire cinq lives au hasard sous forme de pile de cartes et propose un carrousel des lives du moment.
Pages et navigation
Une page streamers liste les 150 premiers, dix au départ puis par paquets de 25, avec recherche et filtres dont le public tout public ou adulte. Une page catégories montre les catégories Twitch en direct avec leur jaquette. Un clic ouvre le live en mode cinéma, grand lecteur et chat.
Structure et qualité
Le code sépare les pages et le SEO, le contexte serveur qui parle à Twitch avec la règle de sélection, et les composants client. Les décisions sont consignées en ADR. Un jeu de données figé permet de développer sans clés Twitch, et la CI locale ajoute un smoke test et Lighthouse avec des budgets. Le sitemap, le robots.txt et un llms.txt sont générés pour les moteurs et les IA.
L'équipe
- Camille (LinkedIn) (nouvel onglet)Développeuse full-stack
Problématique
Un streamer à 0 viewers reste invisible : sans audience, pas de découverte, et sans découverte, pas d'audience.
Solution
Filtrage Twitch Helix côté serveur (lives FR, 5 spectateurs ou moins, en direct depuis plus de 10 minutes), pages statiques, votes de la communauté via connexion Twitch.
Résultat
En ligne sur Vercel. Lighthouse en CI avec accessibilité et SEO à 1, CodeQL et ZAP pour la sécurité.
Ce que j'ai appris
Interroger l'API Twitch Helix côté serveur avec Next.js, sans exposer les clés au client.
Mesurer la performance en continu avec Lighthouse CI.
Isoler la règle de sélection des streamers dans un contexte serveur distinct des composants d'affichage.
Travailler sans clés d'API grâce à un jeu de données figé, pour tester et mesurer en CI.
Galerie
Description
Vidéo de présentation de 10 secondes, sans son. Textes successifs : « Ils streament. Personne ne regarde. », « 0Viewers : les streamers Twitch français à 5 spectateurs ou moins. », « 5 lives au hasard. Recherche et filtres. Mode cinéma, le live et son chat en grand. », puis « Deviens leur premier spectateur. Gratuit, sans compte. »