A comprehensive web application that solves the Traveling Salesman Problem using three different algorithms and visualizes the results on an interactive map.
- Three TSP Algorithms: Compare Brute Force, Dynamic Programming, and Greedy approaches
- Interactive Map Visualization: View optimal paths on OpenStreetMap using Leaflet.js
- Real-world Distance Calculations: Uses OpenStreetMap Nominatim API for geocoding and OSRM for routing
- Performance Analysis: Compare execution times and solution quality
- Responsive Design: Works on desktop and mobile devices
- Multiple Path Visualization: See all algorithm results simultaneously with different colors
TSP-Solver/
โโโ backend/ # Python FastAPI backend
โ โโโ main.py # FastAPI application entry point
โ โโโ routes.py # API endpoints
โ โโโ services.py # Location services (Nominatim + OSRM)
โ โโโ algorithms/ # TSP algorithm implementations
โ โ โโโ __init__.py
โ โ โโโ brute_force.py # O(n!) brute force solution
โ โ โโโ dp.py # O(nยฒร2โฟ) dynamic programming (Held-Karp)
โ โ โโโ greedy.py # O(nยฒ) nearest neighbor heuristic
โ โโโ requirements.txt # Python dependencies
โ โโโ .env # Environment configuration
โโโ frontend/ # React frontend
โ โโโ public/
โ โ โโโ index.html
โ โโโ src/
โ โ โโโ components/
โ โ โ โโโ CityForm.jsx # City input form
โ โ โ โโโ MapView.jsx # Leaflet map visualization
โ โ โ โโโ ResultsSection.jsx # Algorithm results display
โ โ โโโ App.jsx # Main application component
โ โ โโโ index.js # React entry point
โ โ โโโ index.css # Tailwind CSS styles
โ โโโ package.json # Node.js dependencies
โ โโโ tailwind.config.js # Tailwind CSS configuration
โ โโโ postcss.config.js # PostCSS configuration
โโโ README.md # This file
- Python 3.8+
- Node.js 16+
- npm or yarn
-
Navigate to backend directory:
cd backend -
Create virtual environment (recommended):
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate
-
Install dependencies:
pip install -r requirements.txt
-
Start the backend server:
uvicorn main:app --reload
The API will be available at
http://localhost:8000 -
Verify backend is running: Visit
http://localhost:8000- you should see{"message": "TSP Solver API is running!"}
-
Navigate to frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start the development server:
npm start
The application will open at
http://localhost:3000
-
Enter Cities: Use the input form to add cities you want to visit
- Type city names like "Mumbai", "New York", "London"
- Use the sample city sets for quick testing
- Minimum 2 cities required, maximum 15 recommended
-
Solve TSP: Click "Solve TSP" to run all algorithms
- โค8 cities: All three algorithms will run
- 9-15 cities: Brute force is skipped (too slow)
- >15 cities: Only greedy algorithm runs
-
View Results:
- Map View: Interactive map showing all paths in different colors
- Results Section: Detailed algorithm comparison with execution times
- Performance Analysis: Compare solution quality and speed
- Time Complexity: O(n!)
- Space Complexity: O(1)
- Description: Tests all possible permutations to guarantee optimal solution
- Best For: Small instances (โค8 cities)
- Time Complexity: O(nยฒร2โฟ)
- Space Complexity: O(nร2โฟ)
- Description: Uses bitmask DP to find optimal solution efficiently
- Best For: Medium instances (โค15 cities)
- Time Complexity: O(nยฒ)
- Space Complexity: O(n)
- Description: Fast heuristic that may not find optimal solution
- Best For: Large instances or quick approximations
Solve TSP for given cities.
Request:
{
"cities": ["Mumbai", "Delhi", "Bangalore", "Chennai"]
}Response:
{
"cities": [
{
"name": "Mumbai",
"lat": 19.0760,
"lon": 72.8777,
"display_name": "Mumbai, Maharashtra, India"
}
],
"distance_matrix": [[0.0, 1153.8], [1153.8, 0.0]],
"results": {
"brute_force": {
"algorithm": "Brute Force",
"path": [0, 1, 2, 3],
"distance": 2847.5,
"execution_time": 0.001
}
}
}Health check endpoint.
NOMINATIM_BASE_URL=https://nominatim.openstreetmap.org
OSRM_BASE_URL=http://router.project-osrm.org
API_HOST=0.0.0.0
API_PORT=8000
FRONTEND_URL=http://localhost:3000
- FastAPI: Modern Python web framework
- aiohttp: Async HTTP client for API calls
- Pydantic: Data validation and serialization
- Uvicorn: ASGI server
- React 18: Modern frontend framework
- Tailwind CSS: Utility-first CSS framework
- Leaflet: Interactive maps library
- React-Leaflet: React bindings for Leaflet
- OpenStreetMap Nominatim: Geocoding service
- OSRM: Routing service for distance calculations
-
Backend won't start:
- Check Python version (3.8+)
- Ensure all dependencies are installed:
pip install -r requirements.txt - Verify port 8000 is available
-
Frontend won't start:
- Check Node.js version (16+)
- Clear npm cache:
npm cache clean --force - Delete node_modules and reinstall:
rm -rf node_modules && npm install
-
CORS errors:
- Ensure backend is running on port 8000
- Check CORS configuration in main.py
-
Map not loading:
- Check internet connection
- Verify Leaflet CSS is loading correctly
- Check browser console for errors
-
Cities not found:
- Try more specific city names (e.g., "Mumbai, India")
- Check Nominatim API is accessible
- Some city names might not be in OpenStreetMap database
- Brute Force: Exponential growth - 10! = 3.6M permutations
- Dynamic Programming: Better scaling but still exponential in space
- Greedy: Scales well but solution quality varies
- API Rate Limits: Nominatim and OSRM have usage limits for free tier
- Create new file in
backend/algorithms/ - Implement function with signature:
solve_tsp_algorithm(distance_matrix) -> Dict - Add import and call in
routes.py - Update frontend colors and labels
- Components are in
frontend/src/components/ - Styling uses Tailwind CSS utility classes
- Map customization in
MapView.jsx
This project is open source and available under the MIT License.
- Fork the repository
- Create feature branch:
git checkout -b feature/new-feature - Commit changes:
git commit -am 'Add new feature' - Push to branch:
git push origin feature/new-feature - Submit pull request
For issues and questions:
- Check the troubleshooting section
- Open an issue on GitHub
- Review the API documentation at
http://localhost:8000/docswhen backend is running