Inspiration

  • Inspired by KakaoMap, we wanted to simplify navigating Singapore’s public transit.

What it does

  • BusMapperSG shows real-time bus/train locations, delays, crowding, and station accessibility. It helps commuters—including elderly, disabled, and socially anxious users—plan smarter with step-by-step directions. Supports light and dark modes for an accessible, user-friendly experience.

How we built it

  • 💻 Frontend: React, HTML, CSS, JS
  • ⚙️ Backend: Django + PostgreSQL
  • 🛰️ APIs: LTA Datamall, Google Maps & Autocomplete
  • 🧠 AI-powered train timing predictions

Challenges we ran into

  • 📍 No real-time train locations - we used AI to predict arrivals
  • 🚍 Unreliable bus location transmission
  • 📐 Complex bus routes and map label angles
  • 🚆 Making trains follow designated route visually on the map
  • 📊 Parsing large datasets efficiently
  • 🌍 Team distributed across countries

Overcoming the challenges faced

  • 🍪 Used browser-based caching and server-based storage to hold data with little variance, such as bus stops, reducing page load times by 90%
  • 📏 created a circular perimeter around the destination bus stop if the bus location is unavailable.
  • 📈 Used bézier curves to plot graphs representing train paths, allowing accurate and effective plotting of curved trajectories.

Accomplishments that we're proud of

  • 📍 Real-time tracking for buses and trains
  • 👴 Accessibility & crowding info for vulnerable users
  • 🗺️ Smooth, interactive transit map

What we learned

  • React/React Native, Django, PostgreSQL, JS, TypeScript, SVG creation

What's next for BusMapperSG

  • Launch as a polished, responsive web app and eventually a React Native mobile app to reach more commuters
Share this project:

Updates