GTA - Geometry Trig Algebra Archimedes

• GIF

• GIF

• 

• 

• 

Inspiration

My 9-year-old daughter Isabella is preparing to take the SAT this April. She's mathematically gifted — completing JHU honors courses — but standardized tests demand fluency across topics that textbooks teach in isolation. She'd ace a trig problem, then stumble when the same concept showed up disguised as a slope question. The disconnect wasn't ability, it was exposure to the connections between topics.

I wanted to build something where practicing parallel line angles naturally leads to discovering that those angles ARE slopes, slopes ARE trig ratios, and trig ratios ARE derivatives. Not a lecture — a game where every 5-question streak triggers a cross-domain "bonus round" that reveals the link. The kind of tool that makes a kid say "wait, that's the SAME thing?"

Reddit felt like the right home for it. Math practice is better when it's social — leaderboards, daily challenges, the motivation of knowing other people are grinding the same problems. Devvit let me put an interactive math lab directly inside a Reddit post.

What it does

GTA Labs (Geometry, Trigonometry & Algebra) is a 7-module interactive math practice app that runs natively inside Reddit posts:

• ✂️ Parallel Lines — Angle relationships on transversals with animated canvas diagrams
• 📈 Linear Functions — Slope, intercepts, and equation forms
• 🔄 Transformations — Reflections, rotations, translations, dilations
• 📐 Trig Solving — SOH-CAH-TOA with Pythagorean-consistent triangles
• ⭕ Circle Theorems — Inscribed angles, central angles, tangent properties
• 🔬 Function Lab — Domain, range, composition, inverses
• 🔮 Derivatives — Power rule, rates of change, with an animated "cheat code" reveal

The core innovation is the Bonus Progression Engine. After a streak of correct answers, a cross-domain bonus problem appears that connects the current topic to algebra, systems of equations, or trigonometry. Bonuses progress through five tiers — Bronze, Silver, Gold, Platinum, and S-Rank — each revealing deeper connections between mathematical concepts. A student practicing parallel lines will discover that the angle they just found IS the slope of the line, the slope IS a trig ratio, and solving for the intersection IS solving a system of equations.

Scores persist via Redis, with per-module leaderboards and streak tracking. Every post is a practice session — moderators can create posts for specific modules or general "choose your module" sessions.

How we built it

The app started as a standalone React/Vite project with 7 math modules, each using HTML5 Canvas for interactive geometry diagrams. Every module generates problems procedurally with randomized values, so students never see the same problem twice.

We built a declarative answer validation system backed by a 2,385-check test harness — 133 checks for derivative correctness and 2,252 checks for trigonometry (Pythagorean consistency, answer-in-options verification, distractor quality, and formula correctness). The trig problems store exact floating-point values internally and only round for display, so a student checking with the Pythagorean theorem will always see consistent sides.

For the Devvit port, we used the new @devvit/web framework with Hono for server routes and the two-page architecture — a splash screen (inline in the Reddit feed) and the full game (expanded mode). The server uses Redis sorted sets for leaderboards and key-value pairs for per-user score persistence. All rendering is self-contained: zero external scripts, zero CDN dependencies, pure Canvas-based graphics. This was critical — any external script reference prevents the webview from loading on Reddit.

The Bonus Engine uses a tiered progression system stored locally per module. Each tier's problems are generated to use the same geometric setup the student just practiced, but ask a different mathematical question about it — making the cross-domain connection visceral rather than abstract.

Challenges we ran into

Pythagorean consistency in trig problems. Our initial implementation rounded each triangle side independently, so \( 9^2 + 7.6^2 \neq 11.7^2 \). A student checking their work with the Pythagorean theorem would see a mismatch. The fix was storing exact trig values and only rounding the final answer — verified by a 5,000-trial stress test.

Devvit's sandboxed webview. No external scripts means no Desmos API, no Google Fonts, no CDN libraries. Everything had to be bundled or drawn from scratch. We rewrote all graph rendering to use pure HTML5 Canvas, which actually made the app faster and more reliable.

The @devvit/web bundling pipeline. The devvit() Vite plugin handles server bundling automatically, but @devvit/web/server must be bundled INTO the server output, not externalized. Getting this wrong produces a silent failure — the app installs but every API call 404s.

