A modern web application that allows users to create, visualize, and find paths in custom graphs. This project combines a React frontend with a Flask backend and C++ pathfinding algorithm to provide an interactive graph visualization experience.

• Interactive Graph Creation: Create custom graphs by specifying the number of nodes and edges
• Visual Graph Representation: Beautiful SVG-based graph visualization with animated nodes and edges
• Pathfinding Algorithm: Find all possible paths between any two nodes using DFS (Depth-First Search)
• Real-time Visualization: See the selected path highlighted with animations and visual effects
• User-friendly Interface: Intuitive UI with step-by-step graph creation process
• Responsive Design: Modern, clean interface with smooth animations

• React 19 - Modern React with hooks for state management
• Vite - Fast build tool and development server
• Axios - HTTP client for API communication
• CSS3 - Custom styling with animations and visual effects
• SVG - Scalable vector graphics for graph visualization

• Flask - Python web framework for API endpoints
• Flask-CORS - Cross-origin resource sharing support
• C++ - High-performance pathfinding algorithm implementation

• ESLint - Code linting and formatting
• Vite - Development server and build tool

graph-pathfinding-visualizer/
├── backend/
│   ├── app.py              # Flask API server
│   ├── pathfinder.cpp      # C++ pathfinding algorithm
│   ├── requirements.txt    # Python dependencies
│   └── render.yaml        # Deployment configuration
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── GraphVisualizer.jsx    # Graph visualization component
│   │   │   └── GraphInputForm.jsx     # Graph input form component
│   │   ├── api/
│   │   │   └── api.js                 # API communication utilities
│   │   ├── styles/
│   │   │   └── styles.css             # Custom CSS styles
│   │   ├── App.jsx                    # Main application component
│   │   └── main.jsx                   # Application entry point
│   ├── public/
│   ├── package.json                   # Frontend dependencies
│   └── vite.config.js                # Vite configuration
└── README.md                         # Project documentation

• Node.js (v16 or higher)
• Python 3.8 or higher
• C++ compiler (g++ or clang++)

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment (optional but recommended):

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install Python dependencies:

pip install -r requirements.txt

4. Compile the C++ pathfinding algorithm:

g++ -o pathfinder pathfinder.cpp

5. Start the Flask server:

python app.py

The backend will be running on http://localhost:5000

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The frontend will be running on http://localhost:5173

1. Set Graph Parameters: Enter the number of nodes and edges for your graph
2. Add Edges: Connect nodes by specifying source and destination node IDs
3. Visualize: The graph will be displayed in a circular layout with numbered nodes

1. Select Source Node: Click on the node you want to start from
2. Select Destination Node: Click on the node you want to reach
3. Find Path: Click "Find Path" to discover all possible routes
4. View Results: The shortest path will be highlighted with animations

• Node Selection: Click nodes to select source and destination
• Path Visualization: Selected paths are highlighted with green edges and animations
• Real-time Updates: Graph updates immediately when adding edges or finding paths
• Error Handling: Clear error messages for invalid inputs or connection issues

Finds all possible paths between two nodes in the graph.

Request Body:

{
  "source": "0",
  "target": "3",
  "edges": [
    ["0", "1"],
    ["1", "2"],
    ["2", "3"]
  ]
}

Response:

{
  "paths": [["0", "1", "2", "3"]]
}

• Animated Nodes: Smooth transitions and hover effects
• Path Highlighting: Selected paths are highlighted with green color and animations
• Node States: Different colors for source (green), destination (red), and path nodes (blue)
• Interactive Elements: Clickable nodes with visual feedback
• Responsive Design: Works on different screen sizes

The backend can be deployed to platforms like Render, Heroku, or any Python hosting service. The render.yaml file provides configuration for Render deployment.

The frontend can be built and deployed to static hosting services:

cd frontend
npm run build

The built files will be in the dist directory.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is open source and available under the MIT License.

1. Backend Connection Error: Ensure the Flask server is running on port 5000
2. C++ Compilation Error: Make sure you have a C++ compiler installed
3. Node Modules Error: Run npm install in the frontend directory
4. Port Conflicts: Check if ports 5000 (backend) and 5173 (frontend) are available

• Use browser developer tools to debug frontend issues
• Check Flask server logs for backend debugging
• Ensure CORS is properly configured for local development
• Test the C++ algorithm independently if pathfinding issues occur

Happy Pathfinding! 🗺️