Live Demo: 👉 https://sofiia13.github.io/algorithms-visualizer/
An interactive algorithms visualizer that demonstrates how different sorting algorithms work — step by step, in real time.
Built for learning, exploring, and just enjoying the beauty of algorithms ✨
- 🎞️ Real-time animation of sorting algorithms
- ⚙️ Adjustable array size
- 💡 Clear and minimal UI built for intuition and fun
- 🌐 Deployed on GitHub Pages
- 🫧 Bubble Sort
- 🔍 Selection Sort
- ✋ Insertion Sort
- ⚡ Quick Sort
- 🔀 Merge Sort
On a separate page of the project, you can visually explore how different data structures work:
-
🔹 Stack — push/pop, LIFO
-
🔹 Queue — enqueue/dequeue, FIFO
-
🔹 Priority Queue — elements with priority
-
🔹 Heap — insertion/deletion, sorting
The interactive visualizer helps understand how basic data structures operate and allows experimenting with them in real time.
- React (JavaScript ES6+)
- HTML5 / CSS3
- Vite or Create React App
- GitHub Pages for deployment
git clone https://github.com/sofiia13/algorithms-visualizer.git
cd algorithms-visualizernpm installnpm run dev-
Click Generate New Array to create random data.
-
Adjust Array Size and Animation Speed using sliders.
-
Choose an algorithm from the dropdown list.
-
Press Sort and watch how the algorithm works!