MathClash - Project Story

Inspiration

We wanted to make math practice actually fun. We took inspiration from Chess.com's ELO ranking system to create fair competitive matchmaking, borrowed Clash Royale's quick-match intensity for engagement, and applied it all to math education. The goal was simple: turn boring worksheets into exciting head-to-head battles where students actually want to practice more.

What it does

MathClash lets students compete in real-time 1v1 math battles. Players write answers by hand on their devices, and AI instantly grades their work. An ELO ranking system matches players of similar skill levels, creating fair and competitive matches. Students can challenge friends, climb leaderboards, and get AI-generated feedback after each match to improve their skills. The app supports both basic arithmetic and calculus problems, with proper LaTeX rendering for mathematical notation.

How we built it

We built MathClash on Firebase (Firestore, Realtime Database, Cloud Functions) with a Next.js and React frontend. For AI features, we integrated fal.ai's Claude Sonnet 4.5 Vision for reading handwritten answers and ChatGPT for generating feedback and problem sets. We used html2canvas to capture handwriting screenshots, KaTeX for LaTeX rendering, and TypeScript throughout for type safety.

Challenges we ran into

Computer Vision for Handwriting - Getting AI to accurately read messy handwritten math was tough. We switched to Claude Sonnet 4.5 Vision, which understands math contextually rather than just reading characters. Lots of prompt engineering got us to ~95% accuracy.

Recognizing Equivalent Answers - Math has infinite equivalent forms (x²/2 = ½x² = 0.5x²). We taught Claude to recognize mathematical equivalence through detailed prompts that explicitly list equivalence rules.

LaTeX in JSON - AI-generated LaTeX needs double-escaped backslashes in JSON, which LLMs kept messing up. We created strict prompt templates with examples and added error handling that logs failures instead of breaking existing data.

Real-time Matchmaking - Built a queue system where players join with their ELO, and a Cloud Function pairs them every 60 seconds within ±200 rating points. Another function force-locks stale rounds if players disconnect.

Progressive OCR Processing - We process handwriting screenshots immediately after each page capture rather than waiting until the end, preventing latency spikes. Each player's results are tracked separately in Firestore to avoid mixing up scores.

Accomplishments that we're proud of

We successfully integrated handwriting recognition into a competitive math game - something we weren't sure was even possible at the start. The ELO matchmaking system works smoothly, creating balanced matches that feel fair. Our prompt engineering achieved ~95% accuracy on handwritten math, and the real-time gameplay feels responsive despite complex Firebase coordination. We also built a complete social system with friends and leaderboards that makes the competitive experience engaging.

What we learned

AI is powerful but needs careful prompt engineering - we spent hours fine-tuning prompts to get reliable results. Real-time systems are harder than they look - coordinating Firestore, Realtime Database, and Cloud Functions required careful planning. Every millisecond of latency matters when you're building competitive gameplay. Most importantly, we learned that combining education with gaming mechanics actually works - students want to practice when it feels like a game.

What's next for MathClash

We want to expand the problem types beyond arithmetic and calculus - algebra, geometry, trigonometry, and more. We're planning to add ranked seasons with rewards, tournaments, and team battles. The handwriting recognition can be improved further with more training data. We also want to build a mobile app for better handwriting input on tablets, add voice explanations for AI feedback, and create a teacher dashboard for classrooms to use MathClash as a learning tool.