ezMTR

Confused about using the MTR subway system in Hong Kong? ezMTR is an efficient and convenient web-app that allows users to find the simplest route from one MTR station to another.

Comment

Inspiration

With MapHacks being centered on the theme of “Exploration”, we thought about different ways that we had explored places in Hong Kong. As students in Hong Kong, we often used the MTR system to travel to different places in Hong Kong. We realized that some people may find the current metro map quite daunting, especially for newcomers to Hong Kong. Because of this problem, we decided to make a website that takes in the user’s initial station and destination station, and returns all the interchange stations in-between. With ezMTR, navigating the complex metro system in Hong Kong has never been easier.

What it does

This website allows users to select their initial MTR station location and their goal station destination using the 2 drop-down menus. This data then gets saved for the backend program. The backend program implements an algorithm to algorithmically determine the optimal and most convenient route for the user to take. The route contains all the interchange stations required by the userthe user imputed initial and final stations. Using the 2 inputs, the backend program then outputs the stations and their respective lines. These stations and lines are then displayed on the screen for the user to see. As a result, users would be able to know which stations they need to pass by before getting to their final destination station.

How we built it

The front-end of the website was made with pure HTML, CSS, and vanilla JavaScript. The backend of the program was built initially isolated from the rest of the system with pure javascript functions. When brainstorming how to perform a pathfinding algorithm, we determined that each intersecting point between mtr lines acted as a “node”, and that the entire Metro system was a series of connected nodes. This method of thought allowed us to visualize and write the recursive depth-first pathfinding algorithm being used currently.

Challenges we ran into

We had a few backend crashes with the program not working. We initially also had challenges with saving the initial and final station data on the HTML file in order to pass it to the backend. We also had some problems with how the website displayed data on the website which caused us to slow down a bit as we searched for resources and solutions online. However, we are proud of working together and pushing through the design problems. Besides this, we also had major issues with the algorithmic pathfinding logic. Eventually, in order to solve this, we settled for a recursive depth first search mechanism.

Accomplishments that we're proud of

We are proud of the depth first recursive pathfinding algorithm implemented. This algorithm was designed by us in order to find the most efficient and convenient route for travelling from one station to another. This recursive algorithm manages time complexity fairly well, but could be improved with a more mathematical approach. We are also proud of simplicity of our final product, our product effectively achieves our goal with minimal page clutter.

What we learned

We learned about managing our time effectively and making effective google searches to find solutions to features and functionalities that we wanted to implement on our website. On the first day of the Hackathon, we brainstormed and finalized our product design on Figma. By collaborating on the design of the website together, we effectively brought together ideas. We also learned how to more effectively use pathfinding algorithms with application to real-world situations. This process let us take the first step from theory to real-world application.

What's next for ezMTR

With more time, we would add 3 additional functionality features to our website to make it more user-friendly. The first is making the map line change color once the user selects an option from the drop-down menu. The second is using Google Cloud Platform tools (such as Firebase and Google Maps) that can provide the user with a live feed of station arrival times. The last feature that would be interesting to implement is adding a chatbot using Dialog Flow so that users can have their questions related to the subway system such as ticket types and average time to wait before the next train arrives nearby answered. Besides the functionality-related improvements, we also would improve the design of our interface by adding MTR related graphics and making the website features more interactive for the user.

Built With

Share this project:

Updates