🧭 Pathfinding Visualizer – Interactive Algorithm Playground

React Parcel Algorithms UI License: MIT Status Built with ❤️

A simple and interactive tool to explore how pathfinding algorithms work. Built with React and Parcel, it lets you visualize popular algorithms like Dijkstra, A*, BFS, and DFS on a responsive, customizable grid. You can add walls, drag start/end nodes, and see how the algorithm finds the shortest path in real-time.

Click. Drag. Visualize. Done.

• Visualize Dijkstra, A*, BFS, and DFS algorithms
• Click to add or remove walls on the grid
• Drag start and end nodes to reposition them
• Switch algorithms and re-run instantly
• Enjoy a clean, responsive UI with smooth interaction

Language:
JavaScript (ES6+)

Framework & Bundler:
• React — component-based UI
• Parcel — blazing fast bundler

Core Logic:
• Custom implementations of Dijkstra, A*, BFS, and DFS
• Grid utilities for pathfinding logic

Interface & Styling:
• Responsive layout with HTML & CSS
• Clean UI built using React components

pathfinding-visualizer/
├── public/ # Static assets
├── src/
│ ├── algorithms/ # Dijkstra, A*, BFS, DFS implementations
│ ├── components/ # React components
│ ├── utils/ # Grid logic 
│ ├── App.jsx # Main App component
│ ├── index.jsx # Entry point
│ └── index.css # Styling
├── package.json
├── .gitignore
├── README.md

1. Clone the repository

git clone https://github.com/bhmuxkan/pathfinding-visualizer.git
cd pathfinding-visualizer

2. Install dependencies

npm install

3. Start the development server

npm start

4. Open in browser

http://localhost:1234

If you love to build something, or just want to say hi — I’d love to connect.

• LinkedIn – Muskan