December-software-project/sort-algo

[![CircleCI](https://circleci.com/gh/December-software-project/sort-algo/tree/main.svg?style=shield)](https://circleci.com/gh/December-software-project/sort-algo/tree/main)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Netlify Status](https://api.netlify.com/api/v1/badges/2364c0d1-0366-4601-8ce0-1ac2084a5020/deploy-status)](https://app.netlify.com/sites/algosort/deploys)
[![Maintainability Status](https://api.codeclimate.com/v1/badges/b7464f445c1a7f5de797/maintainability)](https://codeclimate.com/github/December-software-project/sort-algo/maintainability)

# Sort-Algo

Welcome to Sort-Algo, a sorting visualiser app which helps you to learn and understand sorting algorithms through
interacting animations as well as explanations. <br />
<br />
We built this app as we feel there is a lack of visual representation when students learn sorting algorithms.
Hence, we would like to provide future students who are learning these sorting algorithms a platform to visualize such
algorithms with step by step explanations. We hope that you enjoy learning and playing around with this visualization
tool. Check out our app [here!](https://algosort.netlify.app/)

## Features preview

<p align="center"><strong>Bubble Sort preview</strong></p>

<img src="images/BubbleSort.gif" alt="" />

<br/>

<p align="center"><strong>Counting Sort preview</strong></p>

<img src="images/CountingSort.gif" alt="" />

<br/>

<p align="center"><strong>Bucket Sort preview</strong></p>

<img src="images/bucketsort.gif" alt="" />

<br/>

<br/>

### Choose the algorithm you want

There are a wide range of algorithms, each with their complexity evaluations and code in `Java`
, `JavaScript`, `Python` and `C/C++`.

Available algorithms:

* Bubble Sort
* Insertion Sort
* Selection Sort
* Merge Sort
* Quick Sort
* Heap Sort
* Shell Sort
* Counting Sort
* Radix Sort
* Bucket Sort

### Adjust the speed of the visualizer and array size

There are sliders to adjust the size and speed of the visualizer. The speed ranges from 1-10 and size ranges from 5-25
or 1-10 depending on the algorithm selected.

### Start the animation

There is a play button which starts the animation. Additionally, at any point in time, you can also pause the animation. Once
the animation is completed, the play button will be replaced with a replay button.

### Step tracing

There is a step tracing feature provided whereby pressing the arrow buttons will allow you to execute the animation step
by step to fully understand how the algorithm works through visual animation and a description of what is happening at
each step.

## Project structure

The current project structure and its important directories are shown below:

```
SortAlgo
└─public/
└─src/
  └─__test__/
  └─app/
  └─component/
  └─contactus/
  └─home/
  └─howitworks/
  └─team/
  └─visualizer/
  └─index
```

## Collaboration

If you like this project, and wish to contribute more to it, do contact us through the form in the
 `Contact Us` section from the [website](https://algosort.netlify.app/).