React · TypeScript · Leaflet2026 · 6 months · Product Engineer — frontend, architecture, UX

AbiaWay Transit

A smart transit system for Abia State — real-time bus tracking, digital wallet payments, and route planning in one PWA.

Overview

The product

AbiaWay is a real-time transit platform built for public transport in Abia State. Commuters can watch buses move live on an interactive map, plan and book routes, and pay with a digital wallet that supports NFC tap simulation. A driver dashboard simulates GPS feeds, and an AI travel assistant answers routing questions on the spot — all wrapped in an installable PWA.

Map + wallet + planner

Transit surfaces

Real-time GPS

Live tracking

NFC-ready wallet

Payments

PWA-ready

Shipping target

The problem

Public transit is invisible to the people who rely on it

Commuters wait at stops with no way to know when a bus will actually arrive. Cash-only payments slow boarding and make reconciliation hard, while operators have no visibility into vehicle positions or demand patterns.

  • No real-time vehicle positions — waiting was a guess, not a schedule
  • Cash-only fares with no digital wallet or tap-to-pay flow
  • No self-serve route planning or live assistant for unfamiliar travelers

The solution

Make transit a live, digital service

I built AbiaWay as a location-first web app: Leaflet renders live vehicle positions on an interactive map, a digital wallet simulation handles contactless payments, and a route planner connects the two. A driver dashboard feeds position updates, and an AI travel assistant guides riders end-to-end. The whole thing ships as an installable PWA for low-bandwidth conditions.

  • Live bus tracking on an interactive Leaflet map with simulated GPS feeds
  • Digital wallet payments with NFC tap simulation for round-trip transit
  • Route planning, a driver dashboard, and an AI travel assistant in one app

Architecture

The system behind AbiaWay Transit

A single React app with clear feature modules — mapping, wallet, route planning, and the driver's dashboard — so each piece can evolve independently.

  1. 01

    React Frontend

    React 19 · Vite

    The full rider and driver experience — map, booking, wallet, assistant.

  2. 02

    Maps

    Leaflet

    Interactive bus positions, route overlays, and stop markers.

  3. 03

    Wallet & Payments

    Digital wallet · NFC

    Simulated tap-to-pay and balance-driven fare flows.

  4. 04

    Route Planner

    React · State management

    Durable route and booking workflow for commuters.

  5. 05

    Driver Dashboard

    React · GPS simulation

    Live vehicle position simulation feeding the rider map.

  6. 06

    AI Assistant

    React · AI layer

    Conversational travel guidance from within the app.

Tech stack

Tools that earned their place

Frontend

  • React 19
  • TypeScript
  • Vite

Maps

  • Leaflet
  • OpenStreetMap

Payments

  • Digital wallet
  • NFC simulation

Assistant

  • AI travel assistant

UX

  • PWA
  • TailwindCSS

Features

What it does, and why it matters

01

Live bus tracking

Interactive map shows vehicle positions in near-real time from simulated GPS feeds.

02

Digital wallet paying

Balance your wallet and tap NFC-simulated fares instead of fumbling for cash.

03

Route planning & booking

Plan multi-step journeys and book rides before you head to the stop.

04

Driver dashboard

A driver-facing view that simulates GPS positions feeding the rider map.

05

AI travel assistant

Ask questions about fares, routes, and stops and get answers in the app.

06

PWA ready

Installable app that works offline and lightweight connection.

Challenges

What nearly broke the system

Making maps feel alive

Static route lines weren't enough — riders needed motion. I wired the driver dashboard's simulated GPS feed directly into Leaflet markers so buses visibly move, which makes trust in the data obvious.

Transit on a budget

No backend or subscription services for the MVP. I pushed everything into a single client-side app that works offline — a PWA that still feels like a native product on campus networks.

Multiple surfaces, one model

Riders, drivers, and the assistant all need consistent route data. I centralized route/fare structures so every surface shows the same truth.

Lessons learned

What shipping taught me

Real-time features are 80% product design and 20% websockets — the map only matters if riders trust it.

An offline-first PWA can deliver a native-feeling experience without a backend.

Model shared domain data once and every surface (rider, driver, assistant) stays consistent.

Impact

Why this actually matters

AbiaWay turns an invisible transit system into a live, accountable service — delivered as an installable PWA that works offline on low-bandwidth networks, so the experience holds up where riders actually are.

  • Commuters watch live buses and plan routes instead of waiting blind at stops
  • Cashless, NFC-ready fares remove boarding friction and enable fare reconciliation
  • One shared route/fare model keeps riders, drivers, and the AI assistant on the same truth

Gallery

Inside the product

Live map

Vehicles tracked in near-real-time on an interactive Leaflet map.

Wallet flow

Digital wallet with NFC tap simulation for fares.

Driver dashboard

Simulated GPS status for each vehicle on the road.