A React-based web application that helps users find the safest walking routes through Berkeley by analyzing streetlight density and providing multiple route options.
- Interactive Google Maps with route visualization
- Streetlight Analysis - Routes ranked by streetlight count for safety
- Address Search - Google Places Autocomplete integration
- Quick Location Selection - Preset Berkeley locations
- Share Location - Share your route with friends for safety
- Emergency Button - Quick 911 call functionality
- Multiple Routes - Google Routes API provides alternative paths
- Frontend: React, Material-UI, Google Maps JavaScript API
- Backend: Node.js, Express.js
- APIs: Google Maps Routes API, Google Places API, Berkeley Open Data API
- Node.js (v14 or higher)
- npm or yarn
- Google Maps API Key
- Berkeley Open Data API Token
-
Clone the repository
git clone <your-repo-url> cd calhacks
-
Backend Setup
cd backend npm install -
Frontend Setup
cd ../frontend npm install
Create a .env file in the backend directory with the following API keys:
# Google Maps API Key (for routes, geocoding, places)
GOOGLE_MAPS_API_KEY=AIzaSyByxk8xDC3PJ7KYD3XKkKVdcVUqI_iRRiY
# Berkeley Open Data API Token (for streetlight data)
BERKELEY_APP_TOKEN=your_berkeley_token_hereNote: The Google Maps API key is exposed since this is a private repository. In production, use environment variables or a secure key management system.
-
Start the Backend Server
cd backend npm startThe backend will run on
http://localhost:3001 -
Start the Frontend Development Server
cd frontend npm startThe frontend will run on
http://localhost:3000 -
Open your browser and navigate to
http://localhost:3000
POST /api/streetlights/best-path- Get streetlight data and route analysisPOST /api/directions- Get multiple routes from Google Routes APIPOST /api/place-details- Get place details from Google Places APIGET /api/streetlights/nearby- Get nearby streetlights
Get Streetlight Data:
curl -X POST http://localhost:3001/api/streetlights/best-path \
-H "Content-Type: application/json" \
-d '{
"startLat": 37.8703,
"startLng": -122.2708,
"endLat": 37.8666,
"endLng": -122.3171,
"maxRoutes": 3
}'Get Directions:
curl -X POST http://localhost:3001/api/directions \
-H "Content-Type: application/json" \
-d '{
"startLat": 37.8703,
"startLng": -122.2708,
"endLat": 37.8666,
"endLng": -122.3171
}'- Streetlight Data: Fetches streetlight locations from Berkeley Open Data API
- Route Generation: Uses Google Routes API to generate multiple walking routes
- Safety Analysis: Counts streetlights within 50 meters of each route
- Route Ranking: Sorts routes by streetlight count (safest first)
- Automatic Pathfinding: Routes are calculated automatically when both start and end locations are selected
- Interactive Map: Click on routes to highlight them, click again to show all routes
- Real-time Updates: Streetlight counts and route options update dynamically
- Responsive Design: Works on desktop and mobile devices
-
"Failed to fetch" Error
- Make sure the backend server is running on port 3001
- Check that all dependencies are installed (
npm install)
-
"Route not found" Error
- Verify API keys are correctly set in the
.envfile - Ensure the
locations.dbfile exists in the backend directory
- Verify API keys are correctly set in the
-
No routes showing
- Check browser console for JavaScript errors
- Verify Google Maps API key has the required permissions (Routes API, Places API, Maps JavaScript API)
-
Port conflicts
# Kill processes on ports 3000 and 3001 lsof -ti:3000 | xargs kill -9 lsof -ti:3001 | xargs kill -9
- Backend logs: Check terminal running
npm startin backend directory - Frontend logs: Check browser developer console (F12)
- API testing: Use curl commands above to test endpoints directly
calhacks/
├── backend/
│ ├── app.js # Main Express server
│ ├── server.js # Server startup
│ ├── locations.db # SQLite database
│ ├── package.json # Backend dependencies
│ └── .env # Environment variables
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── SimplePathfindingApp.js # Main app component
│ │ │ ├── GoogleMap.js # Map component
│ │ │ ├── AddressInput.js # Search component
│ │ │ └── ...
│ │ └── ...
│ ├── public/
│ │ └── index.html # HTML template
│ └── package.json # Frontend dependencies
└── README.md
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Berkeley Open Data Portal for streetlight data
- Google Maps Platform for routing and geocoding services
- Material-UI for the component library