├── .gitignore
├── README.md
├── index.html
├── package.json
├── public
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── logo192.png
├── logo512.png
├── manifest.json
├── mstile-150x150.png
├── robots.txt
└── site.webmanifest
├── src
├── App.css
├── App.jsx
├── Icons
│ └── GithubIcon.jsx
├── SortingVisualizer
│ ├── SortingVisualizer.css
│ ├── Visualizer.jsx
│ └── colorCodes.js
├── algorithms
│ ├── bubblesort.js
│ ├── heapsort.js
│ ├── insertion.js
│ ├── mergesort.js
│ ├── quicksort.js
│ ├── selectionsort.js
│ └── swap.js
├── index.css
└── index.jsx
├── vite.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | *.log
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sorting Algorithm visualizer 🔥
2 |
3 | [](https://app.netlify.com/sites/sortingvisualizerx/deploys)
4 |
5 |
6 | A tool to visualize sorting algorithms built using **ReactJS**
7 | Website is live [here](https://sortingvisualizerx.netlify.app/)
8 |
9 | ## Features
10 | :white_check_mark: Control Visualization Speed
11 | :white_check_mark: Change array size
12 | :white_check_mark: Randomize Input
13 | :white_check_mark: Choose various sorting algorithms
14 |
15 | ## Algorithms to Visualize
16 | :white_check_mark: Bubble Sort
17 | :white_check_mark: Insertion Sort
18 | :white_check_mark: Selection Sort
19 | :white_check_mark: Quick Sort
20 | :white_check_mark: Merge Sort
21 | :white_check_mark: Heap Sort
22 |
23 | ## Set it up locally 🚀
24 | - clone the repo
25 | `git https://github.com/ashirbad29/Sorting-Algorithm-Visualizer.git`
26 |
27 |
28 | - Navigate to that folder
29 | `cd Sorting-Algorithm-Visualizer`
30 |
31 |
32 | - install required dependencies
33 | `npm install`
34 |
35 |
36 | - start the project locally
37 | `npm start`
38 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |