ShowData · Algorithm Instrument — System Design

12 components · 12 links · 5 zones

Loading graph…
Legend
  • Standard node
  • External / inferred (dashed)
  • Database / persistent store
  • Load balancer / proxy
  • Zone band (small-caps title)
  • Link / dependency
  • Data flow (dashed)
  • Bidirectional (request/response)

Inferred components — evidence

  1. Next.js Runtime (zone 2) — solid; verified from next.config.ts, package.json (next 16.2.6, "dev":"next dev") and the src/app App-Router layout.
  2. Web Audio API (zone 5) — dashed/inferred; new AudioContext() and oscillator usage in entities/algorithm/sound.ts. Browser-supplied, not a deployed service.
  3. localStorage (zone 5) — dashed/inferred; the Zustand persist middleware with key algorithm-storage in entities/algorithm/store.ts defaults to localStorage.
  4. Timer / rAF (zone 5) — dashed/inferred; setTimeout/clearTimeout animation loops in SortingVisualizer.tsx, use-pathfinding.ts, use-tree.ts and requestAnimationFrame in SortingVisualizer.tsx.
  5. Hook State / Refs (zone 4) — solid; pathfinding and trees keep their working state in component-local useState/useRef rather than the global store (use-pathfinding.ts, use-tree.ts).
  6. Not present: no application server, database, message broker, auth service, or external API is contacted. pocketbase and @tanstack/react-query are declared in package.json but imported nowhere in src; vercel.json rewrites all paths to / (static SPA).