Skip to content

rheamordani/StepRight

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Walking Buddy - Safe Route Finder

A React-based web application that helps users find the safest walking routes through Berkeley by analyzing streetlight density and providing multiple route options.

Features

  • 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

Tech Stack

  • 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

Setup Instructions

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn
  • Google Maps API Key
  • Berkeley Open Data API Token

Installation

  1. Clone the repository

    git clone <your-repo-url>
    cd calhacks
  2. Backend Setup

    cd backend
    npm install
  3. Frontend Setup

    cd ../frontend
    npm install

Environment Variables

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_here

Note: The Google Maps API key is exposed since this is a private repository. In production, use environment variables or a secure key management system.

Running the Application

  1. Start the Backend Server

    cd backend
    npm start

    The backend will run on http://localhost:3001

  2. Start the Frontend Development Server

    cd frontend
    npm start

    The frontend will run on http://localhost:3000

  3. Open your browser and navigate to http://localhost:3000

API Endpoints

Backend Routes

  • POST /api/streetlights/best-path - Get streetlight data and route analysis
  • POST /api/directions - Get multiple routes from Google Routes API
  • POST /api/place-details - Get place details from Google Places API
  • GET /api/streetlights/nearby - Get nearby streetlights

Request/Response Examples

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
  }'

How It Works

Route Safety Calculation

  1. Streetlight Data: Fetches streetlight locations from Berkeley Open Data API
  2. Route Generation: Uses Google Routes API to generate multiple walking routes
  3. Safety Analysis: Counts streetlights within 50 meters of each route
  4. Route Ranking: Sorts routes by streetlight count (safest first)

Frontend Features

  • 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

Troubleshooting

Common Issues

  1. "Failed to fetch" Error

    • Make sure the backend server is running on port 3001
    • Check that all dependencies are installed (npm install)
  2. "Route not found" Error

    • Verify API keys are correctly set in the .env file
    • Ensure the locations.db file exists in the backend directory
  3. 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)
  4. Port conflicts

    # Kill processes on ports 3000 and 3001
    lsof -ti:3000 | xargs kill -9
    lsof -ti:3001 | xargs kill -9

Debugging

  • Backend logs: Check terminal running npm start in backend directory
  • Frontend logs: Check browser developer console (F12)
  • API testing: Use curl commands above to test endpoints directly

Project Structure

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

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • Berkeley Open Data Portal for streetlight data
  • Google Maps Platform for routing and geocoding services
  • Material-UI for the component library

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors