-
-
First version
-
Final Version Screenshot
Inspiration
A lot of beginners are struggling to understand how big and complex code works.
What it does
Our idea is to make a visualization of the complex code then explain it to the developer so he can understand his code
How we built it
We built AlgoVision entirely on the front end using TypeScript and React, ensuring a smooth and responsive user interface. For the core visualization, we integrated Tree-sitter, a powerful library that parses code into syntax trees. This allowed us to extract code structures and turn them into visual nodes and connections. From there, we used React components to render the interactive diagrams and connect them with explanatory panels for a seamless learning experience.
What makes this achievement even more meaningful is that we were only two teammates, both with limited prior knowledge of TypeScript. We had to learn on the go, diving into new libraries, debugging countless errors, and figuring out how to bridge our ideas with real, working code.
Challenges we ran into
One of our biggest challenges was integrating Tree-sitter effectively with React while maintaining performance. Parsing large codebases and updating visuals in real time was resource-intensive. We also faced design challenges when trying to make the visualization both informative and aesthetically clear, balancing complexity with simplicity was not easy. In addition, since we were new to TypeScript, we had to constantly troubleshoot type-related issues and learn best practices as we built the project.
Accomplishments that we're proud of
We’re proud that we turned an abstract idea into a working prototype within the hackathon timeframe, just the two of us. Seeing our visualizer accurately represent real code structures and help users understand complex logic in seconds was incredibly rewarding. We’re also proud of how we learned and applied TypeScript from scratch while still delivering a functional, polished product.
What we learned
Throughout this project, we learned a lot about code parsing, data visualization, and the importance of designing for clarity. We also deepened our understanding of TypeScript, React hooks, and rendering performance optimization. Beyond the technical lessons, we learned the value of adaptability, perseverance, and teamwork when working under pressure
What's next for AlgoVision
Moving forward, we want to add AI explanations that go beyond syntax, describing the intent and logic of code. We also plan to support multiple programming languages, add drag-and-drop editing, and integrate a collaborative mode where teams can visualize and explore code together. Another exciting direction is expanding AlgoVision beyond programming, to visualize mathematical concepts and domains such as calculus, linear algebra, and algorithms, helping learners understand abstract mathematical ideas through dynamic, visual representations.
Log in or sign up for Devpost to join the conversation.