Thunderstorm
Interactive Algorithm & Data Structure Visualizer
“How do you visualize algorithms so they click instantly?”
Case Study Index (4 Sections)↓
Why I Built This Tool
Abstract algorithms are often difficult to grasp from dry code or static diagrams alone. Thunderstorm provides an interactive visual execution engine that animates array pointer movements, element swaps, and recursive partitions in real time.
When studying competitive programming and DSA, I wanted a tool where I could pause algorithm execution mid-loop, inspect pointer states, and visually verify how different partitioning strategies behave.
Technical Implementation
Algorithms execute in pure memory first, producing immutable array snapshots `[{ array: number[], activeIndices: number[], swap: boolean }]` that the React render loop plays back without mutating live algorithm variables.
Design Approach: Separate algorithm step generation from visual rendering: compute complete state snapshots first, then play back steps using controllable animation timers.
Engineering Decisions
Animating arrays by mutating live state directly inside recursive functions caused race conditions during pause/rewind actions.
Refactored algorithms to execute headlessly first, returning an array of immutable step snapshots that the UI plays back cleanly.
Slight initial memory allocation for storing snapshot arrays.
Enabled seamless pause, step-forward, and step-backward controls without breaking algorithm state.
Challenges & Solutions
Smooth Visual Element Swaps
Issue: DOM elements replacing positions instantly made it hard to follow which items were being swapped.
Decision/Solution: Utilized Framer Motion layout animations (`layoutId`) to smoothly transition swapped array bars across coordinates.
What's Next
Key Takeaways
Decoupling state computation from UI playback makes complex animation controls simple to implement.
Visual feedback accelerates algorithmic problem-solving intuition.
Related Engineering Projects
Java Knowledge Base
Organized a dual-purpose repository combining an Obsidian documentation vault with a structured IntelliJ Java workspace containing runnable CLI projects.
FocusX
Built a zero-dependency minimal Pomodoro timer using vanilla JavaScript with system epoch time synchronization to overcome browser tab throttling.