education

Fabian’s Quest handled the classroom side—times tables, spelling, the nightly homework loop. This one exists because the kid is obsessed with football in a way that borders on clinical.

He’s had us both up before seven every day this past week, out at the park for over an hour before breakfast. This isn’t unusual. Other children on his team play their Saturday match and that’s football done for the week. Fabian would play for eight hours a day if you let him, and he’d be annoyed when you stopped. The app was his idea—he wanted something that would make our training sessions better, not just longer.

The problem was familiar: we’d show up with a ball, a bag of cones and a vague intention to “work on shooting,” which meant twenty minutes of him firing shots at me followed by forty minutes of whatever felt easy. Enjoyable, but aimless. He knew it was aimless. He told me.

Fabian’s Arena gives those sessions structure while keeping everything fun—which is the whole point when you’re eight. It generates 60-minute blocks (warm-up, two skill rounds, a 1v1 match, cool-down) with drills drawn from a library of 30 across six categories: dribbling, passing, shooting, first touch, speed and agility, defending. Each drill comes with coaching tips, a suggested duration, and a linked YouTube tutorial.^[1]

There’s also a spin wheel for when you just want one quick drill picked at random, which is most Tuesday evenings.

The visual language is dark pitch-green with amber and gold accents, glassmorphic cards, and the same Fredoka headings used in Fabian’s Quest. It runs as a PWA on my phone, works offline at the park. Progress data persists locally via Zustand and syncs to Supabase when there’s a connection, which means nothing is lost between the front door and the goalposts.

Some details worth noting:

• The session generator uses weighted random selection, boosting underrepresented skill categories and biasing toward a chosen focus skill—so sessions feel varied without being chaotic
• A badge system with 17 achievements across milestones, streaks, and per-category mastery, surfaced through a full-screen celebration overlay that an eight-year-old finds deeply satisfying
• The spin wheel is an SVG with Framer Motion rotation—ten random drills on coloured segments, four to six full spins before landing
• Drills show a suggested duration and a manual “Done” button. I’d toyed with an in-app timer, but phone screens lock during actual training, which kills any running countdown
• The 1v1 match block has no drills—it’s twenty minutes of free-play football, Dad vs Fabian, rendered as its own card in the session flow

Built with Next.js, TypeScript, Tailwind and Framer Motion. A companion to Fabian’s Quest rather than a sequel.

---

1. I watched hours of kids’ football tutorial videos. The quality YouTube search returns is remarkably variable—even with precise coach-speak in the search terms, I’d get anything from a Premier League academy production to a man kicking a beachball around a garden with a toddler. ↩︎

My son is in Year 3 and needs to practise times tables, spelling, and a handful of other subjects every night. The available apps were either too broad, too patronising, or too keen on subscription revenue. I built him something instead.

Fabian’s Quest is a learning app dressed up as an RPG. There’s a Daily Quest—37 questions across seven rounds covering maths, scales, spelling, grammar, science, history, and geography—designed to take about ten minutes. Short enough that it happens every night regardless of energy levels. You can also take a deeper dive into any of the subjects on their own. Each correct answer earns XP, streaks build, levels unlock. The kind of feedback loop that works on a child who treats everything as a competition.

It runs on an iPad, built with React and Vite, deployed to Cloudflare Pages. No backend—player data lives in localStorage, which is fine when your entire user base shares a device and a surname. The visual language is dark navy with gold accents, chunky rounded type, and the sort of progress bars that make eight-year-olds feel like they’re levelling up in a proper game. (Claude helped with the styling—it’s not my thing at all.)

Some details worth noting:

• Procedurally generated measurement questions with inline SVG number lines—no static image assets, no question bank to exhaust
• A spelling hint system that auto-detects patterns (double letters, silent letters, tricky vowel pairs) and generates contextual clues rather than just revealing the answer
• Programmatic sound effects via the Web Audio API and text-to-speech via the Web Speech API—zero external media files
• The entire application lives in a single 3,200-line React component, which I mostly think is admirably focused but occasionally see as a future problem
• I’ve built a workflow with Claude Code to automatically update it each week when the school sends home new material

The name was Fabian’s idea. He wanted a quest.