https://github.com/tpstark137/algoviz
Visualize various classic sorting algorithms
https://github.com/tpstark137/algoviz
bubble-sort heapsort insertion-sort merge-sort quick-sort reactjs selection-sort sorting-algorithms
Last synced: 3 months ago
JSON representation
Visualize various classic sorting algorithms
- Host: GitHub
- URL: https://github.com/tpstark137/algoviz
- Owner: tpstark137
- Created: 2024-09-12T13:05:52.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T04:11:25.000Z (9 months ago)
- Last Synced: 2025-01-25T16:13:07.092Z (5 months ago)
- Topics: bubble-sort, heapsort, insertion-sort, merge-sort, quick-sort, reactjs, selection-sort, sorting-algorithms
- Language: JavaScript
- Homepage: https://algo-viz-xi.vercel.app/
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AlgoViz: Interactive Sorting Algorithm Visualizer
## Overview
**AlgoViz** is a Progressive Web App (PWA) developed with ReactJS to visualize various classic sorting algorithms. The tool provides real-time, interactive animations that help users better understand how these algorithms function across multiple platforms.
## Features
- **Interactive animations**: Users can see how sorting algorithms like Bubble Sort, Merge Sort, Quick Sort, and others work step by step.
- **Cross-platform compatibility**: Being a PWA, AlgoViz works seamlessly on desktop and mobile platforms.
- **User control**: Users can control the speed of animations, shuffle the data, and select different array sizes.
- **Educational tool**: Designed to help users understand sorting algorithms in an intuitive, visual manner.
## Tech Stack
- **ReactJS**: For building the user interface and handling state.
- **CSS**: For styling and responsive design.
## Installation and Setup
### Prerequisites
- **Node.js** (v12+)
- **npm** or **yarn**
### Steps to Setup:
1. Clone the repository:
```bash
git clone https://github.com/tpstark137/AlgoViz.git
```
2. Navigate to the project directory:
```bash
cd AlgoViz
```
3. Install dependencies:
```bash
npm install
```
or if using yarn:
```bash
yarn install
```
4. Run the development server:
```bash
npm run dev
```
or with yarn:
```bash
yarn start
```
5. Open your browser and navigate to `http://localhost:3000` to view the application.
## Usage
- Select a sorting algorithm from the dropdown menu.
- Adjust the array size and animation speed using the available controls.
- Press "Sort" to begin the visualization and watch the algorithm work in real-time.
- Use "Reset" to randomize the array again for a new sorting session.
## Supported Sorting Algorithms
- **Bubble Sort**
- **Heap Sort**
- **Insertion Sort**
- **Merge Sort**
- **Quick Sort**
- **Selection Sort**
## Future Enhancements
- Adding more algorithms such as Radix Sort, Counting Sort, etc.
- Improving the UI/UX with additional themes.
- Introducing detailed explanations for each step in the algorithms.
- Adding support for custom user input arrays.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contributing
Contributions are welcome! Please submit a pull request or open an issue if you have suggestions or want to help improve the project.
## Contact
For any queries or issues, reach out at:
- **GitHub**: [tpstark137](https://github.com/tpstark137)