Work14Frontend & tooling

AlgoViz

Step through six sorting and four pathfinding algorithms one operation at a time.

Role
Solo — design, engineering, deployment
Language
JavaScript 95.2% · CSS 3.9%
Timeline
Jun 2026 → Jun 2026
Last push
3 months ago · 7 commits
Live demo
Source
AlgoViz — screenshot of the live product
sorting + pathfinding algorithms
6 + 4
array size range
10–80

Bubble, Selection, Insertion, Merge, Quick and Heap sort plus BFS, DFS, Dijkstra and A* on an interactive grid — with play/pause/step controls and live comparison and write counts.

Problem

Complexity tables do not build intuition. AlgoViz records every comparison and mutation as a frame so learners can scrub through an algorithm like a video.

Approach

  1. 01

    Each algorithm is a step recorder emitting frames; the UI replays them at a controllable speed with spring-animated bars.

  2. 02

    Maze generation and wall drawing for the pathfinding grid; complexity metadata per algorithm.

Results

sorting + pathfinding algorithms
6 + 4
array size range
10–80
Created
3 Jun 2026
Commits
7
Default branch
main
License
unlicensed

Stack

  • React 19
  • Vite
  • Tailwind CSS v4
  • Motion