🧭 Dijkstra Visualizer

An interactive desktop application for visualizing Dijkstra's shortest path algorithm on weighted graphs, built with Electron and React.

---

📖 Overview

Dijkstra Visualizer is an educational desktop application that demonstrates how Dijkstra's shortest path algorithm explores a weighted graph to determine the shortest path between two vertices.

Instead of displaying only the final result, the application visualizes every intermediate step, making graph traversal and path relaxation easier to understand for students and developers learning graph algorithms.

The project combines algorithm implementation with interactive visualization to improve both learning experience and user interaction.

---

✨ Highlights

• 🧠 Dijkstra's Shortest Path Algorithm
• 📈 Interactive Graph Editor
• 🎬 Step-by-step Visualization
• 🎯 Shortest Path Highlighting
• 🔄 Random Graph Generation
• ⚡ Adjustable Animation Speed
• 📂 Graph Import / Export
• 💻 Cross-platform Desktop Application
• 🌿 Git Flow Development Workflow

---

🏛 Application Architecture

                React UI
                    │
      Graph Visualization Engine
                    │
──────────────────────────────────────
      Graph Data Structure
──────────────────────────────────────
     Dijkstra Algorithm Engine
──────────────────────────────────────
     Electron Desktop Runtime

---

🚀 Core Features

Graph Editor

• Create weighted graphs
• Drag and reposition nodes
• Create and remove edges
• Support directed graphs
• Support undirected graphs

---

Algorithm Visualization

The application visualizes the complete execution process of Dijkstra's algorithm, including:

• Visiting vertices
• Distance updates
• Priority selection
• Edge relaxation
• Final shortest path

Instead of instantly returning the result, each step is animated to illustrate how the algorithm reaches the optimal solution.

---

Interactive Learning

Users can

• Generate random graphs
• Control animation speed
• Replay algorithm execution
• Observe shortest-path updates
• Compare different graph structures

---

Import & Export

Graphs can be saved and loaded, allowing users to continue experiments without rebuilding graph structures.

---

⚙ Algorithm Workflow

Create Graph
      │
      ▼
Choose Start Vertex
      │
      ▼
Initialize Distances
      │
      ▼
Select Minimum Distance Vertex
      │
      ▼
Relax Adjacent Edges
      │
      ▼
Update Visualization
      │
      ▼
Repeat Until Completed
      │
      ▼
Highlight Shortest Path

---

💡 Design Decisions

Why Electron?

Electron allows the application to run as a cross-platform desktop application while leveraging modern web technologies such as React.

Why Interactive Visualization?

Visualizing each execution step helps users understand graph traversal and shortest-path computation more effectively than displaying only the final output.

Why Animation Control?

Different learning speeds require different visualization speeds, so animation timing can be adjusted interactively.

---

🛠 Technology Stack

Frontend

• React
• JavaScript
• HTML5
• CSS3

Desktop

• Electron

Development

• Git
• Git Flow

---

📂 Project Structure

src
├── components
├── algorithms
├── graph
├── hooks
├── utils
├── assets
└── pages

---

🚀 Getting Started

npm install

npm start

---

📸 Screenshots

Add screenshots for:

• Graph Editor
• Running Algorithm
• Shortest Path Result
• Random Graph
• Import / Export

---

🌿 Development Workflow

The project followed the Git Flow branching model throughout development.

• Feature branches
• Pull Requests
• Branch merging
• Version control with Git

This workflow helped maintain code organization and encouraged collaborative software development practices.

---

📚 Learning Outcomes

Through this project, I gained practical experience in:

• Graph data structures
• Dijkstra's shortest path algorithm
• Algorithm visualization
• Interactive desktop application development
• State management for graphical interfaces
• Git Flow and collaborative development

---

📄 License

This project was developed for educational purposes.