Graph Algorithm Visualizer

A full-stack interactive web application for visualizing graph traversal and pathfinding algorithms. The project features a C++ backend for high-performance algorithm execution and a React-based frontend for interactive, step-by-step graphical visualization.

Features

• Algorithms Supported: Breadth-First Search (BFS), Depth-First Search (DFS), and Dijkstra's Algorithm.
• Interactive Canvas: Drag and drop nodes to organize the graph layout dynamically.
• Custom Graph Input: Easily create graphs using a simple text-based edge list.
• Graph Types: Support for directed and undirected edges, as well as weighted edges for Dijkstra.
• Animation Controls: Auto-play, adjust speed, or manually step through the algorithm execution.
• Data Structure Panel: Real-time view of the internal data structure (Queue for BFS, Stack for DFS, Priority Queue for Dijkstra).

Prerequisites

• Backend: C++ Compiler (C++17 recommended).
• Frontend: Node.js and npm (for the React application).

Step-by-Step Installation

1. Backend Setup (C++)

1. Ensure you have a modern C++ compiler installed.
2. Compile the backend server (core.cpp).
3. Run the compiled executable. The backend will start listening on http://0.0.0.0:8080.

2. Frontend Setup (React)

1. Navigate to the frontend directory.

   cd graph-frontend

2. Install the required Node dependencies:

   npm install

3. Start the development server using Vite:

   npm run dev

4. Open your browser and navigate to the local React server URL.

How to Use

1. Create the Graph: Use the sidebar's Graph Editor to define edges. Toggle checkboxes for Directed or Show Weights as needed.
2. Apply Graph: The graph renders on the canvas upon applying. Drag nodes with your mouse to reposition them for better visibility.
3. Select Algorithm: Choose between BFS, DFS, or Dijkstra from the Algorithm Controls, and define a Start Node.
4. Visualize: Once you start the algorithm, the frontend sends a JSON payload with the adjacency list to the backend API at http://localhost:8080/api/algorithm.
5. Control Animation: Use the Play/Pause, Next step, and Previous step buttons to navigate through the algorithm's execution history.

API Architecture

The frontend and backend communicate via a simple REST API.

• Endpoint: POST /api/algorithm
• Request Payload: JSON containing algorithm name, startNode, and adjacencyList (which includes targets and weights).
• Response: A JSON object containing the ordered sequence of steps, where each step includes the currentNode, visitedNodes, and the current state of the dataStructure.

Future Improvements (TODO)

• Additional Algorithms: Implement more graph algorithms such as A* Search (pathfinding), Bellman-Ford (handling negative weights), and Kruskal's or Prim's for Minimum Spanning Trees (MST).
• Save & Export Functionality: Add features to save custom graph layouts locally (via LocalStorage) or export them as JSON and PNG/SVG files.