Algorithm Thinking Simulator

Inspiration

Algorithms involving loops and if-statements such as sorting algorithms may seem tricky to beginners. Although there are many videos/apps visualizing such algorithms, not many of them provide the capability to move step-by-step and display variables and actions. The ability to move step-by-step and view comparisons, variable changes, etc. makes such algorithms much more understandable and learners should be able to know what is happening.

What it does

This tool allows users to generate an array of any size, choose an algorithm that will be applied to the array, then view a live animation of the algorithm with the option to move step-by-step and pause/resume, an explanation of the current action such as compare, swap, etc. will be displayed under the visualization panel.

How we built it

This web app was built using HTML and CSS for the frontend, and Node.js for the backend. The start was creating and laying out the panels, then creating a visualized array interactively, then adding sorting algorithm functions that update the UI interactively, and finally improve the layout/UI at the end.

Challenges we ran into

The biggest challenge was the time constraint, and working with multiple related files (HTML, CSS, JS) containing hundreds of lines made it very much harder to debug.

Accomplishments that we're proud of

I'm proud to have built a fully functioning web app that learners (including me) can benefit from, and that I am able to expand on with more algorithms later on