Skip to content
ENFRAR

FILE 001

WhereBus

DECLASSIFIED

Real-time bus tracking web app

Role
Designer & developer — UX mockups, React web app, maps and live tracking
Year
2022
Stack
  • React.js
  • SASS
  • Firebase
  • AWS Amplify
  • Amazon Location Service

01Overview

A web app that shows buses live on a map. Passengers pick a line and a pickup point, drivers share their GPS position, and transport companies register their fleet and lines.

Live bus map · travel-time estimates · station and line search · driver GPS sharing · company sign-up.

02The problem

Passengers wait at the stop with no idea where their bus is, and small transport companies have no simple way to put their lines on a map.

03My approach

  1. A.01

    One app, three roles: passenger, driver and company

  2. A.02

    Driver positions synced live with Firebase Realtime Database

  3. A.03

    Maps and travel-time estimates with Amazon Location Service

04Key screens

Passenger map: pickup point, line and busWhereBus: Passenger map: pickup point, line and bus
S.01Passenger map: pickup point, line and bus
Live map on mobile
WhereBus: Live map on mobile
S.04Live map on mobile
Passenger homeWhereBus: Passenger home
S.02Passenger home
Company sign-upWhereBus: Company sign-up
S.03Company sign-up

› swipe for all 4 screens

05Technical highlights

Front end
React 18 · SASS
Maps & location
Amazon Location Service
Real-time data
Firebase Realtime Database
Back end
AWS Amplify

06Outcome

Passengers choose a line and a pickup point, then follow the bus on the map with an estimated travel time. Companies get their lines and stations online in a few steps.