NYU Shuttle App

Introduction:

This project is a collaborative effort between me and two other undergraduate student at NYU, aiming to provide an intuitive and efficient way for students to track NYU shuttles in real-time. This app comes equipped with a functional real-time bus-tracking system, a user-friendly interface, and a robust route-finding algorithm tailored to the NYU transit system.

On the right is a video demo showcasing the app's functionality.

Technologies Used:

React.js, Express.js, Google Maps API, Node.js, MongoDB

Maps Page:

The maps page has the following functionalities:

Displaying real-time bus location on the map
Displaying all active shuttle
Allow users to filter by routes
Displays information about the bus

The location of the busses are fetched real-time from PassioGo's api, and the map bus markers are updated frequently using a web socket connection to the server to ensure the most up-to-date information is displayed to the user.

Bus routes and stops are displayed using a street segment vector fetched from PassioGo API, and plotted on the map using Google Maps API. A similar approach is used to display the stops.

Navigation Panel:

The navigation panel is inspired by the design of book-marks. The panel features two layers, the ligher color represents the foreground, and the darker color represents the background. The panel is designed to create an illusion of that a part of the foreground is "cut-off" to show the background, which indicates the current active page.

The curve is achieved by mapping a sine function to the x-axis of the panel using clip-path, creating a more natural and organic look that isn't simply a half-circle or an oval.

There are attention paid into the subtle details of the panel as well. For example, when a page is selected, the text pops up, pushing the icon up and making it slightly bigger. This further enhances the user experience by increasing visual clearity.

Back-end Development:

My evolvement in the back-end development mainly focuses on the route-finding algorithm. One of the most important feature of this app is to allow users to input a starting point and a destination and having the app return all available routes ranked by distance; therefore, a robust route-finding algorithm is crucial to the app's functionality.

Because the NYU shuttle system is not publicly accessible through an external API, we developed a unique route-finding algorithm for optimal path determination. This algorithm shares conceptual similarities with Dijkstra's algorithm. However, our focus is on minimizing the time required for users to walk to and from bus stops and their destinations or points of origin.