🧽 Unique Paths Visualizer

A visual, interactive React application to explore dynamic programming (DP) and shortest path algorithms. Easily toggle between Leetcode-style Unique Paths II and Dijkstra's shortest path, build your own grid, and visualize the paths with animations.

🌐 Live Demo

https://greenmarioh.github.io/unique-paths-visualizer/

📌 Features

🧠 Unique Paths II (DP): Visualizes total valid paths using a dynamic programming table. Implements logic based on LeetCode - Unique Paths II.
📏 Shortest Path Mode: Uses a modified Dijkstra’s algorithm that supports 8-directional movement (diagonals included) for pathfinding.
👡️ Interactive Grid Editor:
- Click or drag to add/remove obstacles.
- In shortest path mode, drag Start (🟩) and End (🟦) nodes freely.
🧮 DP Table Rendering: Optionally display the number of ways to reach each cell in unique paths mode.
🔁 Path Animation: Each cell in a computed path lights up sequentially to demonstrate traversal order.
📀 Resizable Grid: Supports grids from 1×1 to 12×12 with smooth resets and state preservation.
⚡ Fast and reactive UI thanks to React + Vite + Tailwind.

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/GreenMarioh/unique-paths-visualizer.git
cd unique-paths-visualizer

2. Install Dependencies

npm install
# or
yarn install

3. Start Development Server

npm run dev
# or
yarn dev

Then open: http://localhost:3000

🛠️ Built With

⚛️ React — UI component library
🔆 TypeScript — Typed JavaScript for safety and tooling
🎨 Tailwind CSS — Utility-first CSS framework
⚡ Vite — Lightning-fast build tool and dev server
📦 Modular Architecture — Reusable components (GridCell, InfoCard, etc.)
📁 Single-File Visualizer Component — Main logic lives in UniquePathsVisualizer.tsx for simplicity and portability

📄 License

MIT License. Feel free to fork and improve!

🚇️ Author

Created with ❤️ by @GreenMarioh

👉 View the source code:
🔗 https://github.com/GreenMarioh/unique-paths-visualizer