Last Mile Splitter: Turning Strangers into Ride-Shares with Gemini AI

#devchallenge #weekendchallenge #showdev

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

The Community

South African commuters who use public transit (Gautrain, MetroRail, MyCiti) and need to cover the last mile from the station to their workplace. Every morning, dozens of people arrive at the same station heading to the same business parks — but each one hails a separate ride at full price. This app turns strangers at the same station into a ride-sharing community.

What I Built

Last Mile Splitter — a Progressive Web App that lets commuters post and join last-mile ride shares in seconds.

Instead of filling out forms, you type (or voice-dictate) a single sentence like "Arriving at Rosebank at 8:15 AM, heading to Bedfordview, looking for 2 people to split an Uber" — and AI (Google Gemini) parses it into structured ride data and publishes it to a real-time board.

Key features:

🤖 Zero-Friction AI Parsing — Uses the Vercel AI SDK and Google Gemini 2.5 Flash (generateObject with a strict Zod schema) to instantly convert natural language into structured ride data. Includes a bulletproof regex fallback if the AI rate limits are hit.
🎙️ Voice dictation — Integrated the Web Speech API (localised to en-ZA) so commuters can just speak their route while walking.
⚡ Auto-Syncing Real-Time Feed — Powered by Supabase Realtime (postgres_changes). The feed updates instantly across all connected devices—no refreshing required.
🔔 Native Push Notifications — full Web Push API implementation using VAPID keys and a custom Service Worker to deliver native OS notifications when someone joins a ride.
🧠 Smart Database Automation - Custom PostgreSQL triggers automatically decrement seat counts, mark rides as 'full' when capacity is reached, and auto-generate notifications without requiring frontend logic.
📱 Installable PWA — add to home screen on Android and iOS, no app store needed
🔐 Robust Session Management — Implemented a custom Next.js proxy wrapper to seamlessly refresh expired JWT tokens and sync cookies between the client and server.
🪟 Glassmorphism UI — frosted glass cards, gradient backgrounds, dark mode support

Demo

🔗 Live app: https://last-mile-splitter.vercel.app

Code

tsnyders / last-mile-splitter

An AI-powered, real-time PWA helping daily commuters instantly coordinate and split rides for the "last mile" of their journey.

Last Mile Splitter

Split last-mile rides from transit stations. Post a ride in one sentence, join in one tap.

Weekend Dev Challenge — a PWA built with Next.js 16, Supabase, and Gemini AI.

What it does

Commuters arriving at a train or bus station often need to cover the "last mile" to their workplace — usually by ride-hail, at full price, alone. Last Mile Splitter lets them:

Post a ride in natural language — "Rosebank to Bedfordview at 08:15, need 2 seats"
Browse a live feed of open rides updated in real time
Join in one tap (with confirmation) — seat counts update instantly for everyone
Get notified when someone joins your ride — in-app bell + native push notifications

An AI endpoint (Google Gemini) parses free-text input into structured ride data. If the AI is unavailable, a regex fallback handles common patterns. A mic button lets users voice-dictate instead…

View on GitHub

How I Built It

Layer	Technology
Framework	Next.js 16 (App Router)
Styling	Tailwind CSS 4 + custom glassmorphism utilities
Auth & Database	Supabase (Auth, Postgres, Row Level Security, Realtime)
AI	Vercel AI SDK + Google Gemini 2.5 Flash (`generateObject` with Zod schema)
Push Notifications	Web Push API + `web-push` (VAPID keys)
Voice Input	Web Speech API (en-ZA locale)
PWA	Web App Manifest + Service Worker (network-first caching + push handler)
Deploy	Vercel

Building this app required orchestrating several real-time services and ensuring the UX felt completely frictionless. Here is a look under the hood:

1. The AI Integration (Vercel AI SDK + Gemini)

The core differentiator of this app is skipping the traditional multi-step form. I used the Vercel AI SDK connected to Google Gemini 2.5 Flash. When a user types "Looking for 2 people to split an Uber to Bedfordview," the system prompt is smart enough to infer implicit data (e.g., needing 2 people means a total of 3 seats including the creator) and returns a perfectly formatted JSON object. If the AI is ever unavailable, the client gracefully falls back to a regex parser so the app never breaks.

2. Database & Automation (Supabase)

I wanted the database to handle the heavy lifting to keep the client fast. The Postgres database uses 5 highly-normalized tables (profiles, rides, ride_participants, notifications, push_subscriptions) secured by strict Row Level Security (RLS) policies.

Instead of relying on the frontend to manage ride capacity, I wrote PostgreSQL Triggers:

Seat Syncing: When a user joins or leaves a ride, a SECURITY DEFINER trigger automatically decrements or increments the available_seats.
Auto-Full Status: If seats hit zero, a trigger instantly updates the ride status to 'full'.
Auto-Profiles: A trigger automatically generates a public profile row whenever a new user signs up via Supabase Auth.

3. Real-Time & Push Architecture

Getting push notifications to work on a PWA without an app store was the biggest weekend hurdle. I built a reactive chain:

A user taps "Join Ride" (featuring a two-tap confirmation to prevent accidental joins).
A database trigger automatically inserts a row into the notificationstable.
Supabase Realtime instantly broadcasts this INSERTto the creator's browser.
The client updates the in-app bell badge and triggers a POSTto my /api/push/send endpoint.
The Next.js backend looks up the user's VAPID keys in the push_subscriptions table and uses web-push to trigger the Service Worker (sw.js).
The user gets a native OS notification on their phone.

4. Frontend & UX (Next.js 16)

The UI was built mobile-first using the Next.js App Router and Tailwind CSS v4. To give it that premium, native-app feel, I designed a custom Glassmorphism UI with frosted glass cards and smooth gradient backgrounds. I also implemented global error boundaries (global-error.tsx) and a custom toast notification context to ensure that if anything fails while a commuter is rushing, the app recovers gracefully and provides immediate, clear feedback.