Code Visualizer is an online coding platform for data structures and algorithms students to practice coding basic data structures like linked lists and trees and visually see what their code is doing step by step in an interactive environment, making understanding complex algorithmic concepts and debugging code significantly easier and giving students a tangible way of sensing what their code does apart from just simple text on a screen.
The state-of-the-art technology this platform is providing is the fact that the users do not have to add a single line of code to their data structures code for it to work, it plugs in seemlessly with the usual student's learning experience, to the best of our knowledge this is the first ever platform to provide such an experience.
The project is publicaly avaiable to try here [coming soon]!
The following demo shows a code that builds a chain of nodes (linked list) one node at a time and stores user input in the nodes.
Warning
Please don't take this code for a proper implementation of a linked list, we are aware of the memory leak in the code, this is just for demonstrative purposes :)
code_visualizer_demo.webm
The platform has an expandable filetree to the left which allows for file and folder structure creation, viewing, deletion and manipulation. Different files can be opened and edited in the left pane and the right pane contains the grapher and the console where the project can be run and visualized!
Below is a sample test for a simple code that creates a chain of nodes (a linked list)!
The platform's design is inspired by Replit, and the platform was developed with React, Node and Express, and the graphing library used is React-flow (credits to them for the amazing library).