Pathfinding Visualizer

Pathfinding Visualizer is an interactive web application designed to help you visualize and understand common pathfinding algorithms such as Dijkstra's, Breadth-First Search, Depth-First Search, and A-star. You can create custom mazes and obstacles to see how these algorithms behave in various scenarios. Built using React.js, TypeScript, CSS, and HTML, this tool is perfect for beginners and experts alike to gain deeper insights into pathfinding algorithms.

Features

• Interactive visualization of popular pathfinding algorithms:
  • Dijkstra's
  • Breadth-First Search
  • Depth-First Search
  • A-star
• Ability to create custom mazes and obstacles
• Intuitive user interface for ease of use
• Responsive design for both desktop and mobile devices

Getting Started

Prerequisites

To run this project, you need to have the following installed on your machine:

• Node.js (version 14.x.x or higher)
• NPM (version 6.x.x or higher)

Installation

1. Clone the repository:

git clone https://github.com/your-username/pathfinding-visualizer.git

2. Change to the project directory:

cd pathfinding-visualizer

3. Install dependencies:

npm install

4. Run the application in development mode:

npm start

The application should now be running on http://localhost:3000/. You can open this URL in your preferred web browser to use the Pathfinding Visualizer.

Usage

1. Select a pathfinding algorithm from the dropdown menu.
2. Click and drag on the grid to create obstacles or mazes.
3. Press the "Visualize" button to start the visualization of the selected algorithm.
4. Press the "Clear Board" button to reset the grid and try another scenario.