Sorting Visualizer

Inspiration

This is my first-ever hackathon, and I only knew DSA. I have always been fascinated by how YouTube creators animate algorithms, be it sorting, binary tree traversal, or anything else. In my 2nd semester, while writing the code for inorder traversal, I couldn't visualize how it was working, so I used this link to understand how is it working. And all of this gave me inspiration for making a sorting visualizer.

What it does

1) It creates a random array of size 195 having values ranging from 5 to 650.

2) Then it shows the sorting animation in the web app

How we built it

*1. Choosing the Language: * Initially I thought of using Python or C++, but later decided on using React for the frontend due to its simplicity in creating interactive UIs.

2. Developing the Sorting Algorithms: I implemented 4 sorting algorithms, Merge Sort, Quick Sort, Heap Sort, and Bubble Sort. Each algorithm was coded to not only sort the array but also to provide step-by-step updates for animation.

3) To make the application user-friendly, I styled the components using CSS. For CSS I used Figma's developer mode(as I am not that proficient at it)

Challenges we ran into

1) Quick Sort gave me a lot of issues. It was not animating properly, used to get stuck after a few steps, and sometimes returned stack overflow errors.

2) Merge Sort was challenging when I tried to do it without an auxiliary array method. I had to learn a new method to make it work.

3) As this was my first time using React, it was a bit confusing at first.

Accomplishments that we're proud of

The thing that I am proud of is that I was able to pull off the project within time limit, it seemed very difficult to me because of all the issues I was facing in quick sort yesterday(13 July 2024), So I thought of either to quit from the hackathon or switch to python or cpp. But Thankfully I was able to do it in React and within time limit.

What we learned

1) A new method to perform merge sort 2) Basics of react 3) Uploading code to github using git 4) How to deploy react app on github pages

What's next for Sorting Visualizer

For future I am thinking of adding more sorting algorithms to it and also a element that shows the time taken to sort the array. I am also thinking of adding a slider than can change the size of array. and another slider for animation speed