MaskUp 😷

What this project does 🌎

MaskUp is a web app that features both live and group mask detection, along with statistics describing daily detection rate. Here are some of MaskUp's features:

Live Mask Detection

MaskUp features live mask detection powered by Google's Teachable Machine. This ML model was trained with 938 images from Kaggle.

Live Detection Statistics

Live detection statistics allows users to see a visualization of mask / no mask trends over time. Hovering over a data point shows you the exact value for that point.

Live Covid-19 Cases

Using the Covid-19 API, the homepage of MaskUp automatically fetches the lastest number of cases and deaths, keeping people both informed and healthy!

Vaccine Locator

MaskUp's vaccine locator allows individuals to find a vaccine near them, allowing everyone to stay safe!

Group Mask Detection

Upload multiple pictures (with as many people in each), and you will be provided with a summary of each of their mask status. Users are also able to export group mask detection stats to a .csv file, for further analysis.

Handwashing reminders

Constantly forgetting to wash your hands? Sign up for texts to wash your hands every two hours!

Symptom Tracker

Simply fill out a form, checking for which symptoms you are feeling, and MaskUp will tell you the percentage of being dangerous to others!

Symptom Results

Check the results page to see a visualization of your past symptom responses, and which symptoms are affecting you the most. Users ca also export this to a .csv file for further analysis.

Why this project is useful 📈

187 million: the number of Covid-19 cases thus far. With Covid cases spiking because of the delta variant, masks are still essential for helping all of us stay safe, regardless of vaccination status.

As a result, MaskUp was created. With live and group mask detection, MaskUp could be used in public spaces worldwide in order to only allow entry to those who are wearing a face mask.

Whenever MaskUp detects that a user has a mask on, a webhook is sent to a custom URL, which could be used to open a door or gate.

This not only keeps us safe, but also helps flatten the novel coronavirus curve.

• Symptom reports are able to be exported and sent to medical providers.
• Covid data visualizations help data scientists see the progress of Covid-19.

How we built this 🔨

• NodeJS
• NPM Packages (Jimp, Twilio)
• Google Teachable Machine
• Qoom database
• Covid-19 API
• Web Dev (HTML, CSS, Vanilla JS, Bootstrap)

Key lesssons that we learned 📚

• Doing what we are good at: MaskUp was our first time working together with a teammate to create a web application. This helped us both learn how to allow each person to complete the part of the project that they were stronger in. For example, Ganning is a better backend developer, so he focused on the NodeJS and Vanilla JS part of the project, while Elise helped design and prototype MaskUp on Figma.
• Login Systems: Using Qoom's account database to create MaskUp's login system showed us the true power of databases: the ability to store multi-session data about a user.
• NodeJS: MaskUp's group detection was created using NodeJS and Azure functions. Since I was completely new to JavaScript in general a few months ago, I've learned a ton by using NodeJS in a real web app.
• Writing maintainable code: During one of the creator meetings, Jared said that writing readable and maintainable code is one of the most important aspects of coding. This way, other programmers can easily read your code and contribute to it!

Accomplishments that we are proud of ⭐

• Getting the group mask detection working using NodeJS, Azure functions, and Jimp (npm package).
• Being able to show data visualizations. This was my first time working with charts and graphs outside of Google Sheets and Microsoft Excel.
• Using the Qoom login system. I've never used a database storage system prior to this, and I implemented MaskUp's login system using Qoom's Account Database.
• Doing live mask detection with Google Teachable Machine. Though it may seem simple, I never knew that machine learning could be done without knowing complex ml libraries such as tensorflow or keras. Google Teachable Machine will definitely be a resource that I will use in the future.

What is next for this project 📱

In the future, MaskUp could be turned into a mobile app. A MaskUp app not only makes mask detection more convenient, but also eliminates techincal differences between computers. For example, some computers don't have a webcam, preventing users from utilizing MaskUp's live detection feature.