Menu Close

Alcohol Monitor WebSite built with React

Alcohol Monitor WebSite built with React

Alcohol Monitor (Deltahacks 9)

image

Contributors 🤝

Tools 🔨

  • ReactJS
  • Firebase
  • CSS

About

This project was designed during Deltahacks IX_ and was submitted to the Google Developer Student Club Challenge category. The primary goal of this category was to build a project that solves one of the United Nations’ 17 Sustainable Development Goals using Google Technology. We chose the goal of creating a web application that promotes good health & well being.

This program calculates the users blood alcohol concentration using a few input parameters to determine whether it would be safe for the user to drive their vehicle (Using Ontario’s recommended blood alcohol concentraition 0.08). The program uses the users weight, sex, alcohol consumed (grams) (shots [1.5oz], wine glass [5oz], beer cup [12oz]), alcoholic beverage. The alcoholic beverage is a local database constructed using some of the most popoular drinks.

With the above parameters we used the Widmark formula described in the following paper. The Widmark is a rough estimate of the blood alcohol concentration and shouldn’t be taken as a definitive number. The Widmark formula is:

  • BAC=(Alcohol consumed in grams / (Body weight in grams * r)) * 100
  • Alcohol consumed (g) = Volume consumed (mL) * Alcohol (%) * Density of Alcohol (0.789 g/cm^3)
  • BAC in terms of time: BAC = BAC - (BAC * hours * 0.015)

Database 💾

For the Google technology we decided to integrate the Firebase Realtime Database. We store all of drinks on there so that whenever we reload the page or access the website on a different devices, we can continue from where we left off. Your alcohol blood concentration also depends on how much time has passed since you drank the drink so we are able to store the time and update it continuously to show more accurate results.

Problems we ran into 😰

  • Incorporating time into elapsed time calculations
  • UseState hooks constantly delayed
  • Reading data from database

Future improvments 🪄

  • Photo scan of drink
  • More comprehensive alcohol database
  • More secure database implementation
  • User logins
  • Mobile implementation
  • BOOTSTRAP!

image

image

View Source Code
Posted in Bootstrap, React