I've always found commercial soccer draft games to be a bit too easy and forgiving. You just click some shiny cards and eventually win. So for my recent side project, I decided to build something much more punishing.

The idea was simple: You must win 7 consecutive matches to lift the World Cup, using randomly drafted squads based on real FC 24 player stats.

The Tech Stack

I wanted to keep it lightweight, so I went with pure React + Vite. No heavy state management libraries, just good old React hooks to handle the match simulation logic and RNG purely on the client side.

One of the fun challenges was making it multi-lingual for global football fans. Instead of a backend, I wrote a Node.js post-build script that dynamically generates index.html files with proper hreflang tags for 13 different languages, ensuring it's SEO-friendly out of the box.

The Result

The match simulation turned out to be brutally realistic. I've been trying to win the tournament with the China PR squad, and I keep getting absolutely demolished by France or Brazil in the semi-finals. The RNG has no mercy. 😂

If you want to try the simulation logic (or see if you can break the curse with an underdog nation like China), the game is live here:
👉 7-0 World Cup Draft Simulator

Would love to hear any feedback from fellow React devs on how to better balance client-side RNG for games like this!