Inspiration
Data structures and algorithms can be hard to understand when they’re only taught through code and static diagrams. I wanted to create something that helps students see how algorithms work step by step, making abstract concepts more intuitive and less intimidating. I goal was to build a learning tool I would have found helpful myself when first studying DSA.
What it does
DSA Visualiser is an interactive web app that visually demonstrates how common algorithms work. Users can watch algorithms run step by step, helping them understand the logic, flow, and behavior behind each operation. The project is designed as a learning aide for computer science students who want a clearer, more visual way to grasp core algorithm concepts.
How we built it
I built the project using React with Vite for a fast and modern development setup. The visualizations are created through dynamic state updates that reflect each step of an algorithm as it runs. I deployed the app using GitHub Pages, configuring the build process and base paths so it could be accessed as a live website.
Challenges I ran into
One of the biggest challenges was deploying the app correctly with GitHub Pages, especially handling build paths and static assets. Debugging issues like blank pages and missing files required a deeper understanding of how Vite handles builds. I also had to carefully think through how to break algorithms into clear, visual steps without overwhelming the user. Additionally, this has been my largest project so far, so it was extremely rewarding to be able to see it having been built with so many features.
Accomplishments that we're proud of
Successfully building and deploying a fully functional visualization tool
Making abstract algorithm concepts easier to understand through visuals
Learning how to configure and deploy a modern frontend app
Creating a project that can genuinely help other students learn
What we learned
Through this project, I learned how frontend build tools work, how deployment differs from local development, and how important small configuration details can be. I also gained experience translating complex logic into user-friendly visual representations.
What's next for DSA Visualiser – Learning aide for CS students
In the future, I'd like to add more algorithms and data structures, improve interactivity, and include features like adjustable speeds, explanations for each step, and user input. I long-term goal is to turn DSA Visualiser into a comprehensive learning resource for computer science students.
Log in or sign up for Devpost to join the conversation.