MathRace

Inspiration

I live in Tbilisi, and most of the ed-tech I see makes a massive assumption: that every kid in a classroom has their own phone, tablet, or laptop. But if you visit a village school here, that assumption completely falls apart, right where accessible education is needed most. The idea for this project clicked when I talked to a village school teacher. She confirmed that a "zero-device" model for students was exactly what she needed. So i got to work. That one conversation completely changed the project. It took me from guessing what a classroom needed to actually building a solution for a real problem.

What it does

Mate is a teacher-hosted math game built directly around Georgia’s national curriculum for 4th graders (covering numbers, comparison, rounding, regrouping, estimation, and multiplication). The setup is simple: the teacher connects a single laptop to a projector or TV and picks one of two modes: Buzzer Race: A question pops up, teams race to raise their hands, and the teacher inputs the first team's answer. First to the target score wins.

Board Race: Teams roll dice and move across a digital board packed with bonus, trap, and swap tiles that add a bit of strategy.

Table Conquest : Teams compete to conquer the multiplication table. Each round highlights once cell, and the first team to raise their hand and answer correctly, claims that tile. Whoever has the most amount of point at the end, wins.

How I built it

I built everything using vanilla HTML, CSS, and JavaScript with no frameworks and no build steps. I chose this setup deliberately: the target hardware is usually older, modest classroom laptops, and I didn't want any dependency or bundler bloat slowing things down. GSAP handles the complex animations (like the dice rolls and special tile effects), while the rest is pure CSS.

I spent a lot of time on the core question-generation and grading engine. Instead of just checking if an answer is right or wrong, it explicitly models common student errors (like forgetting to carry a number or borrowing from the wrong column). This means the analytics screen reflects actual, recognizable hurdles rather than random noise.

For the visuals, I used CC0 illustrations from Open Peeps, color-coding them for each team. The sound effects are synthesized directly in-browser via the Web Audio API to keep the file size at absolute zero. Throughout the process, I used Claude Code as my main implementation partner, feeding it detailed, staged specs that I wrote out piece by piece.

Challenges I ran into

The bug I’m proudest of fixing involved a glitchy dice animation. The dice would visually land on one number, but then silently flip to a completely different face a second later. I traced the root cause to a CSS keyframe that ended its final rotation at 900°, which isn't a multiple of 360°, meaning the "resting" face was never actually the one being displayed. Rearchitecting the code so a single system owned the final state was incredibly satisfying.

I also hit a major performance bottleneck where the game experienced multi-second frame freezes during testing. I ran CPU throttling in Chrome DevTools and found three issues stacked together: an SVG drop-shadow filter forcing heavy CPU rasterization during 3D camera tilts, a scale transform bypassing the GPU, and a full-DOM rebuild firing on every single token movement. Cleaning up those three bottlenecks brought the freezes down from over two seconds to a perfectly smooth 60fps. Learning how to properly profile performance instead of just guessing was a massive takeaway.

Accomplishments that I am proud of

Getting that performance bug fixed by actually profiling it instead of just guessing felt like the biggest win. Also proud that the mistake-tracking feature works for real, it's not just "correct or wrong," it tells the teacher what kind of mistake happened. But, the most important accomplishment will be when it finally gets put to use in classrooms, I would love to see it in action.

What I learned

Keeping things simple takes actual effort. Every new idea I had made the project more complicated, and I had to keep asking if a teacher who isn't great with tech could still run this without help. Also, one real conversation with an actual teacher gave me a better idea than anything I came up with sitting alone. Overall, I developed my skills, that will help me out in the future, in University and in life.

What's next for MathRace

Testing it on real old classroom hardware instead of just my own laptop, and adding more chapters as the school year goes on, since the game is already built to support that, but in truth, this website will help me when i apply to Universities as I will tell them that i helped out communities in need of such tools. This hackathon really was an important chapter in my life to be honest, as it was my first.

Built With

• claude