Subtle Asian Traits is one of the largest existing Facebook groups, comprised of 1.7 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. Last year, we noticed many posts of members sharing logs of their boba purchases, most of which have took 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.
At LA Hacks 2019, we aimed to create an an all-encompassing, minimally designed financial tracker app that would be both relevant to and loved by this community. Since LA Hacks 2019, we've polished up the original version of Boba Watch that we created during the hackathon and posted about it in the Facebook group, where we garnered a lot of support from the app through thousands of group members sharing it with their friends, and the app gained a lot of traction.
This year at LA Hacks 2020, we hoped to add new features to Boba Watch that allowed friends to further connect with each other through more shareable and community-based features.
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 include a description and star rating of the drink and/or experience.
In Boba Watch 2.0, our newest release, we added user profiles where users could publish boba purchases that they've made as well as their rating and written review of the drink. User profiles also list the user's location and boba drinking statistics including: amount spent on drinks total, number of drinks purchased this month, and average amount spent on a drink. Users can also go to the explore page to see a display of other recent published reviews. Here, users can also view other users' profiles and read their public reviews.
Who the heck uses this?
Well, we currently have 5k+ registered users and several hundred monthly active users. It was pretty surprising to us as well that people are THIS dedicated to boba. With that in mind, since we were working with the same database, it was imperative we don't mess up anything that affects our users in production. Furthermore, we also had to make our code backwards compatible since we changed our schema a bit.
How we 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 - originally written in SQL on a GCP VM instance - was converted to Firestore.
Using Firestore, we not only utilize many of the real-time data features, but also the firebase auth and security rules. Furthermore, we have multiple indexes of our data to promote large-scale data visualization for our users.
The original version was written using Material-UI but because we wanted to have more control over our project and to make it easier to make changes down the line, we started to scrap away all the excess libraries we were using and custom styled everything.
Challenges we ran into
We are a team of two and somehow we were never awake at the same time. I'm just as confused as you are.
Some technical challenges: User input. Before, user input didn't need to be as sanitized because the app was meant to be for just yourself. You would keep track of your finances and you could share some numbers with your friends but text inputs didn't need to be sanitized. Now that we've evolved the app to a social media platform - we need to take care of user inputs (Not just code-wise like escape characters, url encodings, etc. but also racial slurs, harassement, etc.).
Managing data. As projects scale, their complexity grows exponentially. Managing a few data streams was complex but doable. By adding a couple new fields, not only do we have to worry about backwards compatibility (users updating to the new schemas) but also, we have to keep track of all the fields that users manipulate and make sure we have the exact same data on both the cloud, but locally as well.
This is where we run into the biggest issue. Our app currently supports 5000+ registered users. We're also not planning on making money on this app (100% no on ads) so we want to keep this in the free tier of firestore for now. It's easy to do all data manipulations and storage on the cloud but economically, it's just not feasible. There is a TON of code to make sure that local copies get updated properly to match the cloud database without having to make a second get call. Fun fact, we have a handwritten binary search and insert so we could manage data inserts in our localstorage.
Accomplishments that we're proud of
Team synergy! We have well-established roles and lots of experience working together, which made communication and team work easy and efficient. We're also super proud of the traction that the app has already gained, which definitely gave us more motivation to push out a good product that our existing users would enjoy.
What we learned
Creating new features for an existing app is an entirely different experience from developing an app from scratch. Challenges from last year's hackathon related mostly to creating the foundation of the app with a small team, whereas this year's challenges focused mostly on delving deeper into a user's experience in our app and seeing if our features are intuitive and useful for our users.
What's next for Boba Watch
We'd love to add more community-based features 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.
We plan to ship this feature within a month onto the new site. Stay tuned!!
What was done AT this hackathon?
So if you take a look at the Github code (it's all open source), you'll see a bunch of commits and updates to the source code between the current production version of Boba Watch and the start of LAHacks2020. These code updates are not visual/functional updates. Because the original site was written before React Hooks was introduced in a stable release, the site originally used class based components. We planned to work on a boba watch feature months ago and so I decided to clean up the architecture (converting to react hooks, moving file structure, removal of UI libraries like MaterialUI) before LAHacks to facilitate an easier development. Running the before the hackathon start, you'll find the only functional change was the addition of a Google sign-in which was actually a result of a better architecture -> resulting in a simpler login flow which made that addition actually a single line change. If you have any concerns about the integrity of our app, feel free to let me know!!
Try It out
figma, firestore, react