fullstackchris.dev
Projets / FuchibolHub
ÉTUDE DE CAS · PLATEFORME SOCIALE

FuchibolHub

FuchibolHub est une plateforme centrée sur le football rassemblant plusieurs mini-jeux interactifs conçus pour l'engagement et la compétition des fans. Sa fonctionnalité phare est un système de pronostics à grande échelle construit autour de la Coupe du Monde FIFA 2026, permettant aux utilisateurs de prédire les résultats des matchs et la progression du tournoi. Le projet explore la gamification, l'interaction communautaire et une conception d'application pilotée par événements et scalable.

reactjsnodejssocket.io
Rôle
Solo · full-stack
Durée
2026 · 10 semaines
Plateforme
Web
Type
Plateforme sociale
fuchibol-hub.app
FuchibolHub screenshot
LE PROBLÈME

Les fans de football veulent s'affronter sur des pronostics de matchs, mais les plateformes existantes exigent soit des paris en argent réel, soit offrent un engagement si superficiel qu'il ne retient pas l'attention au-delà de la première semaine.

Construit en amont de la Coupe du Monde FIFA 2026 pour offrir une ligue de pronostics gratuite où des groupes d'amis et des communautés peuvent s'affronter selon la précision de leurs pronostics. La plateforme devait gérer la progression du tableau du tournoi, les mises à jour de classement en temps réel, et le pic de trafic pendant les matchs majeurs.

  • Les plateformes de paris excluent les fans occasionnels. La plupart des apps de pronostics exigent de l'argent réel, ce qui rebute la majorité des fans de football.
  • Les alternatives gratuites manquent de profondeur compétitive. Les outils gratuits existants n'ont pas de vrais classements, de jeu en groupe, ni de progression de tableau de tournoi.
  • Les mises à jour en temps réel sont difficiles à scaler. Socket.io sur plusieurs processus Node nécessite une architecture Redis soignée pour éviter le split-brain.

Fans de football & groupes d'amis

Groupes d'amis qui veulent s'affronter sur les pronostics de la Coupe du Monde 2026 sans parier

200+
utilisateurs avant lancement
<500ms
latence du classement
0
erreurs de pronostic
LA SOLUTION

construite pour les fans, pas les parieurs.

Frontend React, backend Node.js/Express, MongoDB. Socket.io gère les diffusions de classement en temps réel. Un processeur de résultats de match basé sur cron met à jour les scores et émet des événements de changement. Redis sert de couche pub/sub entre les instances worker Socket.io. Les soumissions de pronostics sont validées et verrouillées côté serveur contre un horodatage de coup d'envoi stocké dans le document du match.

01

Rejoindre un groupe

Créez ou rejoignez une ligue de pronostics entre amis.

02

Pronostiquer

Soumettez vos pronostics de match avant le verrouillage au coup d'envoi.

03

Suivre

Mises à jour de classement en temps réel pendant le match.

04

Classer

Classement de saison mis à jour au fil de la progression du tournoi.

Avant
workflow manuel
outils fragmentés · forte charge manuelle
Après
fuchibol-hub.app
produit unifié unique · rapide et automatisé
FONCTIONNALITÉS CLÉS

Conçu autour de la façon dont fans de football & groupes d'amis travaillent réellement.

FEATURE 01

Classement en temps réel

Socket.io diffuse les mises à jour de score à tous les clients connectés pendant les fenêtres de match, avec un pub/sub Redis pour la mise à l'échelle horizontale sur plusieurs processus Node.

  • Rafraîchissement du classement inférieur à 500 ms sous charge concurrente
  • Le pub/sub Redis découple la diffusion du calcul de score
classement-en
Classement en temps réel
FEATURE 02

Verrouillage de pronostic côté serveur

Les soumissions de pronostics sont validées et verrouillées côté serveur contre l'horodatage de coup d'envoi stocké — le compte à rebours de l'UI client est purement cosmétique.

  • Zéro pronostic après coup d'envoi en production
  • Le compte à rebours client est cosmétique ; le serveur fait toujours autorité
verrouillage-de
Verrouillage de pronostic côté serveur
FEATURE 03

Pipeline de score piloté par événements

Le traitement des résultats de match tourne comme une tâche en arrière-plan, émettant des événements consommés par les services de mise à jour de score, d'évaluation de badges et de recalcul de classement.

  • Le traitement idempotent gère les relances en toute sécurité
  • La progression du tableau est modélisée comme une machine à états
pipeline-de
capture · Pipeline de score piloté par événements
DÉFI TECHNIQUE

Problèmes difficiles résolus.

Le verrouillage des soumissions de pronostics se fait à l'heure de coup d'envoi validée côté serveur — le compte à rebours de l'UI client est purement cosmétique. Le traitement des résultats de match tourne comme une tâche en arrière-plan, déclenchée soit par un payload webhook soit par une action admin, utilisant une file d'attente pour éviter le double traitement. Le calcul du classement utilise des pipelines d'agrégation MongoDB avec un cache Redis TTL de 30 secondes pour éviter de recalculer à chaque requête pendant les pics de trafic.

Ce qui rendait la tâche difficile

  • Mises à jour de score et de classement en temps réel avec Socket.io à travers des utilisateurs concurrents pendant les fenêtres de trafic élevé des matchs.
  • Application des délais de pronostic — les soumissions doivent se verrouiller précisément au coup d'envoi de chaque match, côté serveur.
  • Architecture pilotée par événements scalable pour gérer la progression du tableau du tournoi (phase de groupes → phases finales → finale).
  • Scoring basé sur des groupes avec règles configurables — différentes ligues utilisent différents systèmes de points.
  • Gérer les soumissions de pronostics concurrentes sans conditions de concurrence dans les minutes précédant le coup d'envoi.
architecture.ts
1 const frontend = [ "React", "Tailwind CSS", "Client Socket.io" ];
2 const backend = [ "Node.js", "Express", "Socket.io", "MongoDB" ];
3 const temps_réel = [ "Pub/sub Redis", "Tâches cron", "WebSockets" ];
4 const devops = [ "Docker", "Workers en arrière-plan" ];
LA STACK

Technologies utilisées.

Frontend
ReactTailwind CSSClient Socket.io
Backend
Node.jsExpressSocket.ioMongoDB
Temps réel
Pub/sub RedisTâches cronWebSockets
DevOps
DockerWorkers en arrière-plan
CE QUE CELA PROUVE

Ce que FuchibolHub démontre.

Architecture temps réel

Conçu un système Socket.io avec pub/sub Redis qui scale sur plusieurs processus Node.

Délais autoritaires côté serveur

Construit une application du verrouillage de pronostic entièrement côté serveur, avec zéro incident de contournement client en production.

Pipeline piloté par événements

Conçu un pipeline de traitement de score idempotent qui gère proprement les résultats de match et la progression du tableau.

Mécaniques sociales de groupe

Livré des règles de ligue configurables, un scoring de groupe d'amis, et une progression de tableau pour les formats de tournoi.

TRAVAILLER ENSEMBLE

Envie de construire quelque chose comme ça ?

Apportez-moi votre idée ou projet à moitié construit. Je le cadre, le conçois et le livre — avec le même workflow que derrière FuchibolHub.

Étude de cas suivante Fresh.win