NavVT

Full browser image of the app
Web page image of app with UCB route
Close-up of side menu
Satellite version of map

Inspiration.

For many Hokies, using Blacksburg Transit (BT) is a must in order to get around the Blacksburg and Christiansburg area. The most common way to get information regarding the BT buses is by using the Blacksburg Transit App and website. However, as long-time users of these applications, we know it is not perfect and has the potential to be so much better. This is what inspired us to improve it by adding the changes we wanted to see for the sake of our fellow Hokies.

What it does

Our application is an all-in-one public transportation app for Virginia Tech students. It gives real-time information about bus routes and stop locations all across the Blacksburg and Christiansburg area. Users can view the full routes for every currently-running bus as well as filter to view only the routes that they choose. Our end goal is to provide a new-and-improved app for the convenience of Hokies.

How we built it

Our technology stack includes a ReactJS frontend and a Java Spring-Boot backend. Our frontend consisted of custom functional React components that we used along with the Google Maps API and Material UI library. Our backend included multiple API endpoints that obtained and parsed data from the Blacksburg Transit API to be passed along to the frontend. Since we did not have direct access to the API calls used for Blacksburg Transit, we instead were able to intercept API calls and recreate them in order to obtain the data we needed for the app.

Challenges we ran into

The major challenge we ran into was using the Google Maps API for JavaScript, as it was outdated for use in newer versions of React. Since functional components in React have been introduced within recent years, the Google Maps API had many useful functions that we could no longer use effectively. As a result, we had to think creatively to find ways to circumvent these issues, such as creating central rotation points in order to accurately depict the direction of buses in transit. Another challenge we ran into and overcame was the data filtering between the autocomplete menu and correctly displaying the selected transit lines. In particular, we had a difficult time connecting the two components as they were not initially updating as we wanted.

Accomplishments that we're proud of

We are particularly proud of the intuitive, responsive, and VT-themed UI we have developed. We worked hard to determine how our design would partition different sections of the browser window to better encapsulate separate components. Furthermore, the work we put in to ensure the robustness of our application was crucial in making the user experience as smooth and reliable as possible.

What we learned

Since the majority of our group is composed of first-time hackers, we had a lot to learn about both the technology stack that we were using and how to implement brand new libraries and APIs into our program. Furthermore, we had to learn how to collaborate effectively in a short period of time to successfully design and develop our application. In short, we learned that “hacking” is a challenging yet rewarding experience that greatly improved our skills as developers.

What's next for NavVT

For NavVT, the most important thing we want to add are accurate estimates for when buses will arrive at their stops. We want to add this along with user feedback options to allow for alerts to be sent out when a large number of users are having issues with transit, such as when a bus is running late or there are issues with a route. It would be awesome to work alongside Blacksburg Transit to further improve NavVT, helping Hokies navigate around VT!