Skip to main content
Elizabeth Stein
Design UniverseOpen to workHomeWorkAboutContact

Case study

design2024

CodeCraft: Galactic Developer

Educational coding game combining real programming with space colony gameplay. Three.js real-time 3D visualization, Monaco editor for live code editing, Redux state management, narrative-driven progression.

Where design meets code and pixels come alive

Field notes

Role

Creator

Read order

Evidence first, then constraint → build → proof. Use the chapter rail to jump sections; orbit to adjacent work from the bottom of the case study.

Design Universe·✦I-Class Giant
●LIVE
View Live Site

Evidence

Interface & evidence

A real surface area—not a mock. Scroll the story below for constraint, build, and outcome.

Signature viewcodecraft-dev-one.vercel.app
CodeCraft: Galactic Developer application interface
Open Live Site
codecraft-dev-one.vercel.app

Story arc

How this shipped

Where design meets code and pixels come aliveThree beats: what pressed against the work, how the stack answered, and what changed once it was live.

I · Constraint

The brief

Teaching real programming concepts through engaging gameplay rather than dry tutorials.

II · Build

The craft

Combined Three.js 3D colony visualization with Monaco editor for live coding. Narrative progression unlocks new programming concepts as players advance.

III · Proof

What moved after launch

Teaches JavaScript fundamentals through 20+ interactive missions. Real-time 3D feedback makes abstract concepts tangible. GSAP animations create immersive learning experience.

Inventory

Stack & signals

Next.js 16Three.jsMonaco EditorReduxGSAP
← Project archive

Tell me what you're building

If you need someone who can own UI, systems, and AI integration without losing the plot—I'm listening. Contract, advisory, or full-time: we'll find the right shape.

Start a ConversationSee More Projects

Related work

Nearby systemsignal 1
Signal: Low
Next.js 16

CRC Lead Gen Platform

Public-facing lead generation and admin console for CyberReady Clinic. Next.js 16 + React 19 + Drizzle + Neon Postgres + Better Auth + MSAL Azure AD. Admin console manages newsletter, volunteer, mentor, and client questionnaire pipelines; integrates Power Automate callbacks for the Dataverse handoff.

Nearby systemsignal 1
Signal: Low
Next.js 16

ExplainThisCode.ai

Enterprise SaaS code explanation platform with GPT-4, skill-level adaptation, security vulnerability scanning, performance profiling, team collaboration, and Stripe subscriptions. 47 Radix UI components.

Nearby systemsignal 1
Signal: Low
Monaco Editor

MCP Server Studio

Visual builder for Model Context Protocol servers. Design tools, resources, and prompts on a drag-and-drop React Flow canvas. Built-in test simulator with parameter validation and batch schema testing. Exports production-ready TypeScript with Docker and Railway deployment bundles. 466 passing tests.

Keep exploring

Previous Project

Rocket Vitals

Scan-first website QA tool that crawls up to 500 pages and runs 200+ checks across SEO, accessibility, performance, security, links, content, and AI readiness. Delivers prioritized reports with severity scoring, department routing, regression monitoring, and client-ready exports.

Next Project

Color Studio

Advanced color manipulation tool for designers with live previews and palette generation.

© 2026 Elizabeth Stein

·Contact·Privacy
Let's work together → GitHubLinkedIn

Built with Next.js, Three.js, and obsessive attention to detail.