An interactive visual tool to learn and explore sorting algorithms like Quick Sort, Merge Sort, Bubble Sort, and more — powered by React, TypeScript, and Vite.
- Visualize popular sorting algorithms in real-time
- Beautiful animated transitions and color-coded states
- Responsive design with a stunning UI using TailwindCSS
- Algorithm statistics (e.g., total runs, elements sorted, most used)
- Built with Vite for fast development experience
- SEO-optimized meta tags and Open Graph sharing
- GitHub and LinkedIn links included
👉 Live App
- ⚛️ React 18
- ⛓ TypeScript
- ⚡ Vite
- 💅 TailwindCSS
- 📊 Custom Stats API with Node.js + Express
- 🔍 SEO-ready with meta tags and OG images
git clone https://github.com/your-username/sorting-visualizer.git
cd sorting-visualizer
npm install
# or
yarn install
# or
pnpm install💡 Make sure you have Node.js (>=18) installed for best compatibility.
npm run devThe app will start locally at http://localhost:5173. You can now interact with the visualizer in real-time and tweak animations or algorithms.
npm run buildThis creates an optimized production build inside the dist/ folder — ready to deploy.
npm run previewPreview your optimized build before deployment.
If you enable the Stats API (Node.js + Express backend):
-
Tracks user interactions like:
- Total sorting runs
- Average array size
- Most-used algorithm
-
The API exposes endpoints like:
-
You can connect it to MongoDB / SQLite for persistence.
If you don’t need stats, the visualizer works entirely client-side.
- 🎨 Edit colors and sizes in
tailwind.config.js - ⚙️ Change animation speed in
config/constants.ts - 🧩 Modify array generation logic in
utils/generateArray.ts
Contributions are always welcome!
-
Fork the repository
-
Create your feature branch
git checkout -b feature/new-algorithm
-
Commit your changes
git commit -m "Added heap sort visualization" -
Push and open a pull request 🚀
This project is licensed under the MIT License — feel free to use, modify, and share.
Yuvraj Karna 🔗 LinkedIn 💻 GitHub