Update README.md

Author: GreenMarioh

README.md

@@ -1,47 +1,78 @@
-# 🛤️ Unique Paths II Visualizer
+# 🧽 Unique Paths Visualizer
 
-An interactive web application that visualizes the **Unique Paths II** dynamic programming problem with obstacle support.
+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.
 
-## ✨ Features
+### 🌐 Live Demo
 
-- **🖱️ Click & Drag**: Paint obstacles by clicking and dragging across the grid
-- **🎬 Path Animation**: Watch random valid paths being traced step-by-step
-- **📊 DP Values**: Toggle display of dynamic programming computation values
-- **📱 Responsive Design**: Works on desktop and mobile devices
-- **⚡ Real-time Updates**: Instant recalculation as you modify the grid
+> _https://greenmarioh.github.io/unique-paths-visualizer/_
 
-## 🚀 Demo
+---
+
+## 📌 Features
 
-Visit the live demo: [https://GreenMarioh.github.io/unique-paths-visualizer/](https://GreenMarioh.github.io/unique-paths-visualizer/)
+- 🧠 **Unique Paths II (DP)**: Based on [LeetCode - Unique Paths II](https://leetcode.com/problems/unique-paths-ii/description/), visualize the total number of paths avoiding obstacles.
+- 📏 **Shortest Path Mode**: Visualize the shortest path between two draggable points using **Dijkstra's Algorithm** with 8-directional movement.
+- 📆 Animated step-by-step path traversal
+- 🧱 Click-and-drag to create obstacles on the grid
+- 🔄 Adjustable grid size (up to 12×12)
+- 👁️ Option to show/hide DP table values
+- 💡 Clear, responsive UI with Tailwind CSS
 
-## 🎮 How to Use
+---
 
-1. **Grid Setup**: Adjust rows and columns using the input fields
-2. **Add Obstacles**: Click and drag to paint red obstacle cells
-3. **Remove Obstacles**: Drag over existing obstacles to erase them
-4. **Animate Path**: Click "Show Random Path" to see a path traced with smooth animation
-5. **View DP Values**: Toggle "Show Path Counts" to see the computed values
+## 🚀 Getting Started
 
-## 🧮 Algorithm
+### 1. Clone the Repository
 
-This visualizer demonstrates the **Unique Paths II** problem:
+```bash
+git clone https://github.com/GreenMarioh/unique-paths-visualizer.git
+cd unique-paths-visualizer
+```
 
-- **Input**: An `m × n` grid with obstacles
-- **Goal**: Count unique paths from top-left to bottom-right
-- **Constraints**: Can only move right or down, obstacles block paths
-- **Solution**: Dynamic programming with obstacle handling
+### 2. Install Dependencies
 
-## 🛠️ Technical Details
+```bash
+npm install
+# or
+yarn install
+```
 
-- **Frontend**: React with Hooks
-- **Styling**: Tailwind CSS
-- **Animations**: CSS transitions with JavaScript timing
-- **Deployment**: GitHub Pages
+### 3. Start Development Server
 
-## 📜 License
+```bash
+npm run dev
+# or
+yarn dev
+```
 
-MIT License - feel free to use this code for educational purposes.
+Open [http://localhost:3000](http://localhost:3000) to view the app in your browser.
 
 ---
 
-_Enhanced visualization of classic dynamic programming concept._
+## 🖼️ Screenshots
+
+> _You can add screenshots or gifs here showcasing the DP mode, dragging Start/End, etc._
+
+---
+
+## 🛠️ Built With
+
+- [React](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Vite](https://vitejs.dev/)
+
+---
+
+## 📄 License
+
+MIT License. Feel free to fork and improve!
+
+---
+
+## 🙇‍♂️ Author
+
+Created with ❤️ by [@GreenMarioh](https://github.com/GreenMarioh)
+
+👉 View the source code:  
+🔗 [https://github.com/GreenMarioh/unique-paths-visualizer](https://github.com/GreenMarioh/unique-paths-visualizer)