ProtectUH

About

In a team of four people, we created a COVID tracking app called ProtectUH using Meteor, MongoDB, React, and Semantic UI. ProtectUH is a web application that helps students at the Univeristy of Hawaii at Manoa (UHM) keep track of their COVID-related symptoms, tests, and vaccines. The goal is to provide an easier way for UHM to keep track of the wellness of their students. The app allows students to check their daily symptoms, input test results, and input vaccine cards to show UHM that they can or can not go to campus for that day.

The Home Page

My Contributions

For this project I worked on the Daily Health Check-In page, symptoms collection, vaccine card image input, and cleaning up stuff files and Mongo collections.

Daily Health Check-In Page

I built the visual aspect of the check-in page using React and Semantic UI. I utilized checkboxes in a BoolField to check if the student had any of the following symptoms. If they find that any of the symptoms apply to them, they can select true for the corresponding symptom set and submit their check-in. When the check-in is submitted I utilized SWAL, an alerting system, to give the notification the student can not come to campus if one of the symptoms is true and if the symptoms are all false, the student can come to campus. I worked with my teammate to get it to connect to the check-in history and work out the errors in getting the form to successfully submit.

Symptoms Collection

In order to build a functional Daily Health Check-In page, I created the symptoms collection to keep track of the possible symptoms and help keep track of it in MongoDB. I utilized the Simple Schemas as I did in the check-in page. This also helps with the check-in history page that will post the corresponding check-in history to the user that’s kept in the symptoms collection.

Vaccine Card Image Input

I worked with my teammates to figure out how to implement the input for a vaccine card. The input takes in an image of the user’s vaccine card, so the admins can verify that the vaccine card is real and the student is vaccinated. I attempted to do this with creating a new input with React and doing the collection part with the GridFS from MongoDB which is a collection that holds files. I failed doing it this way, so I ended up just working with my teammates about how to do it correctly.

Clean-Up

I cleaned up all of the stuff files by deleting all of the corresponding files. I also fixed the publishing with the Mongo collections to make sure the vaccines and symptoms collections were initialized and published correctly.

Learning New Skills

Through this project I learned a lot about different ways to approad web applications. One of my teammates had a different background, so he provided interesting and helpful viewpoints. He already has a full time job in computer science, so he taught me a lot about team management and how IntelliJ and Meteor aren’t the only tools out there. I learned that in a class or enviornment where we do not have a professor or boss, we have to be our own boss. Setting deadlines and meetings are very important when working in teams because I often find myself either getting lazy or busy with other classes and work that I forget about the projects that only have major deadlines. My only experience with software engineering before this is in the Software Engineering I class I took last semester, so my repertoire is a bit sparse when it comes to tools. My teammate used VS Code to work on our project together and utilized a different task manager app that he uses with work. This opened my eyes to explore different platforms and tools that I might like better. I want to learn the pros and cons of each of the tools out there. Coding wise I learned how to use BoolField in React to create our check-in page and I also learned how to created a custom input field with React to take in images as input. It’s amazing to see each of the components I see on other web applications and learn how to do it myself!

Learn More

Here is the link to our GitHub homepage, feel free to check it out: ProtectUH.

Our source code is located here: Source Code.

The deployed application can be viewed here: Deployed ProtectUH.