Each grid cell represents a node in a implicit graph.

• Each node has 4 adjacent node
• The distance between adjecent node is 1 unit

• Search algorithms

  • Depth-First Search
  • Breadth-First Search
  • A* Search
  • Dijkstra

• Pattern generation algorithms

  • Basic random
  • Randomized DFS
  • Recursive division
  • Kruskal's Algorithm
  • Prim's Algorithm

• Draw your own wall nodes with mouse

• Drag and drop the source and target nodes

• Control animation speed

Each bar represent a positive integer value and we compare two value to sort in ascending order

• Sorting Algorithms

  • Bubble sort
  • Selection sort
  • Insertion sort
  • Quick sort
  • Merge sort

• Control size of bars

• Generate new random bars

• Control animation speed

Each grid represent a positive interger number

• we check the number is prime or not
• if the number is prime then mark as a circle

• Count the total of prime numbers
• Creating Spiral from the center of grid

The whole square grid represent chess board and A queen can attack the other queens by moving any number of squares vertically, horizontally or diagonally the algorithm place the queen column by column and check the queen attack each other or not...

• Resize the chess board
• Control animation speed

# To install all dependencies of the project.
> npm install

# To run the app on http://localhost:3000.
> npm run start

# To build the bundled app for production on the `build` folder.
> npm run build
> npm run deploy

I took inspirations from the following sources for some of the segments.

• Pathfinder : This Projects That Got Me Into Google
• Sorting : Sorting Visualizer Tutorial (software engineering project)
• Spiral of Primes : Coding a Spiral of Primes
• N-Queen Problem : Algorithm Visualizer

1. implementing algorithm to visualize
2. initialize each cell to object/class
3. JS Promise to run animation asyncronusly
4. array destructure (usestate hooks)
5. reference and copy variable
6. difference between == and === .For example "false===0" it's false
7. For only use React state/useState to re-render dom-elememt. otherwise use global variable to access from all corner
8. writing re-useable code