RoadRescue

RoadRescue is a roadside assistance platform that connects drivers in need with nearby helpers. This aims to reduce response times and costs compared to traditional towing services.

Comment

RoadRescue

Executive Overview

RoadRescue is a peer-to-peer roadside assistance platform that connects drivers in need with nearby helpers who can provide immediate assistance. The platform aims to reduce response times and costs compared to traditional towing services by leveraging a community-driven model similar to rideshare platforms like Uber.

Current Prototype Architecture

Technology Stack

Frontend Framework

  • React 18: Component-based UI library for building the interactive single-page application
  • Babel Standalone: In-browser JSX transformation for rapid prototyping without a build step
  • TailwindCSS: Utility-first CSS framework for responsive, modern UI design

Mapping & Navigation

  • Leaflet.js: Open-source JavaScript library for interactive maps
  • OpenStreetMap: Free, community-driven map tiles
  • Leaflet Routing Machine: Plugin for calculating turn-by-turn directions using the OSRM (Open Source Routing Machine) backend

Deployment

  • Single HTML file prototype - no server required
  • All dependencies loaded via CDN for simplicity and portability

Core Features & Implementation

1. Dual-Mode Interface

The application supports two distinct user roles:

Customer Mode ("I Need Help")

  • Problem selection interface (6 common roadside issues)
  • Helper discovery and matching
  • Real-time helper tracking with ETA
  • Live turn-by-turn navigation display
  • Price transparency before confirming

Helper Mode ("I Can Help")

  • Online/offline toggle for availability
  • Dashboard showing nearby requests with earnings potential
  • Accept/decline functionality
  • Turn-by-turn navigation to customer location
  • Earnings tracking and statistics

2. Mapping & Geolocation

The prototype uses a fixed user location in Syracuse, NY for demonstration purposes. The mapping system includes:

  • Interactive Map Display: Full-screen Leaflet map with custom markers
  • Custom Icons: Differentiated markers for customers (📍), helpers (👤), and professional services (🚛)
  • Route Visualization: Dashed black polylines showing the navigation path
  • Dynamic Camera: Smooth panning that follows the helper's position without disruptive zooming

3. Real-Time Navigation

The navigation system simulates real-world GPS navigation:

  • Route Calculation: Uses OSRM routing service through Leaflet Routing Machine to calculate optimal paths between coordinates
  • Turn-by-Turn Instructions: Extracts and displays directions with icons (⬅️ ➡️ ⬆️ 🎯)
  • Progressive Updates: Directions automatically advance as the helper moves along the route
  • ETA & Distance: Real-time calculations that decrease as progress is made
  • Fallback System: 5-second timeout with simple straight-line routing if the API fails

4. State Management

The application manages complex state using React hooks:

  • Screen navigation (home, problem selection, finding helper, active help, navigation, arrival)
  • Route data (coordinates, instructions, current position)
  • Helper information (selected helper, position, online status)
  • Animation state (current route index, arrival status)

API Integrations (Current Prototype)

OpenStreetMap Tile API

  • Purpose: Renders the base map layer
  • Endpoint: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
  • Usage: Free, no API key required
  • Limitations: Rate limiting on tile requests

OSRM Routing API

  • Purpose: Calculates optimal routes and turn-by-turn directions
  • Integration: Through Leaflet Routing Machine plugin
  • Data Provided: Coordinates array, instruction text, distances, estimated time
  • Limitations: Public instance has rate limits and availability constraints

Built With

Share this project:

Updates