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. 😆
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! 😎
The setup is as simple as it gets!
- If you haven't already, download and install Node.js and npm from nodejs.org.
- Open your terminal/command prompt and Use the
cdcommand to navigate to the directory where you cloned the Sorting Visualizer repository. - Open a terminal and run
npm installto install all the dependencies. - After that, simply run
npm run devfor a local development environment.
If you just want to test the webpage, you can visit this link