Over the last week I built something for the World Cup. I'm a big football fan & wanted more experience shipping things. I should say upfront that I leaned heavily on Cursor and Claude for the code. Also I'm not planning to run ads on it, this is a learning project.
The idea: every visitor picks one team to win the 2026 World Cup, as well as being able to make individual match predictions. Each country is coloured on the map by whatever that country's majority pick is. As the tournament plays out a leaderboard ranks nations by how accurately their fans predict the results.
The live dot overlay started out as Canvas 2D, but it choked on mobile once the draw count climbed, so I rewrote it in raw WebGL with additive blending. The UK was another headache for me, the map I used as a base model merged the UK together and made it look like the whole of the UK voted as one. As anyone in the UK knows, the football rivalries are strong between us & that would have been a major no-no. So I switched to ONS-derived boundaries and now they render separately. Each country also has its own dynamic OG card generated via Satori on Vercel Edge, which I spent way too long fiddling with. Stack is Supabase, Vercel and Cloudflare. No accounts. Spam protection is fingerprint hashing plus Turnstile, and I hash IPs for duplicate detection rather than storing them raw.
A huge inspiration for me doing this was the Halo live population map, that was something I always found really cool growing up. So when a pick is made it adds a dot to the map in the relevant country. As I don't want to be collecting precise user location data, the way it works is that each country has its own population density pre-mapped & a pick from that country will be more likely to build dots where most of the population is (i.e. in cities). So the dots on the map will more or less build up to reflect the reality anyway. I wanted to add a radar ping layer that would travel from left to right & make the dots dim/brighten as it passes over them. I couldn't quite fine-tune it in time but might ship it before the tournament's over.
Something I wanted to be honest about - I seeded around 4,200 predictions across 183 nations before launch, weighted by bookmaker odds with a home-country bias, so a cold visitor doesn't land on an empty map.
Repo is open: github.com/Sneakus/wcpredict
I'd appreciate any feedback you have to offer. Thanks.
Over the last week I built something for the World Cup. I'm a big football fan & wanted more experience shipping things. I should say upfront that I leaned heavily on Cursor and Claude for the code. Also I'm not planning to run ads on it, this is a learning project.
The idea: every visitor picks one team to win the 2026 World Cup, as well as being able to make individual match predictions. Each country is coloured on the map by whatever that country's majority pick is. As the tournament plays out a leaderboard ranks nations by how accurately their fans predict the results.
The live dot overlay started out as Canvas 2D, but it choked on mobile once the draw count climbed, so I rewrote it in raw WebGL with additive blending. The UK was another headache for me, the map I used as a base model merged the UK together and made it look like the whole of the UK voted as one. As anyone in the UK knows, the football rivalries are strong between us & that would have been a major no-no. So I switched to ONS-derived boundaries and now they render separately. Each country also has its own dynamic OG card generated via Satori on Vercel Edge, which I spent way too long fiddling with. Stack is Supabase, Vercel and Cloudflare. No accounts. Spam protection is fingerprint hashing plus Turnstile, and I hash IPs for duplicate detection rather than storing them raw.
A huge inspiration for me doing this was the Halo live population map, that was something I always found really cool growing up. So when a pick is made it adds a dot to the map in the relevant country. As I don't want to be collecting precise user location data, the way it works is that each country has its own population density pre-mapped & a pick from that country will be more likely to build dots where most of the population is (i.e. in cities). So the dots on the map will more or less build up to reflect the reality anyway. I wanted to add a radar ping layer that would travel from left to right & make the dots dim/brighten as it passes over them. I couldn't quite fine-tune it in time but might ship it before the tournament's over.
Something I wanted to be honest about - I seeded around 4,200 predictions across 183 nations before launch, weighted by bookmaker odds with a home-country bias, so a cold visitor doesn't land on an empty map.
Repo is open: github.com/Sneakus/wcpredict
I'd appreciate any feedback you have to offer. Thanks.
Nice! Australia is funny
we've all got to be a bit deluded before the tournament starts! although the home nation bias was maybe a bit too strong for the aussies haha