/reactjs-sorting-visualizer

Sorting Algorithm Visualizer in React.js

Primary LanguageJavaScriptMIT LicenseMIT

React.js Sorting Algorithm Visualizer

Showcase Image

This project is a React.js (Vite) web application that allows users to visualize various sorting algorithms such as Bubble Sort and Insertion Sort in real-time. It's a fun and educational way to learn about sorting algorithms. The user is able to adjust the speed of the sorting process and read about how the algorithm works.

View Website

Features

  • Various Algorithms: Bubble Sort, Insertion Sort, Selection Sort, Merge Sort, Quick Sort and Radix Sort

  • Visualization: You can see the sorting process visualized in real-time by 3D rendered bars. If it's going too fast, feel free to change the speed!

  • Explanation: Upon seeing the visualization, you also get a useful explanation how the algorithm works

  • Comparison: Besides the explanation, the user is able to compare the time and space complexity of the various algorithms

Getting Started

Prerequisites

  • Node.js (version 12 or higher)

Installation

  1. Clone the repository to your local machine:
git clone https://github.com/0xBitBuster/reactjs-sorting-visualizer
  1. Install the dependencies:
npm install

Usage

To start the server, run:

npm run dev

By default, the web application runs on http://localhost:5173

Contributing

Contributions are welcome! If you have a feature request or bug report, please open an issue. If you want to contribute code, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.