Case Study

WalkRide

A route planner that mixes walking, Citi Bike, and the subway into one ranked trip.

24hr Build ChatPRD → Lovable → Mapbox + Google Maps APIs → Supabase → PostHog

The Problem

Every mapping app forces you to pick one mode: walk, bike, or transit. Google Maps will give you a subway route or a biking route, but it won't suggest biking seven minutes between two subway stations to shave ten minutes off your trip. In a city like New York, where Citi Bike docks are everywhere, that in-between option is often the fastest way to get around.

The Insight

People already do this intuitively. They hop off the train, grab a Citi Bike, ride a few blocks, dock it, and walk the rest. The problem isn't that people don't want multimodal routes, it's that no tool actually generates them. If you let users say "I'm willing to walk up to 10 minutes and bike up to 15," you can combine walking, biking, and transit segments into a single route that's faster than any one mode alone.

The Solution

WalkRide is a mobile-first route planner where you set your walking and biking tolerance, choose between Citi Bike and your own bike, and get back ranked route options that mix all three modes. Pick a route and the app guides you step by step with GPS tracking, live station availability, and color-coded segments for walking, biking, and transit.

How It Works

  1. Step 01

    Set your limits

    Tell the app how much walking and biking you're willing to do before the route search begins.

  2. Step 02

    Pull route options

    WalkRide fetches walking, biking, and transit segments at the same time instead of waiting on one source at a time.

  3. Step 03

    Rank mixed trips

    The app composes those segments into realistic multimodal routes and sorts them by total trip time.

  4. Step 04

    Navigate the trip

    Once you choose a route, the UI switches into live navigation with segment-by-segment guidance.

The Product

Route planning interface with effort preference sliders and bike type selection
Route results with color-coded path on the map and ranked options sorted by duration

Architecture

Frontend

React 18 with TypeScript, Vite, Tailwind CSS, and shadcn/ui. TanStack Query handles the fetch and cache layer.

Mapping Layer

Mapbox GL handles the map, geocoding, autocomplete, and walk or bike directions, with subway segments colored to match the MTA.

Transit Data

Google Maps Directions runs through a Supabase edge function and returns subway, bus, and ferry options with transfer details.

Real-Time Data

The Citi Bike GBFS feed adds live station and dock availability, so the route logic can suggest something you can actually use.

How the Routing Engine Comes Together

Inputs
Mapbox walk and bike Directions, durations, and route geometry for the street-level pieces.
Google transit Subway, bus, and ferry legs with transfers and timing.
Citi Bike live feed Station locations plus whether bikes and docks are actually available.
Composer
Route ranker Combines those segments into mixed trips, filters out bad combinations, and sorts the rest by total travel time.
Output
Ranked route list Users see the fastest viable trips first instead of manually comparing three different apps.
Live navigation Each selected route turns into a guided trip with highlighted segments and GPS progress.

Build Process

I used ChatPRD to map the main user flows and edge cases before writing code. Lovable generated the first React shell and UI. From there I tightened the routing logic, integrated three APIs, and added GPS navigation with help from AI coding tools.

The route generation engine fetches walking, cycling, and transit directions in parallel, composes them into multi-segment routes, and sorts by total duration. All routing logic runs client-side with no backend business logic beyond the Supabase proxy for Google Maps.

Key Design Decisions

  • Effort sliders over dropdowns: Walking and biking tolerance sliders (0-30 min) give users continuous control over how much physical effort they're willing to put in per segment.
  • Citi Bike vs. Own Bike toggle: Docked bikes mean you need to find a station and dock at the other end. Your own bike means door-to-door. The routing logic accounts for both.
  • Parallel API calls: Mapbox walking, Mapbox cycling, and Google Maps transit all fire simultaneously. Users see results in seconds, not after sequential round trips.
  • MTA line colors: Subway segments on the map use the official MTA color for each line. The F train is orange, the L is gray, the 1 is red. Small detail, but it makes routes immediately scannable.
  • GPS turn-by-turn navigation: Once you pick a route, the app tracks your position, highlights the current segment, and shows elapsed time. You can navigate segment by segment with manual controls.

Tech Stack

React 18 TypeScript Vite Tailwind CSS shadcn/ui Mapbox GL Google Maps API Supabase Citi Bike GBFS TanStack Query PostHog Zod

What It Demonstrates

  • Multi-API orchestration: Three independent data sources come together fast enough to feel like one routing product.
  • Real-time guidance: Browser GPS and live station data make the result usable beyond the initial search screen.
  • Product judgment: The build starts from a real New York commuting gap instead of a generic route-planning concept.
Need this for your team?

Build a fast prototype around a real workflow gap.

WalkRide is a good example of taking a concrete transit headache, wiring up live data, and getting to a usable prototype fast.

Scope a prototype Try WalkRide