DEV Community: Chen Tao

I built a lightweight Football Manager alternative because I don't have time for heavy games

Chen Tao — Tue, 07 Jul 2026 03:35:36 +0000

Hi guys, I am a web developer from China.

Today I want to show you my side project: 38-0 League. It is a football (soccer) simulation game on web.

I used to play a lot of Football Manager. But now I have a full-time job, I don't have time to play 5 hours just for half season. Sometimes I just have a stupid idea in my head: "What if Arsenal play in La Liga?" or "What if Haaland play in League 2?".

So I write this game. You can custom teams, players, and just click one button. It will simulate 38 matches very fast.

Here is some technical problems I met and how I fix them. Maybe it can help you if you build similar things.

1. Heavy Calculation in Browser

Because I have no money to buy strong backend server, all match simulation runs in user's browser.
Simulating 380 matches (20 teams play each other 2 times) is actually very fast in JS. The slow part is React rendering. At first, when I click "Simulate Season", the page freeze for 2 seconds. This is because I try to put all match logs and events into DOM state at same time.
Solution: I separate the logic and UI. The simulation function just return a big JSON object in memory. React only render the final League Table. The match details are lazy loaded. If you don't click the specific match, it never renders.

2. Cheap Leaderboard using Cloudflare D1

I want a leaderboard so players can compete. But Redis or AWS RDS is too expensive for a free game.
I try Cloudflare D1. It is serverless SQLite on edge. It is amazing!
I write a Cloudflare Worker to receive high score from client, check a simple secret token, and save to D1 database. The latency is very low because the worker runs near the user. And the free tier gives me 100,000 writes per day. Very enough for me.

3. SEO for SPA (Multi-language)

This is my biggest headache. I use Vite + React. Google crawler don't like it.
I want people from Spain or Brazil to find my game, so I need /es and /pt routes. I didn't use Next.js because I don't want to rewrite all my code. So I write a post-build Node script.
After npm run build, the script copy index.html into many folders, and replace the <title> and <meta> tags with correct language text statically. It's a bit dirty hack, but Google Search Console finally start to index my pages!

4. Ads vs PageSpeed

To pay the domain name, I put some Adsterra banners. But these ad scripts destroy my Core Web Vitals. My LCP and TBT become red in Lighthouse.

How I fix: I delay the ad script. I use a simple event listener. Only when user scroll or move mouse, I append the ad `<script>` to document body. So Lighthouse sees a clean page, and real users still see the ads. Win-win.

If you like football, please try it here: 38-0.one
You can try the Sandbox mode to make your own crazy league. Let me know if you find bugs or have ideas! Thanks!

Evolving my React Football Simulator: From getting crushed in 7-0 to the ultimate 8-0 World Cup challenge

Chen Tao — Thu, 25 Jun 2026 08:55:46 +0000

A few days ago, I wrote about building a hardcore football draft simulator in React where the RNG was so punishing that I couldn't even beat my own game using underdog teams.

The feedback was awesome, but I quickly realized the game had limitations. The UI was a bit basic, the performance on mobile had quirks due to third-party scripts, and honestly, the concept needed to be bigger. With the 2026 World Cup on the horizon, I decided to tear down the codebase and rebuild it into something much more ambitious.

Today, I’m launching the evolved version: 8-0.online. Here is exactly what changed under the hood and how I scaled the architecture from a simple draft tool to a multi-mode simulator with a 100/100 Lighthouse score.

1. The Core Shift: From a Single Draft to 4 Game Modes
The original "7-0" version was a simple randomized draft. It was fun, but it got repetitive. For the new 8-0 version, I restructured the state management to support multiple isolated game flows. I introduced 4 entirely new modes, including:

2026 Random XI: Pure chaos. You get what you get.
The Redemption Tournament: A mode with slightly different risk/reward mechanics.
Tech difference: Instead of a monolithic match simulation hook, I had to decouple the simulation logic from the drafting phase, allowing different rulesets to be injected dynamically depending on the selected mode.

2. UI/UX Overhaul: Cinematic Dark Mode & Mobile App Shell
The old version had a standard, functional UI. For 8-0, I wanted a premium, cinematic feel. I completely ripped out the old CSS and implemented a comprehensive Dark Mode across the entire app.

Tech difference: I built a mobile-first App Shell with a cinematic fade-out splash screen. I also had to hunt down and refactor dozens of hardcoded inline styles that were causing contrast issues. The result is a much denser, more immersive UI that actually feels like a high-end gaming dashboard rather than a simple web utility.

3. Hitting 100/100 Lighthouse (Taming Render-Blocking Ads)
One of the biggest headaches in the previous build was mobile web performance, specifically how third-party ad networks (like Adsterra) were destroying my Core Web Vitals.

Tech difference: I implemented a strict lazy-loading strategy for the ad containers. By properly handling the visual whitespace (padding/margin) before the ads load, I eliminated layout shifts (CLS). Combined with ARIA accessibility patches and eliminating render-blocking dependencies, the React SPA now hits a perfect 100/100 on mobile PageSpeed.

4. Taking Multi-lingual SEO to the Next Level (IndexNow)
In my last post, I mentioned using a Node.js post-build script to generate 13 different language static index.html files with hreflang tags. That worked great for structure, but waiting for search engines to crawl all those new 8-0 routes was taking too long.

Tech difference: I didn't want to wait. Instead of manually submitting sitemaps via Bing/Yandex Webmaster UI, I wrote a custom Python automation script to integrate directly with the open IndexNow protocol. Now, whenever I push a new language update or a new game mode, the script pings the API with a custom verification key, forcing instant indexing across major search engines.

Try to beat the RNG (Again)
The game is now fully migrated to its new home at 👉 8-0.online

I still haven't managed to go undefeated in the 2026 Random XI mode with a tier-3 nation. If anyone manages to pull it off, please let me know what tactical setup you used!

Also, I'd love to hear from fellow React devs: how do you typically handle state persistence for multi-step progressive web games without overcomplicating things with Redux?

Building a hardcore football simulator in React (and failing to win my own game)

Chen Tao — Fri, 19 Jun 2026 16:05:51 +0000

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!