PathFinding Visualizer

I built this application because when I was studying Dijkstra and A* Search algorithms I liked how it worked and wanted to visualize them. So i put up my React and looking up at Google(:p) skills together to build up this Pathfinding visualizer.
Heroku Link: https://desolate-everglades-02998.herokuapp.com/

Algorithms:

Weighted

Dijkstra: the father of pathfinding algorithms; guarantees the shortest path.

A* Search: uses heuristics to guarantee the shortest path much faster than Dijkstra's Algorithm.

Greedy Best First Search: a faster, more heuristic-heavy version of A*; does not guarantee the shortest path.

Unweighted

Breadth First Search: similar to dijkstra but works only for unweighted graphs; guarantees the shortest path

Depth First Search: a really bad algorithm for pathfinding, does not guarantee the shortest path

DropDown menu of Algorithms

Obstacles:

Wall: have a distance of Infinity

Weighted Nodes: have a distance of 15 units

DropDown menu of Obstacles

Basic Controls:

The start node is arrow, finish node is circle, walls are dark blue and weighted nodes are represented using locks.
All other nodes are free nodes with default distance 1.

To change positions of nodes:

• Start: click and drag on the start node to change its position
  
• Finish: click and drag on the finish node to change its position
  
  

To create obstacles:

• Wall: Select option Wall from DropDown List and drag over the grid to create walls
  
• Weighted Nodes: Select option Weighted Node from DropDown List and drag over the grid to create weighted nodes
  
  

To delete obstacles:

• same as creation
  

Running Instructions:

1. Clone the repository
   git clone https://github.com/Deep512/PathFinding-Visualizer
   
   

2. Install npm
   sudo apt install npm
   
   

3. Install the required dependencies
   npm install
   
   

4. Start the react-scripts
   npm start
   

Have Fun!

a project by Deep Dhanuka