The first thing a new user writes in CodecityApp is this:
def greet(name):
return f"Hello, {name}!"
When that test passes, Town Hall appears in their city. Not a badge. Not XP. A building.
That's the core bet I made when I started this — that a visual construction metaphor would do something a progress bar never could.
Why I went with city-building
I've been around enough bootcamps to know what kills motivation. It's not difficulty. It's abstractness. You write a function, tests go green, nothing visibly changes. Then you write another. Tests go green. Still nothing.
The feedback loop is too thin for most beginners.
So I tried something different: every challenge maps to a specific building in a city. You write real code — not drag-and-drop, not fill-in-the-blank — and the city grows. Town Hall at the center. New buildings at the edges. Empty land where you haven't been yet.
You can see where you stand at a glance. That's the whole thing.
What's under the hood
CodecityApp has 1,334 challenges across 10 languages — Python, JavaScript, TypeScript, SQL, Bash, and more — organized into "planets" rather than flat course modules. There are 1v1 Arena battles with ELO ranking for users who want something competitive.
Code runs server-side through Judge0 with a 5-second execution ceiling and IP-based rate limiting. No client-side evaluation tricks — actual code, actual output, tested against real test cases.
ARIA, the built-in AI mentor, gives hints when you're stuck. She doesn't give you the answer. She asks the right question.
Stack: React + Vite + Tailwind, Supabase for backend, Framer Motion for city animations.
The mistake that cost me months
For a long time, the galaxy progress system was hardcoded open. Every world was accessible regardless of what the user had actually completed.
Classic builder mistake: I was heads-down on challenge quality and left the progression system as a stub. Users could skip to advanced content immediately — which sounds flexible, but it gutted the sense of building anything. You can't feel like you're constructing a city if nothing is earned.
I fixed it. But I lost months of users experiencing the product as intended, without realising why retention felt off.
The thing that surprised me most
When I watched a real user session for the first time, they skipped the instructions entirely. They saw the city, clicked a building, wrote the code.
No onboarding flow caused that. The city did the explaining.
That's the part I didn't fully predict when I started — that the metaphor does the teaching before the first lesson even loads.
Try it
Guest challenges are live — no account needed. You can write Python in the browser and see your first building appear in under a minute.
Would love to hear from other builders who've tried game mechanics in serious learning tools. What held up? What fell apart?
Top comments (0)