Sorting Visualizer

An interactive and educational Sorting Visualizer designed to help users deeply understand how different sorting algorithms work. It allows you to observe how elements move, compare, swap, and merge during the sorting process, making complex algorithms easier to learn through visual animation and real‑time statistics. Built using React.js for dynamic rendering and seamless user interaction.**, HTML, and CSS, designed to help users understand and visualize how different sorting algorithms work.

---

📸 Project Screenshot

---

🚀 Features

• 🔄 Generate New Array button to create a new random dataset.
• 📏 Adjustable Array Size (10 to 50 elements).
• ⚡ Control Sorting Speed: Slow, Neutral, Fast.
• 🔍 Visual Step-by-Step Sorting for each algorithm.
• 🔢 Displays Number of Swaps & Steps for the chosen sorting method.
• ⏱️ Time Elapsed Indicator for sorting duration.
• 📘 Pseudo-Code Panel showing the selected algorithm’s logic.
• 📊 Worst, Average & Best Time Complexities + Space Complexity.

---

🧮 Supported Sorting Algorithms

• Bubble Sort
• Selection Sort
• Insertion Sort
• Merge Sort
• Quick Sort

---

🛠️ Tech Stack

Frontend

• 
• 
• 

---

📂 Project Structure

src/
  ├── algorithms/
  │     ├── bubbleSort.js
  │     ├── insertionSort.js
  │     ├── selectionSort.js
  │     ├── mergeSort.js
  │     └── quickSort.js
  ├── components/
  │     ├── Bar.js
  │     └── Bar.css
  ├── App.js
  ├── App.css
  ├── index.js
  └── index.css

---

▶️ Getting Started

1. Clone the Repository

git clone https://github.com/your-username/sorting-visualizer.git
cd sorting-visualizer

2. Install Dependencies

npm install

3. Run the Project

npm start

---

🤝 Contributing

Pull requests are welcome! Feel free to open an issue or suggest improvements.

---

Note: This project was bootstrapped with Create React App (CRA).

📄 License

This project is licensed under the MIT License.