Work

AlgoStudio — Interactive Algorithm Visualizer

An interactive platform for visualizing 22 algorithms and data structures with step-by-step playback, synced pseudocode highlighting, and complexity analysis — built with Astro 6, React 19, and Framer Motion.

Role

Solo Developer

Year

2025

Source

GitHub
Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Screenshot 5
1/5
22 Algorithms
130 Source Files
60 Components
3 Themes
TypeScript95.9%
Astro3.3%
CSS0.5%
JavaScript0.3%
TypeScriptAstroReactTailwind CSSFramer MotionZustand

What It Does

AlgoStudio provides animated, step-by-step visualizations of 22 algorithms and data structures — sorting, searching, graphs, trees, string matching, hashing, and union-find. Each visualization features full playback controls (play, pause, step forward, step back at 0.5x–4x speed), real-time pseudocode highlighting synced to each step, and complexity analysis panels.

How It Works

Every algorithm follows a consistent 6-file pattern: types, step generation logic, SVG chart component, orchestrator, page resolver, and Astro route. Steps are pre-computed into arrays (not generators), enabling instant random access to any point in the execution — including stepping backwards.

State management with Zustand drives the playback engine. Framer Motion handles spring-physics animations and layout transitions. Three themes (Dark, Light, Beige) persist via localStorage.

Key Features

  • Instant step-back — pre-computed step arrays enable random access to any execution point
  • Synced pseudocode — exact lines highlighted as each step executes
  • Action badges — real-time labels showing current operation (compare, swap, merge, rotate)
  • Compare Mode — run two algorithms side-by-side on the same input
  • Complexity Explorer — interactive Big-O analysis with visual scaling
  • 22 algorithm pages spanning sorting, graphs, trees, hashing, and more