StepTrace

Inspiration

Learning algorithms from static code is frustrating and hard to do. You read the solution, it makes sense in the moment, but then you can’t reproduce it later. I wanted a way to see how an algorithm thinks step by step.

What it does

StepTrace is an interactive algorithm visualizer that shows how problems are solved in real time. You can step through an algorithm or play it automatically, while the code, array, and data structures update together. The goal is to make each step intuitive instead of abstract.

How we built it

Built with Next.js and Tailwind CSS. The core idea is a step-based engine where each step controls the active line of code, the current state of the data structures, and the explanation. This keeps everything perfectly synchronized during execution.

Challenges we ran into

Getting the step state to stay perfectly in sync with both the code highlight and the visualization was tricky. Also designing the stack visualization for Valid Parentheses so it felt intuitive and not just a list of brackets

Accomplishments that we're proud of

The synchronized code + visualization experience feels smooth and easy to follow. The step-by-step progression and auto-play mode make it feel like a real learning tool rather than just a static demo.

What we learned

Building for learning is different from building for functionality. Every visual element needs to clarify the concept, not just look good.

What's next for StepTrace

Adding more algorithms, allowing users to input their own test cases, and introducing guided practice modes to reinforce understanding.

Built With

• framer-motion
• javascript
• next.js
• react
• tailwind-css