Skip to content
Algo Visualizer
Algorithm labs
AboutArchitecture

Project notes and next steps.

Architecture summary, deployment notes, and remaining cleanup work.

Design Principles

Decisions that keep the codebase stable as the product grows.

Feature-first organization
Feature code lives with its own engine, controls, visualization, and composed UI so complexity stays local.
Contracts over route state
Pages should compose modules, not hold algorithm logic. Snapshot types are the handoff point between execution and rendering.
Extensible visualizers
Sorting uses DOM bars now, while graphs and trees can move to SVG later without rewriting the app shell.

Technical Debt And Cleanup

Known follow-up work before the product can be considered fully mature.

  1. 1Add Playwright end-to-end coverage for the critical interactive flows on desktop and tablet breakpoints.
  2. 2Persist route state in search params so algorithm, speed, preset, and sample selection are shareable.
  3. 3Profile the heaviest visualizers and selectively move more renderers toward Canvas or SVG where the DOM becomes limiting.
  4. 4Add weighted graph and shortest-path modules, then revisit graph metadata and rendering abstractions for more advanced use cases.
  5. 5Audit color contrast and keyboard flow across every control group after the final design system settles.