https://github.com/mohitjaisal/algoviz
Its a visualizer for sorting algorithms to see how they work with real values. It's implemented with React.js, some minimal material UI, and sorting algorithms in Javascript.
https://github.com/mohitjaisal/algoviz
algorithm algorithms bubble-sort dsa hacktoberfest hacktoberfest-accepted javascript mergesort nodejs quicksort sorting-algorithms visualizer
Last synced: about 2 months ago
JSON representation
Its a visualizer for sorting algorithms to see how they work with real values. It's implemented with React.js, some minimal material UI, and sorting algorithms in Javascript.
- Host: GitHub
- URL: https://github.com/mohitjaisal/algoviz
- Owner: mohitjaisal
- License: mit
- Created: 2022-07-20T03:47:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T11:52:23.000Z (over 2 years ago)
- Last Synced: 2023-08-03T12:55:24.165Z (over 2 years ago)
- Topics: algorithm, algorithms, bubble-sort, dsa, hacktoberfest, hacktoberfest-accepted, javascript, mergesort, nodejs, quicksort, sorting-algorithms, visualizer
- Language: JavaScript
- Homepage: https://algoviz.mohitjaisal.com
- Size: 389 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AlgoViz
It's a visualizer for sorting algorithms to see how they work with real values. It's implemented with React.js, some minimal material UI, and sorting algorithms in Javascript.
## Features
- **Algorithm Visualization:** Explore a wide range of algorithms and data structures through interactive visualizations.
- **Step-by-Step Explanation:** Understand each step of the algorithm with detailed explanations alongside the visual representation.
- **Custom Inputs:** Test algorithms with your own input values to see how they behave in different scenarios.
- **Real-time Execution:** Watch the algorithm in action as it processes your input data and generates results.
- **Code Snippets:** Access the source code of each algorithm and data structure for further study.
- **Responsive Design:** Enjoy a seamless experience on both desktop and mobile devices.
## Installation
- To run AlgoViz locally on your machine, follow these steps:
- Clone the repository:
```bash
git clone https://github.com/mohitjaisal/AlgoViz.git
```
- Navigate to the project directory:
```bash
cd AlgoViz
```
- Install the dependencies:
```bash
npm install
```
* Set up the environment variables:
* Rename the .env.example file to .env.
* Fill in the required values for the environment variables.
- Start the development server:
```bash
npm start
```
> Open your browser and visit http://localhost:3000 to access AlgoViz.
## Usage
* Once you have the application up and running, here are a few pointers on how to use AlgoViz:
* Browse the available algorithms and data structures from the home page.
* Click on an algorithm to view its visualization and explanation.
* Follow the step-by-step breakdown to understand how the algorithm works.
* Use the custom input feature to provide your own data for the algorithm.
* Watch the real-time execution of the algorithm and observe how it processes your input.
* Access the source code snippets to study the implementation details.
## Deployment
```bash
npm run build
```
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
> See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
## Contributing
* Contributions to AlgoViz are encouraged and appreciated! If you want to contribute to this project, please follow these steps:
* Fork the repository.
* Create a new branch for your feature or bug fix.
* Make your changes and commit them with descriptive messages.
* Push your changes to your forked repository.
* Submit a pull request to the main repository, explaining your changes.
> Please ensure that your contributions align with the project's goals and adhere to the existing code style.