https://github.com/sadanandpai/algo-visualizers

Algorithms Visualizers
https://github.com/sadanandpai/algo-visualizers

algorithms bfs datastructures dfs javascript maze-generator pathfinder react reactjs redux redux-toolkit sorting sorting-algorithms

Last synced: about 1 month ago
JSON representation

Algorithms Visualizers

Host: GitHub
URL: https://github.com/sadanandpai/algo-visualizers
Owner: sadanandpai
License: mit
Created: 2021-06-05T05:45:43.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-04-11T04:41:17.000Z (about 1 year ago)
Last Synced: 2025-04-10T00:42:19.089Z (about 1 month ago)
Topics: algorithms, bfs, datastructures, dfs, javascript, maze-generator, pathfinder, react, reactjs, redux, redux-toolkit, sorting, sorting-algorithms
Language: TypeScript
Homepage: https://sadanandpai.github.io/algo-visualizers/
Size: 4.24 MB
Stars: 703
Watchers: 6
Forks: 169
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  Algorithms Visualizers

  Responsive visualizers built using React for popular algorithms

  

    

    

    

  


[![built with Codeium](https://codeium.com/badges/main)](https://codeium.com)













Visualize the

algorithms



---

### Algorithms Visualizers

This repo helps in learning popular algorithms by visualization

  Sorting Visualizer




Helps to

- understand the working of sorting algorithm

- check total swaps required

- check total comparisions

- compare algorithms side by side

- know the time taken (time is just an approximate unit for comparision)

Features

- Sort any given array of 3 digits positive integers

- Alter the speed of execution

- Start, pause and reset the execution

- Generate random array of numbers of sorting

Concepts

- Animations are done using pure CSS and uses

  [FLIP principle](https://aerotwist.com/blog/flip-your-animations/)

- Flex is used for array display and manipulation of positions (flex order

  property)

- JavaScript async generators are used heavily for the controlled execution of

  algorithms




  Path finder




Helps to

- understand working of different maze generation algorithms

- understand working of different path finding algorithms

- check the visits, path length and time taken

Features

- Build any kind of custom 2D maze

- Alter the speed of execution

- Generate infinite mazes

- Move the targets in live to see the changes




### Technologies

Production libraries

- [React](https://react.dev/) (Frontend Library)

- [Redux Toolkit](https://redux-toolkit.js.org/) (State management)

- [React Router](https://reactrouter.com/en/main/) (Router)

- [Lucide](https://lucide.dev/) (Icons pack)

- [Sonner](https://sonner.emilkowal.ski/) (Toast)

- [React-use](https://github.com/streamich/react-use) (Custom hooks)

- [React Joyride](https://react-joyride.com/) (App tour)

- [React Switch](https://react-switch.netlify.app/) (Switch)

Build libraries

- [Sass](https://sass-lang.com/) (CSS compiler)

- [Vite](https://vitejs.dev/) (Bundler)

- [Vitest](https://vitest.dev/) (Unit test)

- [Cypress](https://www.cypress.io/) (E2E test)




### Run in your local

- `git clone https://github.com/sadanandpai/algo-visualizers.git`

- `cd algo-visualizers`

- `npm install`

- `npm run dev`

---

### Contributing Guide

If you want to contribute, improve or fix bugs in this repo, then check out the

[Contributing Guide](./CONTRIBUTING.md) 





### License

This repository is MIT licensed. [Read more](./LICENSE)