Better Bus Time - and the journey getting here
Hello readers. Today, I would like to talk about my capstone project at General Assembly, which I have dubbed Better Bus Time. I didn't realize it at the time, but sitting down to write this piece has brought to the forefront of my mind what inspired me to create this project. With the end of my immersive program at GA, I'm moving on, once again, to a new stage in my life's journey. With Better Bus Time, I've tried to touch on each of the following disparate data points that have affected me through the years: Web 2.0 revolutionizing the internet with APIs for everything; smartphones pervading everyone's daily lives; and the MTA - which is integrally tied to the identity of New York City, and by extension, every New Yorker, including yours truly.
My younger sister pondered one day, "I wish the MTA Bus Time app was better." I'm a few years late, and the MTA has sort of beat me to the punch with their excellent MyMTA app for iOS and Android, but such roadblocks should never stop you from trying something new; it certainly didn't stop me from putting together everything I've learned so far to produce Better Bus Time; writing my own API, mobile first design, and more. Without further adieu, let's dive into the app!
To live up to its name, I envisioned Better Bus Time to be a better version of MTA Bus Time (original, I know). My goals were to provide a modern, single page application with an attractive user interface, and to support user accounts. Users should be able to pin their favorite bus routes and bus stops, so on first load of the webpage, the first thing they see is the transit information most pertinent to them. To that end, I've succeeded, and I'm quite pleased with the end result.
For New Yorkers who know what buses they want to pin, there is a search feature right below pinned items. The search is responsive to every keypress: results will update as you type out your query. I'm very proud of it.
For users who aren't familiar with New York's bus system, I've aimed to make the process of finding relevant, key information as easy as possible. The landing page highlights the boro view, where we can see the landmarks that make NYC so iconic (pictured above as the title banner to this article). Selecting any boro lists all of the routes that are part of that boro's bus system. Selecting any route brings up all outbound and inbound stops for that route. The key is when a user selects a stop. Stops can be served by multiple buses, so the stop detail view shows all buses destined to arrive at that stop in order of arrival time. At a glance you can see how much time you have until your bus arrives at your stop. Handy!
To make all of this magic happen, I used the MERN stack: MongoDB, Express (talking to Mongo via Mongoose), React, and Node. Other cool software projects I have to mention are react-reveal, which made it painless to add attractive animation to my app, and bcryptjs and jsonwebtoken, which were crucial to support user authentication. Initially the backend was planned to be written in Python, using Django, talking to a PostgreSQL database. Due to unfamiliarity with such an environment and CORS complications on project day one, I quickly shifted back to a familiar stack to get the work done. Because of the CORS issue, my backend server does double duty as a proxy server to 3rd party (MTA) API requests. Building out the backend in this fashion taught me a lot about the HTTP request + response cycle. But there's always more to learn! I will be revisiting Python, Django, and Postgres in future projects for personal and professional enrichment.
A stretch goal of this project is to include mapping functionality. The MTA Bus Time application for desktop provides mapping, but it's not available on mobile devices. The aim is to bridge the gap between both interfaces and provide mapping on both. Perhaps with such a feature update, Better Bus Time can become Best Bus Time. I will be continuing to work on this project in the future, so stay tuned for updates!
I hope you enjoy using Better Bus Time. If you have any feedback for me, please drop a line in the comments below. Thank you for reading.
P.S. If you're wondering, yes, the title of this article is a kind of pun. :)
Sustainability @ Mastercard
4 年This is awesome and needed by every single New Yorker! Congratulations on finishing your GA bootcamp. :)