Subtle Asian Traits is one of the largest existing Facebook groups, comprised of 1.2 million members who share relatable posts, subtle or not, about the first or second-generation Asian experience across the globe—ranging from posts about cultural clashes to widely shared joys such as boba milk tea. We were inspired by recent posts of members sharing logs of their boba purchases, most of which have taken the form of a Google spreadsheet or iPhone note. These posts garnered a lot of attention, as a love for boba and the resulting negative consequences on our wallets is not an uncommon experience amongst members of the group. Our aim was to create an all-encompassing, minimally designed financial tracker app that would be both relevant to and loved by this community.
What it does
Boba Watch is a mobile website that tracks a user's monthly spendings on drinks. The dashboard feature shows a graphical depiction of how close a user is to approaching their personally set monthly spending limit as well as the number of drinks a user has purchased that month. Both of these levels can be adjusted in the user settings. The spendings tracker is a feature that lists out all of a user's purchases, detailing the name, date, location, and price of purchase. These details are all added to the app using the add function, which allows a user to fill out these details along with an option to attach an image and/or description of the drink or experience.
How I built it
We used Figma to design the layout and graphics for the app. The frontend is built using React.js and is compiled to static files then hosted on GitHub Pages. The backend is built using Express.js/Node.js and MySQL. We used the Sequelize ORM to simplify SQL queries. The SQL Server is running on GCP Compute SQL and the backend is running on a GCP Compute VM Instance.
Challenges I ran into
One of the most time-consuming obstacles we faced was managing https and obtaining our SSL certificate for our backend server. Reliable internet access was also a bit of an issue for most of the duration of this hackathon. :-(
Accomplishments that I'm proud of
Team synergy! We had three team members who all worked on different aspects of the project—frontend, backend, and design—which made the process easy and fluid.
"I'm so used to making stuff that looked like shit but this was so easy; I just put eight buttons in a box and called it a day." –Ryan Yang
What I learned
I learned some math.
What's next for Boba Watch
We'd love to add a community aspect to the app, providing a way for friends to view each other's drink purchase histories and implement a type of leaderboard feature (or rather, a loserboard if you will) to incentivize people to use the app more frequently. We would also add geotagging as a feature so that orders would be able to be pinned to a specific location on a map in addition to a map that would display all boba locations surrounding a user. To facilitate the process of logging purchases, we'd also eventually like to implement a feature that would allow a user to simply take a photo of a receipt on the app and for the transaction to be logged automatically.