🔢 Sorting Visualizer – React App for Algorithm Animation

An interactive visualizer of popular sorting algorithms built using React. It helps understand how each algorithm works step-by-step by animating array comparisons and swaps in real-time.

---

🚀 Live Demo – Try it on Vercel

---

🛠️ Tech Stack

• React.js – Component-based UI rendering and state management
• JavaScript – Core logic for sorting algorithms and animations
• Bootstrap – Used for styling and responsive layout using class-based utilities

---

📸 Screenshots

---

✨ Features

• 🔁Random Array Generator – Create a fresh set of bars to visualize
• 📏Array Size Control – Adjust size dynamically (up to 350 bars)
• 🧠Sorting Algorithms Included: Merge Sort, Bubble Sort, Insertion Sort etc
• 🎞️Live Animations – Visual step-by-step highlights of comparisons and swaps

---

📁 Folder Structure

sorting-algorithm-visualizer/
├── src/
│ ├── components/
│ ├── sortingAlgorithms/
│ │ └── BubbleSort, HeapSort etc
│ ├── App.css
│ └── App.js

---

⚙️ Setup Instructions

⚡️ For faster local development, consider migrating the codebase to Vite — the src structure remains compatible.

1. Clone the repository

git clone https://github.com/rangari-rani/sorting-visualizer.git

2. Install Dependencies

npm install

3. Start the Development Server

npm start

The app will be available at:
🌐 http://localhost:3000

---

📜 License

MIT License

---

📬 Contact

📫 Connect with me on LinkedIn – Rani Rangari
⭐ If you found this project helpful or insightful, feel free to leave a ⭐!