Beacon is a Progressive Web App (PWA) designed to improve public transit experiences by making real-time reporting accessible, visual, and community-driven. It empowers users to share issues like delays or overcrowding while receiving updates from fellow commuters turning every rider into a contributor.
In many cities, transit riders often encounter delays, crowded buses, or unexpected service changes—with little to no communication from transit authorities. These gaps create frustration, missed connections, and unreliable commuting experiences. Riders have no quick way to share what they see, nor receive live updates from others experiencing the same route.
8 Weeks
Yuki Kabasawa, Shubham Sharma, Shubham, Vaibhav Adesara, Esteban Tirado
Using Vancouver as a case study we built Beacon to bridge this gap with a mobile-first, installable app that allows users to:
1. Report issues in real time with supporting details and images.
2. Stay updated through a live community feed of nearby transit activity.
3. Customize alerts based on their most-used routes.
The app leverages geolocation and camera technology to make simple public reports
Users select a nearby bus or train route and report issues like “Crowded,”“Delayed,” or “Not in Service”. They can also include a cause if known and attach an image as evidence.
All submitted reports are added to a real-time feed that can be filtered by route, time, or cause—allowing users to browse live updates shared by others in the area.
All submitted reports are added to a real-time feed that can be filtered by route, time, or cause—allowing users to browse live updates shared by others in the area.
The Transit API and the Google Maps API. The Transit API retrieves real-time transit data within a 1.5km radius of the user's current geolocation, and the corresponding route data are then visualized using Google Maps API.
Beacon was built using HTML, CSS and JavaScript as the core building blocks. To make our lives even harder, we deceided to use Vanilla JavaScript and CSS to make sure that we had a true grasp of the fundamentals
For simple and straight-forward, database, Google Firebase was used to for user authentication and to streamline the database. Supabase was then used to store all images,to prevent resource load.
The Beacon brand identity is centered around trust, action, and clarity. The logo combines:
1. A location pin for direction and context
2.A broadcast arc to symbolize community-driven signals.
The color system is anchored by bold transit blues and a vibrant orange; visually signaling alerts and community energy. Supporting gradients evoke movement and time of day, while Gill Sans provides excellent legibility across all devices.
This project was completed as part of Project 1 in the Spring 2025 term at Langara College’s WMDD program. It pushed me to become a stronger developer and a more collaborative team player; teaching me how to manage expectations and deliver when it counted most.