Ion

Description

What is Ion?

Ion is a browser-based platform built for motorcycle group rides. It helps riders stay connected through real-time GPS tracking, push-to-talk communication, SOS alerts, and shared ride coordination — without requiring any app installation.

The goal was to solve a common problem in group rides: riders getting separated, missing turns, losing communication, and struggling to coordinate safely while moving.

Ion works entirely in the browser using realtime infrastructure, WebRTC communication, and live synchronization between riders.


The Problem

Motorcycle group rides are chaotic.

Even experienced riding groups face:

  • Riders getting separated at signals or intersections
  • Poor communication while moving
  • No visibility into where the group actually is
  • Unsafe situations during emergencies or breakdowns
  • Dependence on unreliable solutions like phone calls or walkie-talkies

Existing tools were either:

  • Generic location-sharing apps
  • Expensive hardware intercom systems
  • Non-realtime messaging apps
  • Complex apps requiring installation and setup

We wanted a lightweight, realtime, browser-first solution specifically designed for riders.


Core Features

Real-Time GPS Tracking

  • Live rider locations on a shared map
  • Realtime synchronization using Supabase Realtime
  • Connection status indicators
  • Route and movement tracking

Push-to-Talk Voice Communication

  • WebRTC-based group voice communication
  • Walkie-talkie style interaction
  • Hands-free friendly interaction while riding
  • Instant voice broadcasting to the group

SOS Emergency Alerts

  • One-tap emergency alerts
  • Instant location sharing during emergencies
  • Ride-wide emergency notifications

Shared Ride Coordination

  • Hazard markers and waypoints
  • Group chat and quick replies
  • Ride timeline and activity events
  • Leader/member management

Tech Stack

  • Frontend: React + TypeScript
  • Backend: Supabase
  • Realtime Infrastructure: Supabase Realtime
  • Voice Communication: WebRTC
  • Database: PostgreSQL
  • Maps: Leaflet
  • Authentication & Security: Supabase Auth + RLS Policies

How We Used MeDo

We built Ion almost entirely through iterative conversations with MeDo.

Instead of asking for isolated code snippets, we approached development by describing:

  • product problems
  • realtime synchronization challenges
  • safety requirements
  • communication workflows
  • edge cases

MeDo then helped architect and implement the system step-by-step.

Development Flow

  1. Problem definition and ride workflow planning
  2. Database and realtime architecture design
  3. GPS synchronization implementation
  4. WebRTC push-to-talk system
  5. Security and Row-Level Security policies
  6. Edge case handling and ride lifecycle management
  7. UI refinement and production hardening

One of the biggest advantages was being able to discuss system behavior conversationally and rapidly iterate on architecture decisions.


Most Impressive Feature Generated by MeDo

Automatic Ride Cleanup System

This became the most technically impressive part of the project.

The Problem

If all riders closed the tab or disconnected unexpectedly, rides could remain active forever as “ghost rides”.

This created:

  • stale realtime subscriptions
  • orphaned ride sessions
  • incorrect online states
  • unnecessary database activity

What MeDo Generated

MeDo designed and implemented:

  • PostgreSQL helper functions
  • realtime cleanup triggers
  • SECURITY DEFINER functions
  • recursive-safe RLS-compatible logic
  • abandoned ride handling
  • automatic cleanup flows with grace periods

It also handled edge cases like:

  • browser crashes
  • network disconnects
  • simultaneous member exits
  • temporary offline states

Example

CREATE FUNCTION has_active_members(ride_id_param uuid)
RETURNS boolean
LANGUAGE sql
SECURITY DEFINER
SET search_path = public
STABLE
AS $$
  SELECT EXISTS (
    SELECT 1 FROM members
    WHERE ride_id = ride_id_param
    AND connection_status != 'offline'
  );
$$;

This feature alone saved significant development time and demonstrated MeDo’s ability to generate production-ready backend logic beyond simple UI scaffolding.


Technical Challenges

Realtime Synchronization

The platform needed low-latency updates between multiple moving riders simultaneously.

We implemented:

  • Supabase Realtime subscriptions
  • efficient location broadcasting
  • live member presence tracking
  • ride state synchronization

WebRTC Push-to-Talk

Voice communication was one of the hardest technical components.

The system required:

  • peer connection management
  • signaling infrastructure
  • audio stream handling
  • mobile browser compatibility
  • realtime voice state updates

MeDo helped generate and refine large portions of the signaling and communication workflow.


Security with Row-Level Security (RLS)

Because rides contain sensitive live location data, security was critical.

We implemented:

  • ride-based access control
  • member-scoped permissions
  • creator/admin controls
  • realtime-safe RLS policies

MeDo helped design complex multi-condition policies and SECURITY DEFINER helper functions to avoid recursion issues.


Why MeDo Was Essential

MeDo accelerated:

  • system architecture
  • backend implementation
  • realtime infrastructure
  • security policies
  • database logic
  • edge case handling
  • UI refinement

Most importantly, it enabled rapid iteration on complex engineering problems that would normally take weeks of experimentation and debugging.

What would typically take several months was reduced to a few weeks of focused development.


Conclusion

Ion demonstrates how AI-assisted development can dramatically accelerate the creation of sophisticated realtime applications.

This was not just UI generation — MeDo helped with:

  • backend systems
  • realtime architecture
  • WebRTC communication
  • database design
  • security engineering
  • production-grade edge case handling

Ion became a fully functional, realtime motorcycle coordination platform built through a collaborative engineering workflow between developer and AI.

Built With

Share this project:

Updates