sysdesign-lab

Interactive DSA visualizer + system design study platform.

npm run dev        # starts API (:4200) + web (:5173) concurrently
npm run dev:api    # API only
npm run dev:web    # web only
npm run build      # production build

Structure

packages/api/          Node.js HTTP server
  src/
    routes/            Auto-discovered HTTP handlers
    services/          Business logic (algorithm loading, subject viz)
    data/algorithms/   DSA algorithm definitions + step generators (.txt)
    data/subjects/     17 subject definition files
    viz/               Subject visualization builders (array, graph, jvm, lang, system)
                        ├── index.js  — getVizSteps + addVars conversion
                        ├── array.js  — array/linkedlist/sorting/matrix/hashmap/set/dp/string
                        ├── graph.js  — graph/tree/unionfind/trie/backtracking
                        ├── jvm.js    — jvm/threads/java-collections/java-streams
                        ├── lang.js   — golang/python/spring/microservices
                        └── system.js — 25 system design topics

packages/web/          Vite + React SPA
  src/
    dsa/
      engine/          Pure logic (TypeTracker, Complexity, StepHelper, StepRunner)
      types/           14 type renderers + registry (ArrayView, GraphView, TreeView, ...)
      components/      VizEngine, VarPanel, CodePanel, PlayControls, ...
    renderers/         Section renderers (VisualizerRenderer, auto-discovered)
    pages/             Route entry points (dsa, subject, topic)

Data Flow

DSA algorithms: Step generators (.txt) → new Function eval → generator runs → { line, desc, vars, ops, result } → VizEngine renders via VarPanel + type registry.

Subject visualizations: Builder functions → addVars() converts old fields to { type, value, meta } → VisualizerRenderer reads from vars directly.

Principles

• API owns all data. Web has zero hardcoded algorithm/subject awareness.
• Step pipeline is random-access. No shared state between steps. Playback jumps to any index.
• Type dispatch decouples rendering. VarPanel never imports a specific component.
• Auto-discovery everywhere. Adding a file is enough — no registration needed.

Key Docs

• ARCHITECTURE.md — full system map, chunking, decoupling, pipeline details
• AI-THINK.md — design philosophy, tradeoffs, technical debt tracker