WalkRide

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

Architecture

How the Routing Engine Comes Together

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.

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.