MrBbox

MrBbox est l'application officielle de « loot boxes » de la chaîne Twitch de MrBboy45. Les viewers transforment leurs Channel Points en crédits de boîtes, ouvrent une boîte sur le site avec une animation de roulette, et reçoivent chez eux les lots physiques qu'ils gagnent. L'équipe de la chaîne gère tout depuis un back-office.

Le parcours, de Twitch à la livraison

1. Le viewer échange ses Channel Points contre la récompense MrBbox sur Twitch.
2. Twitch prévient l'application, qui crédite automatiquement une boîte et valide la récompense côté Twitch.
3. Le viewer ouvre sa boîte sur le site : le serveur tire le lot, et la roue s'anime jusqu'au résultat.
4. Pour un lot physique, il renseigne ses coordonnées de livraison, puis l'équipe suit l'envoi.

Côté viewers

• Connexion avec Twitch, sans mot de passe à créer.
• Mes boîtes : le solde de boîtes se met à jour en direct, sans recharger la page (WebSocket).
• Ouverture : une roue animée, avec la rareté et la couleur de chaque lot.
• Historique des tirages, paginé, avec des statistiques par rareté.
• Livraison : un formulaire pour les coordonnées, avec un rappel quand un lot en attend.
• Catalogue public : les types de boîtes, leurs lots et les probabilités affichées.
• Les gagnants : un mur public de tous les lots gagnés, en temps réel. Chaque tirage est visible, par transparence.

Un tirage équitable et vérifiable

• Le tirage est fait côté serveur, avec un générateur aléatoire cryptographique. La roue n'est qu'une animation du résultat déjà tiré.
• Les probabilités sont converties en nombres entiers (échelle d'un million) pour éviter les biais des nombres à virgule.
• Une probabilité hors bornes est refusée : trop faible, le lot ne pourrait jamais sortir ; trop forte, elle dépasserait la plage du générateur.
• Les raretés sont personnalisables (nom, couleur, image), avec une rareté « perdant » pour les boîtes qui ne rapportent rien.

L'intégration Twitch

• Connexion OAuth pour les viewers, et connexion de la chaîne depuis l'admin avec les droits supplémentaires nécessaires.
• Webhook EventSub : chaque échange de Channel Points crée la boîte du bon viewer, puis la récompense est marquée comme validée ou annulée sur Twitch.
• Rattrapage : une réconciliation récupère les échanges manqués (au démarrage, ou depuis un bouton de l'admin).
• Le type de boîte est relié à sa récompense Twitch, et les abonnements EventSub se gèrent depuis l'admin.

Le back-office

• Trois rôles (viewer, admin, streamer) et des permissions fines par ressource, appliquées côté serveur et côté interface.
• Tableau de bord : indicateurs (boîtes, tirages, viewers), recherche de viewers, attribution de boîtes à la main avec son historique, et statistiques en temps réel.
• Utilisateurs : fiche, changement de rôle, bannissement et débannissement.
• Types de boîtes et lots : création, pondérations, ordre d'affichage, raretés, import et export CSV et sauvegarde du catalogue.
• Médiathèque : dossiers et envoi d'images.
• Gagnants : suivi d'envoi, filtres, mise à jour en masse et export CSV.
• Mode maintenance pour fermer le site proprement.

Un overlay pour le stream

Une page dédiée à intégrer dans OBS (source navigateur). Elle affiche en direct qui ouvre une boîte, avec la roulette, puis une notification avec le lot gagné. Les événements arrivent en continu par WebSocket, les réglages se font dans l'admin, et le lien est protégé par un jeton qu'on peut régénérer.

Les données

Une base MySQL gérée avec Drizzle ORM : utilisateurs, sessions et comptes (Better Auth), types de boîtes, lots, liens boîte-lot avec leurs poids, boîtes, tirages, livraisons, raretés, médias et dossiers, réglages de l'overlay et de la chaîne. L'évolution du schéma passe par 17 migrations versionnées.

Qualité et exploitation

• Tests : des tests unitaires (tirage, pourcentages de lots, dates) et des tests de l'application Nuxt (ouverture de boîte, attribution, statistiques, droits), avec Vitest.
• Fiabilité : validation de la configuration au démarrage, jeu de données de départ, TypeScript, contrôles de style automatiques.
• Observabilité : instrumentation OpenTelemetry (traces et journaux).
• Accessibilité et référencement : audit d'accessibilité en développement, images de partage et métadonnées générées.
• Déploiement : une image Docker sans droits administrateur, avec test de santé, et une pile Coolify complète (application, MariaDB, Redis).
• Maintenance : mises à jour de dépendances proposées automatiquement.

Cette fiche décrit le fonctionnement du projet. L'espace connecté et le back-office ne sont pas visibles publiquement.