Stackcraft
Design enterprise systems. Learn patterns by building them.
Business Context
Beta distribution via Vercel with itch.io listing staged. Target audience: engineers learning system design, CS students preparing for architecture interviews, and anyone who wants a sandbox where 'the pattern you end up drawing' IS the lesson.
Overview
Stackcraft is a mobile-first PWA architecture game where players design enterprise systems on a live canvas and unlock architectural patterns by successfully deploying them against quest constraints. Each quest presents a real-world-shaped brief (traffic profile, compliance requirements, cost ceiling, reliability target); the player composes a system from a tiered node palette, wires sync/async/replication edges, and the validation engine scores the design across four health dimensions — Compliance, Reliability, Performance, and Cost — in priority order.
The canvas is built on React Flow with custom color-coded architecture nodes, tier badges, and live health indicators; the validation engine is a pure-TypeScript pipeline that runs a ConstraintSet against the canvas state and returns a typed ValidationResult. A pattern library of twelve architectural patterns (each with its own `detect(canvas)` function) rewards emergent design — if your solution happens to implement the Saga pattern, the library unlocks it automatically. Game state, XP rates, passing thresholds, and rank requirements all live in a single config module.
Key Contributions
- Live architecture canvas powered by React Flow with custom tiered nodes, sync/async/replication edges, and a real-time Validation HUD showing Compliance / Reliability / Performance / Cost health
- Pure-TypeScript validation engine: (CanvasState, ConstraintSet) → ValidationResult — reusable constraint factories, deterministic scoring, and priority-ordered health dimensions
- Pattern library of 12 architectural patterns with automatic `detect(canvas)` unlock — players learn patterns by shipping them, not by reading about them
- Content model: Level → Mission → Quest with constraints, XP rates, and passing thresholds defined in config — new content ships as a single file in `lib/content/`
- Mobile-first PWA: installable, offline-capable, touch-tuned canvas controls, capsule art and itch.io cover shipped
- Ranked progression — XP and rank thresholds gate content access, creating a natural curriculum from starter quests to enterprise-scale design briefs
- Shaped by dev-tool aesthetic + UI design persona reviews during the surface polish pass (custom canvas controls, keyboard shortcuts, iconography pass)