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

System surface

No public screenshot on file—generative preview stands in for the visual layer.

Signature viewcodecraft-dev-one.vercel.app
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

Primary developer on a production lead-generation and operations platform for a cybersecurity nonprofit. Next.js 16 + React 19 + Drizzle + Neon Postgres + Better Auth + Microsoft Entra ID (MSAL). Unifies multiple public intake pipelines and hands structured data into the organization's Microsoft Power Platform via secure server-to-server callbacks.

Nearby systemsignal 1
Signal: Low
Next.js 16

TimeSlipSearch

🏆 Winner of Algolia Agent Studio Challenge ($750 prize) - "Conversational time machine" exploring 1958-2020 pop culture with 420,000+ records (Billboard, TMDB, FRED, Wikimedia). Featured by DEV Community for making "deep data archives feel accessible and fun."

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.

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.