AlgoVista: DSA Visualization Platform
Next.js 15 and TypeScript visualizer that animates sorting, searching, graph, tree and dynamic-programming algorithms step by step. Algorithm logic is kept separate from rendering.
Problem
Visualizers often mix algorithm execution with rendering, which makes them hard to extend, test or replay.
How it works
Algorithm engine
Pure TypeScript functions that emit typed visualization steps, with no DOM coupling.
Approach
Each algorithm is a function that returns a list of steps. A playback store walks through the steps, so the same run can be played, paused, stepped backwards and compared in a side-by-side mode.
What I implemented
- Separation of algorithm engine, playback store and visualization layer.
- Graph, tree, dynamic-programming table and animated bar visualizations.
- Pseudocode and C++, Java and Python implementations for each algorithm, a complexity panel, a comparison mode and a playground.