ADVANCED | Overflow: The Caffeine Tracker App

Inspiration

As Computer Science students at Dawson college, we consume alot of caffeine to get us through our day to day tasks. Many of us are addicted to caffeine, and are dependant on it go about our day. The issue is, this can not only impact our current health, but also our long term health. Hence, we decided to create Overflow to ensure that young adults can start keeping track of their daily caffeine intake, and monitor it overtime.

What it does

Our app allows contains a search bar that contains a repository of a hugely diverse set of caffeine products. The user can here add any products that they've consumed throughout the day, from a Tim Hortons French Vanilla, a shot of 5 hour energy, a Coca Cola, to even a scoop of C4 preworkout. Adding more products then fills up the cup of coffee on the main page, representing the daily caffeine intake of the user. The individual can the open the app throughout the day and add everything that they have consumed. They can also view a comprehensive analysis of their Daily Caffeine Intake, as well as a Weekly breakdown of how much caffeine they've consumed throughout the week.

How we built it

Overflow was built using React with Vite as its bundler. All state within the application is managed using localStorage.

Challenges we ran into

The main challenge that we ran into was the coffee cup on the main page and its filling animation. As a team, we had never worked with animations or even SVGs before, so it was quite difficult for us to implement this feature.

Accomplishments that we're proud of

In the end we are extremely proud of the filling animation despite the steep learning curve it presented us. We also really like how the site turned out as a whole. It feels minimalistic and elegant while also being extremley user friendly. As a team where 50% of us are more comfortable with backend developement, we are happy that we were able to contribute such a signifcant amount to build this application in such a short amount of time.

What we learned

We learned how to work as a team while being in a stressed, time constrained environment. We incorporated many new techniques such as animations and svgs. Although the learning curve was quite steep, it allowed us to improve our overall coding ability and knowledge.

What's next for ADVANCED | Overflow: The Caffeine Tracker App

In the future, we would like to implement user authentication to allow users to create accounts, perhaps making the app more interactive between different users of the application. We would like to add functionality to modify daily entries, get a more detailed view of each beverage, and add favourite drink functionality to make it easier for the user to add drinks. In a perfect world, we would have functionality that would allow the user to scan a barcode if the drink has one and it would find the corresponding drink in our dataset.

Team Name: Donotus Momentus

Team Members: Matteo Robidoux, Santiago Luna, Amina Turdalieva, Raagav Prasanna

Built With

• css
• html
• javascript
• localstorage
• react
• vite