A website that allows the user to visualize sorting algorithms. The sort type, animation speed, array size, and pivot selection (for quicksort) can all be interacted with. This website was built in react, and makes use of material ui to style some components.
Simply go to: https://ryanmaxin.github.io/Sorting-Algorithm-Visualizer/
Bubble Sort
Selection Sort
Insertion Sort
Merge Sort
Heap Sort
Quick Sort
Default Website Layout
Picture during a merge sort
This was a on-off project I worked on for over two months in my free time. The main goal of this project was to help me build and solidify knowledge of many of the most common sorting algorithms.
Ultimitely I found myself also learning a ton about the call stack, as I had to use asynchronous JavaScript extensively to properly animate the sorting. This project was also the first website I attempted to create a professional, visually pleasing user interface. I personally planned out the design and spent countless hours making sure the website followed this plan and stayed responsive for all screen sizes.
I spent a lot more time then I ideally would have liked styling the Material UI elements (it was my first time implementing them). I also had difficulty scaling the text to fit the "about" div as screen sizes grew or shrank. In the end I was able to fix all of these issues and I gained experience with how to deal with them for the future. Overall I am very happy how this project turned out, and hope any one reading this can get some value out of too!