Two-page architecture. Devvit posts have a compact "inline" view (splash) and an expanded interactive view (game). The splash needs to be lightweight and inviting, while the game needs to load 7 modules with Canvas rendering. Getting the requestExpandedMode() transition smooth required careful state management.

Accomplishments that we're proud of

• 2,385 automated correctness checks across all modules — every generated problem is mathematically verified
• Zero external dependencies — everything renders with bundled code and Canvas, no CDN calls
• The "aha moment" bonus system — watching a 9-year-old realize that the angle she just solved IS the slope of the line, and the slope IS tan(θ), is exactly the kind of connection that makes math click
• Pythagorean-consistent trig problems — verified across 5,000 random trials with tolerance < 0.0001
• Full Redis persistence — scores, streaks, best streaks, and leaderboards survive across sessions
• 7 complete modules with procedural problem generation, animated diagrams, and immediate feedback

What we learned

Building for Devvit's sandboxed environment forced architectural discipline that made the app better. No external dependencies means faster loads, no CORS issues, no CDN outages. Pure Canvas rendering is surprisingly powerful for interactive math diagrams — and it's the same technology that works identically across desktop and mobile Reddit.

The biggest pedagogical insight: cross-domain bonus problems are more effective than topic-specific practice for building mathematical fluency. Students who see the same geometric setup through multiple mathematical lenses develop intuition that transfers to novel problems — exactly what standardized tests demand.

The test harness was worth every line. Catching the Pythagorean rounding bug before a student encountered it saved hours of confused debugging and preserved trust in the tool.

What's next for GTA - Geometry Trig Algebra Archimedes

• Daily Challenges — seeded problems that the entire community solves, with daily leaderboards
• Adaptive difficulty — the QuestionStore already tracks per-question-type accuracy and timing, ready to feed a spaced-repetition algorithm that surfaces weak areas
• Module unlocks — new question types unlock as students demonstrate mastery (the data model is built, UI pending)
• SAT-specific mode — timed sessions matching actual SAT section structure and difficulty distribution
• Community-created problems — let r/math and r/learnmath contributors submit problem templates that feed into the procedural generator
• Archimedes narrative — the splash screen features Archimedes' death ray for a reason. We want to build a storyline where each module is a "discovery" in Archimedes' workshop, connecting ancient mathematics to modern problem-solving # GTA Labs — Built With

Platform & Framework

• Reddit Devvit (@devvit/web) — App hosting, webview sandbox, Redis persistence
• Hono — Lightweight server-side routing framework (Devvit template standard)
• Vite 7 — Build toolchain with @devvit/start/vite plugin
• React 18 — UI component library
• TypeScript / JavaScript (JSX) — Primary languages

Data & Persistence

• Devvit Redis — Score persistence, leaderboards (sorted sets), streak tracking, daily challenge seeds

Rendering & Graphics

• HTML5 Canvas API — All interactive geometry diagrams, triangle rendering, circle theorems, coordinate planes
• CSS-in-JS (inline styles) — Zero-dependency styling, no external CSS frameworks

Testing & Quality

• Custom test harness (Node.js) — 2,385 automated checks across 5 test suites
  • Pythagorean consistency verification (5,000-trial stress test)
  • Answer-in-options validation
  • Distractor quality analysis
  • Formula correctness (SOH-CAH-TOA identities)
  • Derivative rule verification

Development Tools

• Claude (Anthropic) — AI-assisted development, architecture planning, test harness design
• Claude Code — CLI-based agentic coding for file operations and deployment
• Git — Version control
• VS Code — Editor

Key Architectural Decisions

• Zero external scripts (no CDN, no external APIs) — required for Devvit webview sandbox
• System font stack (no Google Fonts) — eliminates external network requests
• Pure Canvas rendering (no Desmos API) — self-contained graph drawing
• Procedural problem generation — infinite unique problems from parameterized templates
• Two-page architecture — splash (inline post preview) + game (expanded interactive mode)

Built With

• claude-(anthropic)
• claude-code
• css-in-js-(inline-styles)
• devvit-redis
• devvit/start/vite
• git
• hono
• html5-canvas-api
• javascript-(jsx)
• node.js
• react-18
• reddit-devvit-(devvit/web)
• typescript
• vite-7
• vscode