Visual-Sort

This project is a simple web-based application built using React that helps visualize different sorting algorithms, such as Selection Sort, Insertion Sort, and Bubble Sort. The user can select any of the algorithms to see the sorting process step-by-step with a 2-second delay for each comparison. The application also features a colorful and dynamic UI where each number has a different height and color for easy visualization.

Features

• Visualize Sorting Algorithms: Watch how Selection, Insertion, and Bubble Sort algorithms work step-by-step.
• Dynamic UI: Each number has a different color and height, making the sorting process engaging and easy to follow.
• Reset Functionality: Reset the numbers to their original order to try sorting again with different algorithms.
• Interactive: Buttons to trigger each sorting algorithm and a reset option to reload the original array.

How It Works

• Selection Sort: Repeatedly selects the smallest element and swaps it with the first unsorted element.
• Insertion Sort: Iteratively builds a sorted portion by inserting elements into their correct positions.
• Bubble Sort: Repeatedly swaps adjacent elements if they are in the wrong order.

Installation and Usage

1. Clone the repository:

   git clone https://github.com/ThilinaJayamal/visual-sort.git

2. Navigate to the project folder:

   cd visual-sort

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and go to http://localhost:5173 to view the app.

Technologies Used

• React: For building the user interface.
• JavaScript: For implementing sorting algorithms.
• CSS: For styling and animations.

Future Improvements

• Add more sorting algorithms like Merge Sort, Quick Sort, and Heap Sort.
• Provide real-time analysis of time complexity and comparison counts.
• Add speed control to adjust the sorting speed dynamically.

Feel free to customize this further depending on your project and preferences!