Yathu2007/React-Pathfinding-Visualizer

Overview

This project is an interactive web application that visualizes how classic pathfinding algorithms explore a grid to find the shortest path between two points.

The goal of this project is to build intuition around algorithm behavior (exploration order, optimality, and performance) using step-by-step animations

Preview

Pathfinding Algorithms

Algorithm	Supports Weights	Optimal	Notes
BFS	❌	✅ (unweighted only)	Explores level-by-level
DFS	❌	❌	Explores deeply, not guaranteed shortest path
Dijkstra	✅	✅	Guarantees shortest path with non-negative weights
A*	✅	✅	Uses heuristic to guide search and reduce exploration

Heuristic used for A*: Manhattan distance
$\left( h(n) = |x_n - x_\text{goal}| + |y_n - y_\text{goal}| \right)$

Mud cells introduce higher traversal costs, allowing Dijkstra and A* to demonstrate meaningful differences compared to BFS/DFS.

Features

Configurable start and end nodes
Interactive barriers
- Walls (infinite cost)
- Mud (higher traversal cost)
Weighted grid support
Automatic path reconstruction
Step-by-step animated visualization
Light / Dark mode

Installation Steps

Clone the repository

git clone https://github.com/Yathu2007/React-Pathfinding-Visualizer.git

Change the working directory

cd .\React-Pathfinding-Visualizer\

Install dependencies

npm install

Start the development server

npm start

The app will be available at http://localhost:3000

Built with

React JS
Tailwind CSS
Custom Priority Queue – for Dijkstra & A*
React Icons