App · Breaking battle · Conception, design et développement
Groove Sessionl'app officielle
- Événement
- Groove Session, Breaking Battle, Neuchâtel
- Dates
- 12-13 septembre 2026
- Rôle
- Conception, design et développement de l'app, en solo, et toute la communication visuelle
- Durée
- ~7 semaines
Une web-app mobile pour que le public ne fasse pas que regarder la battle : il pronostique, joue, vote et suit tout en direct.
Derrière, une régie complète pilote les écrans, les overlays de live stream et les classements en temps réel. Le tout en français, allemand et anglais.
- commits
- 356
- lignes de TypeScript
- 17 700
- langues : FR, DE, EN
- 3
- spectateurs simulés en test de charge
- ~1000
Ne fais pas que regarder. Participe.
Côté public, sur mobile
Le public au centre
Programme avec horloge vivante, fiches de tous les danseurs, crews, juges, DJ et hosts, battle tree par round, quiz de culture breaking (85 questions, plus 36 pour le BRKN Quiz), vote MVP et photo wall modéré.
Le cœur de l'app
Pronostics
Le joueur entre un pseudo et choisit un vainqueur pour chaque battle, sur des cartes VS avec photos détourées et drapeaux. Son score et son rang restent épinglés dans une barre orange.
Un pari « champion » verrouillé en début de tournoi, un popup « Bien vu » à chaque pronostic gagné, une carte « My Picks » à partager et un formulaire de retrait des lots pour le Top 5.
Barème par phase
- +10 points au Top 16
- +12 points au Top 8
- +15 points en demi-finale
- +20 points en finale
Captures 2 et 3 rejouées après l'événement avec les vrais votes
Écrans & broadcast
Une donnée, tous les écrans
Le même visuel vit sur un mobile, un overlay vertical pour le live Instagram, un overlay 16:9 pour YouTube, les écrans de la scène et un poster à partager. Toutes les sorties peuvent être injectées dans le logiciel de régie vidéo, sur fond transparent.
- /live : overlay vertical 9:16 pour le live Instagram, avec VS, pronostics de la communauté et classement
- /liveyt : overlay YouTube 16:9 avec les pourcentages et le nombre de votants
- Compteurs gauche et droite pour les écrans de la scène, avec remplissage animé
- /livegrid : damier des 32 danseurs avant le tirage
- /wall : mur photo sur 3 écrans
Direction graphique · Réseaux · Ville
Toute l'identité visuelle
Au-delà de l'app, j'ai signé toute la communication visuelle de Groove Session 2026, en ligne comme dans la ville.
- Tous les posts des réseaux sociaux
- Les visuels des écrans de la salle et des lives
- Les visuels diffusés dans les ascenseurs du Beaulac, à Neuchâtel
- Le reel de l'événement, qui a dépassé le million de vues sur Instagram
Accès par rôles
La régie
Admin, battle tree, stage manager, qualifications et photographe : chaque rôle a son accès. Les pages de la régie étant protégées, elles ne sont pas montrées ici.
Pilotage du show
- Module actif et démarrage des battles
- Verrouillage des votes
- Révélation du tournoi
Qualifications
- Import des listes depuis les PDF d'inscription
- Moteur de temps et ordre de passage
- Délibération et publication
Exports & stats
- Battle tree en 16:9, 4:5 et 9:16
- Followers, quiz, votes, photos
- Export CSV avant remise à zéro
Outil photographe
- Slate plein écran avec QR code par danseur
- Utilisable hors ligne
- Export CSV pour trier les photos
Ce qui ne se voit pas
Les défis
Tenir la charge
Lectures mises en cache par le CDN pour les téléphones, Realtime réservé à la régie et aux écrans, votes regroupés toutes les 2 secondes, test de charge à ~1000 spectateurs, images allégées de 89 %.
Sécurité
Canal serveur sécurisé, verrouillage des tables, anti brute-force sur le login, mots de passe par rôle et modération photo avant affichage.
3 compétitions, 1 système
2vs2, Crew vs Crew et All Style dans les mêmes données. Une seule carte VS sert aux pronostics, au live, à YouTube et à l'arbre, avec une période de grâce de 120 s sur les votes.
Des données réelles
Roster alimenté par les formulaires des danseurs, posters officiels, portraits détourés et drapeaux. Plus de 100 commits de contenu, car un line-up change jusqu'à la dernière semaine.
Chronologie
- 31 juillet
Départ d'une base existante, dupliquée
- 1er août
Rebrand Groove Session : charte, roster, navigation
- 1-8 août
Quiz, programme, fiches danseurs avec posters Instagram
- 11 août
Module qualifications : import PDF, moteur de temps
- 18 août
End show, stats, battle tree multi-tailles, vote MVP, trilingue
- 22-28 août
Refonte des cartes de pronostic, exports visuels 16:9, 4:5 et 9:16
- 8-10 sept.
Sécurité, live Insta, refonte des pronostics, BRKN Quiz, compteurs
- 11-13 sept.
Outil photographe, optimisations, overlay YouTube, damier 32 danseurs
- 15-17 sept.
Analytics, régie live, nettoyage du code
Stack
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
- Supabase
- Vercel
- html2canvas
- pdfjs
- TensorFlow.js
- NSFWJS
Ce que j'en retire
Une appd'événementse juge en direct.
- Tout doit fonctionner quand 1000 téléphones tapent en même temps, avec une régie qui ne peut pas se permettre un bug.
- Penser « sorties » dès le départ : une même donnée alimente un mobile, deux streams, des écrans de scène et un poster.
- Le contenu fait partie du travail : le produit n'est crédible que si les noms, les photos et les drapeaux sont justes.
- Des commits petits et fréquents pour corriger en quelques heures ce qui remonte du terrain.
Projet suivant →
Keyro