UIUC Bus Tracker

A fast, lightweight, responsive web app for the Champaign—Urbana bus system.

Key Features • How To Use • Credits • License

Key Features

• See most recently viewed stops
  • Instantly navigate between most popular stops and most recently viewed
• Responsive, mobile-friendly
• Get stops closest to current location
• Smart fuzzy searching of stops
• Optimized for speed
  • Hosted through a CDN for fast load times
  • Uses a redis cache on the backend so popular stops can be retrieved quickly
• View current bus location on a map
  • See the previous and next stops for any bus
• Color-coding based on route for quick viewing
  • Designed so that the 12W Teal, for example, has a teal background

About

Designed for frequent bus riders, this web app has speed and simplicity as its top priority. The app allows for quick checking of any route, keeps track of recently viewed stops, and allows riders to see the live location of a bus.

This utilizes CUMTD's API and Mapbox along with ReactJS and Twitter Bootstrap to deliver a responsive and intuitive end-user experience. The old version of the site (2016-2017) employed jQuery instead of React.

The initial goal of this project was to have an app designed specifically for power users that want to have a way to very quickly and reliably see the bus arrival times. Many of the existing apps suffer from lagging on load times, and I wanted a way to very quickly be able to check stops. On average, with cached assets on a local machine, the entire search takes around 200ms from the time of clicking to the time the results are displayed.

The site is hosted through GitHub Pages and is aliased at uiucbus.com. The site is powered by Cloudflare CDN for quick loading and caching of static assets. The API is deployed to Heroku on every push to master.

The app is also featured on MTD's app page. All bus information is provided by MTD.

How To Use

To run this project, first make sure you have Docker and Docker Compose installed on your machine. Then you must set the $CUMTD_API_KEY environment variable. After this, you may run docker-compose up to start both the frontend and backend! At this point, you can navigate to localhost:3000 to view the tracker. The API is located at localhost:5000.

Credits

This software uses the following open source packages:

• Node.js
• React.js
• Express.js
• Cypress.io
• Icons are taken from FontAwesome

License

MIT

---

joshbyster.com  ·  GitHub @josh-byster  ·  LinkedIn in/joshbyster