Princeton University's Coffee Club, a student-led organization, has already brought together thousands of students since its founding in 2019, with a menu featuring dozens of food and drink options as well as a sit-down venue for people to enjoy each other's company.
The wildly successful Coffee Club ran into what most would consider a great problem to have: long wait times due to queues that went out the door. Given that most students on campus only have minutes to spare to get their daily coffee dose, the Coffee Club staff needed to find a way to keep traffic moving and process orders as quickly as possible. The club's queue system entailed every student to wait on line and order at the register, which proved to be the traffic bottleneck.
Thus, along with four other Princeton students, I helped develop a web application, Expresso, designed exclusively for the Coffee Club that allows anyone with a Princeton University ID (PUID) order online in advance and pick up their completed order the moment they step into the club. This allows students in a hurry to save precious time between classes, meetings, or any of the other numerous obligations college students have.
Expresso was launched early in the 2020 Spring semester and is being used heavily by students across campus.
Expresso was developed in Princeton University's COS 333: Advanced Programming Techniques Fall 2019 course. The frontend is written in JavaScript/React and the backend in Python/Flask. The app is hosted on cPanel. Google Maps API is used for geo-location and the map display. More information about the Coffee Club can be found here.
I led the frontend team and developed most of the frontend, using React. This repository is duplicated from the original repository my team and I worked on (which is a private repository). You can navigate quickly to the general React code in the 'frontend' folder here, and to the components I built in the 'Components' folder here.
The web app is live here. Anyone can view the landing, team, about, and location pages. Unfortunately, only people with a PUID can login, view the menu, and place orders. For those without a PUID, I've included screen captures of all pages below.
Expresso's main features include:
Customers and baristas have completely different interfaces: Customers can view the menu, add items to their cart, place orders, view order history, send feedback, and more. Baristas can view the queue of orders, complete orders, view order history, change inventory, and more.
Customers must login with a valid PUID to view the menu and place orders, and can choose to stay logged in. Baristas must login with a valid username and password to use the barista interface. An admin login also exists and allows more privileges on the barista interface.
Customers can either pay for their order online using their PUID, which will directly charge their Princeton financial account to save time and allow them to grab-and-go, or pay in person at the register. They make this selection before placing their order. (Trivia: We're the first group in COS 333 history to integrate PUID payment into our project.)
Customers can either place their order immediately, or select a valid time during Coffee Club hours to place a delayed order. This order will not pop up on the barista interface until the selected time.
Customers will receive a notification via email after they place an order with details about the order.
Customers can click on any item on the menu to render a popup with more details, along with any add-ons they'd like to make. Baristas can toggle any item's availability on and off which will affect item status on the customer menu, and can enable/disable ordering at any time. Admins can add and remove items from the menu.
Expresso is mobile-friendly—we anticipated that most of our users would place orders through their phones. It is also tablet-friendly since the Coffee Club anticipates providing tablets for baristas to handle orders.
To learn more about Expresso and see additional details about its functionality from a customer's point of view, navigate to the User's Guide our team wrote here. To learn about the technical implementation, navigate to the Programmer's Guide we put together here.