[Feature]: Bellman–Ford Algorithm Visualizer

[akash205sharma]

---

[Feature]: Bellman–Ford Algorithm Visualizer #12
Status: Open

Description

Implemented a Bellman–Ford Algorithm Visualizer using React and Tailwind CSS to help users understand shortest path computation in graphs with step-by-step interactive visualization.

The visualizer demonstrates the relaxation of edges, distance updates, and negative cycle detection through clear visual cues. Users can generate nodes, add weighted edges, and watch the algorithm traverse the graph in real-time. A dedicated results panel shows updated distances dynamically.

Semver Changes

• Patch (bug fix, no new features)
• ✅ Minor (new features, no breaking changes)
• Major (breaking changes)

Issues

• Closes: [Feature]: Bellman–Ford Algorithm Visualizer #12
• Implements: Bellman–Ford Algorithm Visualizer feature

Checklist

• Added a dedicated Bellman-Ford page and route (/graph/bellman-ford)

• Created BellmanFord.jsx and GraphVisualizer.jsx for step-by-step visualization

• Implemented core algorithm in bellmanFord.js using a generator function for iterative steps

• Built interactive UI with controls:

  • 🎯 Generate Nodes
  • ➕ Add/Edit Edge
  • 🚀 Start Visualization
  • ♻️ Reset Visualization
  • 🧩 Load Example Graph

• Added color-coded highlights for visual feedback:

  • 🟢 Relaxed edges
  • ⚪ Skipped edges
  • 🔴 Negative cycle detection

• Result panel displays node distances dynamically with clear formatting

• Included a dummy demo graph for initial empty state visualization

• Verified integration with existing visualizer routes

• Followed project structure and contributing guidelines

Code of Conduct

• I agree to follow this project's Code of Conduct