This project is a visualization tool for different sorting algorithms using React and TypeScript. See it live here.
The project has the following folder structure:
/
│ package-lock.json
│ package.json
│
├───public
│ index.html
│ manifest.json
│ robots.txt
│
└───src
│ App.test.tsx
│ App.tsx
│ index.tsx
│ logo.svg
│ react-app-env.d.ts
│ reportWebVitals.ts
│ setupTests.ts
│
├───Components
│ ├───NavBar
│ │ NavBar.tsx
│ │
│ └───VisualArray
│ styles.css
│ VisualArray.tsx
│
├───Sorts
│ BubbleSort.ts
│ BucketSort.ts
│ CountingSort.ts
│ HeapSort.ts
│ index.ts
│ InsertionSort.ts
│ MergeSort.ts
│ QuickSort.ts
│ RadixSort.ts
│ QuickInsertSort.ts
│
└───Utility
├───Animator
│ Animator.ts
│
└───Random
Random.ts
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The following sorting algorithms are currently supported:
- Bubble Sort
- Bucket Sort
- Counting Sort
- Heap Sort
- Insertion Sort
- Merge Sort
- Quick Sort
- Radix Sort
- QuickInsert Sort
Contributions are welcome! If you would like to add a new sorting algorithm or make any other improvements to the project, please feel free to submit a pull request.