Sorting Visualizer

As a self-taught developer, I never had a lot of exposure to algorithms. I wanted to improve my knowledge of these and I took the opportunity to create a small side-project visualizing some algorithms. I wanted to show how certain sorting algorithms work.

I created this project with Create-React-App, TypeScript, and Chakra UI. The goal of this project was to showcase the visualization of the sorting, and therefore the design of the app was less important. It also gave me some exposure to some modern UI libraries.

One of the biggest challenges was the scheduling of the animations. For a small number of integers, the actual sorting of an array takes milliseconds, but I wanted to slow it down to show how the numbers trade places in the array. I created therefore dynamically all the animations and scheduled them to run one by one.