Sorting Visualizer ✨

Background 🤯

At the beginning, I watched this video, and at the same time, my friend needed help with React Native. Since I didn’t knew React Native, and I wanted to create a project, I decided to create a sorting visualizer to learn React Native and, of course, to create some repos on GitHub. 😄

Even though the project was functional, the code was terrible! 😅 Most things were hardcoded, some buttons weren’t even working properly, and the app wasn’t responsive at all. So, in 2025, I decided to rewrite it using vanilla TypeScript. I wanted to make it more fancy, create some generic classes, write test cases, and throw in all the extra stuff. 😆

Achievements 🏆 or 💩?

At the end of the day, the project is better from a functionality perspective: all the buttons are working, sorting animations are smoother, and the webpage is responsive. It's still not perfect, but it’s definitely better than before! 😅

But code looks like a shit again 💩

P.S The merge sort animation might seem a bit confusing because instead of overwriting element values, I simply change their positions... This is HTML! This is merge sort! 😎

Setup 🌱

The setup is as simple as it gets!

1. If you haven't already, download and install Node.js and npm from nodejs.org.
2. Open your terminal/command prompt and Use the cd command to navigate to the directory where you cloned the Sorting Visualizer repository.
3. Open a terminal and run npm install to install all the dependencies.
4. After that, simply run npm run dev for a local development environment.

If you just want to test the webpage, you can visit this link