https://github.com/biplo12/sorting-algorithms
Visualize sorting algorithms in action.
https://github.com/biplo12/sorting-algorithms
react tailwindcss typescript vite
Last synced: about 2 months ago
JSON representation
Visualize sorting algorithms in action.
- Host: GitHub
- URL: https://github.com/biplo12/sorting-algorithms
- Owner: Biplo12
- Created: 2023-06-17T09:01:52.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-25T11:45:42.000Z (over 1 year ago)
- Last Synced: 2025-02-07T02:39:05.318Z (4 months ago)
- Topics: react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://sorting-algorithms-brown.vercel.app
- Size: 94.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Sorting Algorithms Visualization
This project is a simple representation of how various sorting algorithms work. It provides a visual demonstration of how different algorithms sort an array of elements. The web application displays a graphical representation of the array as bars, and users can select different sorting algorithms to observe their effects on the array.
### Features
- Randomly generated array represented as bars
- Buttons for selecting popular sorting algorithms
- Dynamic visualization of sorting algorithm execution
- Regenerate array button to generate a new random array
- Stop button to halt the sorting process
### Technologies Used
The project is built using the following technologies:
- Vite: A fast web development build tool that provides a modern development workflow.
- Tailwind CSS: A utility-first CSS framework used for styling and layout.
### Getting Started
To use this project locally, follow these steps:
1. Clone the repository to your local machine or download the source code as a ZIP file.
2. Open a terminal and navigate to the project directory.
3. Install the dependencies by running the command `yarn install`.
4. Start the development server with the command `yarn dev`.
5. Open your web browser and visit the URL provided by the development server.
### Usage
Once the web page is loaded, you can interact with the application as follows:
1. **View the Initial Array**: The array is represented by bars on the screen, where each bar's height corresponds to the value in the array.
2. **Choose a Sorting Algorithm**: Click on any of the sorting algorithm buttons (e.g., "Selection Sort," "Bubble Sort," etc.) to initiate the sorting process using the selected algorithm.
3. **Watch the Visualization**: The bars will animate as the sorting algorithm progresses, providing a visual representation of how the algorithm rearranges the elements in the array.
4. **Regenerate Array**: If you wish to generate a new random array, click the "Regenerate Array" button. The bars will update to reflect the newly generated array, and you can select a sorting algorithm to observe its execution on the new array.
5. **Stop Sorting**: At any point during the sorting process, you can click the "Stop" button to halt the algorithm's execution. This will reload the page and generate a new random array.
### Supported Sorting Algorithms
The project currently supports the following popular sorting algorithms:
- Selection Sort
- Bubble Sort
- Insertion Sort
- Merge Sort
- Bogo Sort
- Quick Sort
- Heap Sort
- Counting Sort
- Radix Sort
- Bucket Sort
Feel free to explore the project, experiment with different sorting algorithms, and observe how they sort the array in real-time.
### License
This project is licensed under the MIT License.
### Acknowledgments
The project draws inspiration from various online resources and tutorials on sorting algorithm visualization. Some of the resources that helped me build this project are listed below:
- [Geeks For Geeks](https://www.geeksforgeeks.org/sorting-algorithms/)