DRT Tracker

The DRT Tracker App gives you live bus locations, interactive maps, and easy trip planning. No more guessing when your bus will arrive and get where you need to go without the hassle.

Comment

Inspiration

The inspiration for the DRT Tracker App came from the need for a more efficient and reliable way to navigate public transit. We noticed that the DRT doesn't have a live map on their site and I saw an opportunity to build this solution and also to help enhances the user experience for Durham Region Transit riders.

What it does

The app is built using Next.js for the frontend, leveraging Leaflet.js for interactive mapping and visualization. For real-time updates, we decoded live data from DRT’s GTFS-RT feeds, including:

  • Trip Updates
  • Vehicle Positions
  • Static Schedule

How we built it

The backend handles API requests and processes live data efficiently using Next.js. Leaflet.js powers the interactive map for real-time visualization of bus locations. We ensured seamless data management by integrating GTFS-RT feeds for vehicle positions, trip updates, and static schedules. For styling, we used Tailwind CSS to create a clean, responsive, and accessible design. Some online templates were adapted to speed up development and maintain consistency. The app is mobile-friendly, ensuring users on the go have a smooth experience.

Challenges we ran into

  • Data Synchronization: Handling real-time data while maintaining accurate map visualization was challenging. We optimized data polling and used caching to reduce latency.
  • Mapping Efficiency: Rendering multiple bus locations with live updates caused performance issues, which We solved using clustering techniques and data throttling.
  • Data Mapping and Filtering: Combining records from different APIs to provide meaningful information was time-consuming. We implemented efficient data transformation logic to display the most relevant data to users.

Accomplishments that we're proud of

  • Successfully implemented a real-time bus tracking system.
  • Built a responsive and accessible user interface with Tailwind CSS.
  • Integrated complex GTFS-RT data streams for accurate trip updates.
  • Enhanced map performance using Leaflet.js and optimized rendering techniques.
  • Delivered a smooth user experience on both desktop and mobile.

What we learned

  • Implementing real-time data using GTFS-RT feeds.
  • Optimizing map performance with Leaflet.js for large datasets.
  • Enhancing UI/UX for better usability.
  • Managing state and asynchronous data using React and Next.js.
  • Building robust APIs for transit data management.
  • Trying to use cache memory to store data gotten from fetching the API to increase performance on client side.

What's next for DRT Tracker

  • Enhanced Route Suggestions: Implementing smart route recommendations based on user preferences and real-time data.
  • Accessibility Features: Using more descriptive features to determine the buses and their routes on the map.

About the Project: DRT Tracker App

The DRT Tracker App has the potential to transform the transit experience for commuters, making travel across Durham Region simpler and more predictable.
The DRT Tracker App is designed to simplify the daily commute for Durham Region Transit (DRT) users. By providing real-time bus tracking the app helps commuters plan their trips efficiently. With an intuitive and responsive interface, it ensures that users can access the information they need, anytime and anywhere.

Built With

Share this project:

Updates