Box Box Box
For years, we used a spreadsheet and screenshots. Dave was fed up with running it. So I built a web app to manage it for us.
Some friends and I got into Formula 1 around 2021 after watching Drive to Survive. The official fantasy app was lame and overcomplicated, so we made our own league with our own rules and scoring (which turned out to also be complicated).
I built a static website to track it all visually. But managing the scoring and math by hand in HTML was worse than the spreadsheet. I didn’t even keep up with it through the full season. So we stuck with the spreadsheet.
Fast forward to 2026. I had been hearing all about Cursor and Codex (pre-Claude dominance), and was looking for a semi-real project to try them on. It was March 3rd – the season started March 7th. So I tried it out. And it was a lot of fun to build.
I made a video about the project after about a month of tinkering on the weekends.
I’d never used any of these tools before, so I started with Codex (but have switched mostly to Claude Code now). I wrote the first prompt by hand, describing the scoring, the kind of website it should be, and including links to the old static site and gave some loose design guidance. The first pass was surprisingly viable, but it took a lot of prompts to get to what I had in my head, learning a lot along the way.
The most fun part of this project was designing the 3D circuits (racetracks for the uninitiated). I’d only ever dabbled in 3D tools before, but this seemed like a perfect test for using AI to handle the three.js syntax.
I added a readout of the camera coordinates so I could paste them back into the prompt to adjust the angles visually. I had ideas for what it should look like, but I didn’t know what kind of textures three.js could create. So I had Codex provide a few variations and explain what tools and controls were possible, and built out a few fun visual variants (Mono, Chrome, Rainbow and Tron). The Tron one took the longest to work out, but it was so satisfying to describe the idea in my head and not get bogged down in syntax.
Team pages show the team principal and their drivers, points, position, wins, podiums, and DNFs. Also shows per-driver contribution to points totals. Toggle on Performance Scale to see the drivers shrink based on how they’re performing this season. I’m squinting at you, Ollie.
I had fun with the admin login page, styling it like a paddock VIP badge, complete with randomized holograms of F1 circuits on the badge background.
Try to log in with a non-VIP account for a surprise (headset on).
If there’s one key takeaway from this project, it’s that data is hard. I wired the app up to public APIs to get race data, times, results, and even circuit map SVGs. But mapping result statuses to our scoring system has been a challenge. Switching out drivers mid-season was also complicated to accommodate. One benefit of the spreadsheet is that it’s easy to make changes. But working on a custom tool with this level of data complexity means you really have to plan for (or adapt to) every scenario and systemize things to match the rules.
I used this project as an intentional learning experience to test out AI tools for development. I used Codex at the time, but have since switched most of my coding to Claude.
I’ve always wanted to design more complex animations, especially with 3D. But it was a heavy learning curve, new tools, and three.js documentation to sort through. I was able to quickly experiment with 3D in ways I never could before.
One of the biggest things I learned about experimentation with AI coding tools is to have the tool build me miniature, purpose-built design tools on the fly. This let me experiment live with variations, toggles, and controls. Instead of prompting tiny animation value tweaks until it looked right, I built controls right into the interface. I’ve always built little toggle tools in UI work, but this is so much faster and more powerful. I’ve used this approach to tweak details and explore variations in every AI build I’ve done since.
Another area I leaned on AI for was managing the database. I’ve worked a lot with WordPress in the past, but managing large amounts of data for an app like this was intimidating. But being able to have Codex walk me through the Firestore setup made it manageable.
This was the first of many AI assisted builds for me, and I’m hooked. It is such an empowering change to how I can create and explore interactions. The hard part now is knowing when to say no when Claude keeps saying yes. But I’ll gladly take on that new burden.
Check it out