🌟 Pathfinding Algorithm Visualizer

Welcome to the Pathfinding Visualizer - a dynamic, interactive tool that brings algorithms to life! Whether you're a student learning graph theory, a developer curious about React, or just someone who loves watching algorithms paint paths, this project lets you see how Dijkstra, A*, BFS, DFS, and more navigate complex grids.

📝 Summary

This interactive web application demonstrates fundamental pathfinding and maze-generation algorithms through dynamic visualizations. Built with React and TypeScript, it serves as both an educational tool for algorithm enthusiasts and a showcase of modern web development practices. Key achievements include:

• 🧠 Intuitive visualization of algorithmic decision-making
• 🛠️ Robust state management using React Context API
• 🎮 Interactive features like wall drawing and speed control

👥 Development Team

Name	Student ID	Contribution
Le Hung	ITCSIU22271	Team leader: Double check code and algorithm Data Structure: Recursive Division Algorithms: A-Star, Dijkstra
Tran Dang Nhat	ITITIU22115	Data Structure: Binary tree Algorithms: DFS, BFS

🚀 What’s Inside?

Pathfinding Algorithms:

• ▶️ Dijkstra (guaranteed shortest path)
• ▶️ A* (smart heuristic search)
• ▶️ BFS (radial "level-by-level" exploration)
• ▶️ DFS (deep, meandering paths)

Maze Generators:

• 🧩 Recursive Division: Maze-like partitions with walls.
• 🌳 Binary Tree: Quirky, bias-driven mazes.

Features You’ll Love:

• 🖱️ Drag to Draw Walls: Customize your own labyrinth!
• ⏩ Adjustable Speeds: Slow-mo or lightning-fast—your choice.
• 🎨 Color-Coded Clarity: Watch nodes light up as they’re visited, traversed, or turned into paths.

✨ Why This Project?

• Learn Visually: Algorithms feel abstract until you watch them work.
• Experiment Freely: Tweak settings, compare strategies, and see trade-offs in real time.
• Built with Modern Tech: React + TypeScript for clean code, Tailwind CSS for sleek design.

🖼️ Preview

Main webpage of our project

The two maze types:

• Binary tree
• Recursive division

A preview example: After you choose maze type of Binary tree

The four algorithm types

• BFS (Breath First Search)
• DFS (Depth First Search)
• Dijkstra
• A-Star

A preview example: After you choose algorithms type of BFS and run it

🎥 Video Demo

Watch the visualizer in action: Click here to view the video demo

🚀 Quick Start

git clone https://github.com/hungCS22hcmiu/Pathfinding-DSA.git
cd Pathfinding-DSA
npm install
npm run dev

References

The project is inspired by and referenced from the tutorial video: https://www.youtube.com/watch?v=fLpvgCVYjTo