BC Transit Tracker 🚎🚌

Summary: 📃

BC Transit Tracker is a dynamic web application that leverages the TransLink Open API, employing a combination of JavaScript, HTML, and CSS to deliver up-to-the-minute transit information for the bustling Metro Vancouver region. This innovative app seamlessly integrates with the user's current location, presenting a comprehensive overview of nearby bus stops, their respective routes, and detailed information about the selected bus routes.

Users can explore nearby bus stops, view available bus routes, and access detailed information about each route. The incorporation of Google Maps further enriches the user experience, offering a visual representation of the transit network and aiding users in navigating the Metro Vancouver area.

Key Features: 🔑

1. Real-time Transit Information:

• Utilizing the TransLink Open API, our application ensures users have access to the latest information on bus locations, routes, and schedules.

2. Location-Based Services:

• The app integrates with the user's current location, offering a personalized experience that focuses on nearby bus stops and relevant transit options.

3. Detailed Bus Stop Exploration:

• Users can explore nearby bus stops, gaining insights into their locations, services, and additional details to improve their transit experience.

4. Google Maps Integration:

• Enhancing user navigation, the application incorporates Google Maps to provide a visual representation of the Metro Vancouver transit network.

Demo: 🚏

• Real-time information of nearby buses
• Handy filter by route button to display specific route
• Instant access to information about nearby bus stops

Technologies and Resources Used 💻

List technologies (with version numbers), API's, icons, fonts, images, media or data sources, and other resources that were used.

• HTML, CSS, JavaScript
• Bootstrap 5.0
• Google Map
• TransLink Open API
• Google material icons

Getting started 🚀

To use this application, two API keys are needed—one from TransLink and another from the Google Maps API. Place your personal Google Maps API key in backend\mapAPI.js and your TransLink API key in backend\APIkey.js.

If you don't already have API keys, you can get one by visiting the below links.

TrnasLink API

Google Maps API

Features for Future ⌛

• Develop a backend system to enable user registration, enhancing the app with personalized features for individual users.
• Integrate a feature that suggests recommended routes based on the user's specified destinations.

Content 📂

Contents of folder

project/
|--/backend/
|   |--APIkey.js
|   |--busRoute.js
|   |--index.js
|   |--mapAPI.js
|   |--mapView.js
|   |--skeleton.js
|
|--/image/
|   |--bus.png
|   |--personalPin.svg
|
|--busRoute.html
|--footer.html
|--index.html
|--README.md

Contact Information: 📧

For questions, feedback, or support, please reach out to us at hotcmc@gmail.com.