Bubble Tea Tracker

A big number to show your addiction, I mean spending!
Graphs!
More Graphs!
Logout Page.
Login page.
Navigation bar.

Age group: Under 18

Inspiration

So many of our fellow friends fall into addiction of bubble tea.

Many have fallen and are even doing bubble tea streaks!

Its time to finally save them from their ~~suffering~~ addiction.

Oops, went a bit too dark there. On a honest side, we've seen a lot of young high school students, especially grade 9s, constantly going to bubble tea stores after school. While its all fun and games, the spending adds up over time. We wanted to bring back some reality for young teenagers to help them become more responsible and improve their financial literacy. Hence we created bbt-trackers!

What it does

Simple. A big number to keep track of your bubble tea spending to date, in addition graphs to help you visualize those numbers.

How we built it

NextJs and react framework for the pages and navigation. ChartJs was used for the graphs. Tailwind was used for quickly styling the elements with CSS. Lastly Vercel was used to deploy the app so others can use it outside of our local machine.

Challenges we ran into

Getting the login/logout to work. We had issues communicating back-end values through different pages.

Accomplishments that we're proud of

Actually completing it in under 12 hours! Most of our team members had classes and other events during the main day (Sunday).

We also learned had to use NextJS (especially hooks and useEffect), as well as actually deploying an app with Vercel! Wohoo!

What we learned

Do use our time wisely and to read documentation. Learned had to use NextJs (especially hooks and useEffect)

What's next for Bubble Tea Tracker

Flavour tracking

Having a section to enter the flavour you bought - creating a graph that shows your most purchased flavour (could help you choose which ones to cut down on)

Streaks