An interactive, static visualizer for graph traversal and sorting algorithms. Draw a board, add weighted terrain, generate a maze, and inspect each decision with full playback controls.
The live demo and demo GIF will be added after the repository is connected to Vercel.
- BFS, DFS, Dijkstra, and A* pathfinding on a 50 × 25 grid
- Click-and-drag walls, Shift-drag weighted cells, and draggable endpoints
- Keyboard grid controls with arrow navigation and wall, weight, start, and target shortcuts
- Randomized depth-first maze generation
- Bubble, insertion, selection, merge, and quick sort
- Play, pause, single-step, scrub, reset, and steps-per-second controls
- Pure algorithm engines with no React or DOM dependencies
Every algorithm accepts plain data and returns a flat list of animation steps. The UI is only a player for that list. This keeps the engines deterministic and unit-testable, and makes timeline controls simple.
The pathfinding grid renders once and stores cell elements in a ref map. During playback, only changed classes are updated inside a requestAnimationFrame loop. Sorting uses ordinary React state because its arrays are much smaller.
| Algorithm | Time | Notes |
|---|---|---|
| BFS | O(V + E) | Shortest path on unweighted grids |
| DFS | O(V + E) | Does not guarantee a shortest path |
| Dijkstra | O((V + E) log V) | Optimal with non-negative weights |
| A* | O((V + E) log V) worst case | Manhattan-distance heuristic |
| Bubble sort | O(n²) | In-place, stable |
| Insertion sort | O(n²) | Adaptive on nearly sorted input |
| Selection sort | O(n²) | Minimizes swaps |
| Merge sort | O(n log n) | Stable, O(n) auxiliary space |
| Quick sort | O(n log n) average | O(n²) worst case |
npm install
npm run devOpen http://localhost:3000.
npm run lint
npm run typecheck
npm test
npm run buildNext.js 15 App Router · React 19 · TypeScript · Tailwind CSS v4 · Vitest