In the current state of the coronavirus in the US, there have been a variety of issues contributing to the constant spread of the virus. Some major issues include the lack of people abiding by social distancing rules through protective gear and the lack of medical supplies available for hospitals and clinics around the world as they fight against the global pandemic. One parallel through these two issues reside in protective masks, which some people are failing to wear when in public areas and what healthcare workers sometimes don't have access to during their shifts. Aside from surgical masks the CDC has recommended that people use tightly knit cloth-made masks in order to prevent spread. Our application SocialShield serves as a way to inspire the community to take action against the virus through making creative DIY protective masks, which can stagnate community spread and provide a way for people to give back to the community through donation.

What it does

SocialShield is an app that focuses on socially gamifying the mask making process. The user logs into the interface and is given the option to learn how to create new masks, as well as donate them through HealthEquip. Once the masks have been made the user uploads photos to get points for the number of masks built, and if they donate the masks, they earn double the points. Players have the ability to friend others on the app and there is a leader board for those who have accumulated the most points through creation and donation, which encourages users to make masks to catch up to their friends. Overall this game-like application is focused on making protective gear something people at home can DIY, thus allowing all sorts of creative freedom in design and colors, that can prevent community spread, as they now have a mask for when in public, and is beneficial to health care workers in the case the user donates.

How we built it

The frontend of the application is built in the React framework from Facebook, using normal web technologies such as HTML, CSS, and JS. The backend of the application uses Google Cloud’s Firebase service, including APIs and real-time databases. The application is deployed using npm, Heroku, and GoNative.

Challenges we ran into

Our main challenge was to get the friends network to work, as it is the main component of our project, along with points, which required asynchronous real-time updating of the database, as well as dynamically hooked callback functions that would re-render the page with new friends, and the ability to parse JSON-encoded object packets sent over the network quickly and efficiently to display large friend activity lists.

Accomplishments that we are proud of

This was the second-ever mobile optimized application that we had made, so we’re proud that we were able to learn how to configure everything so that the UI and UX were well made for a mobile device. We also successfully integrated Firebase with the React application, which we’ve only done once before, so we’re also extremely proud of our ability to do that, as well as to use its real-time asynchronously-updated database features, API for file storage, and more.

What we learned

We learned how to mobile optimize and incorporate authentication into our application, how to handle real-time database updating, how to integrate Firebase with React, how to handle asynchronous render callback functions, and how to integrate mobile gestures such as swipes into a React application.

What's next for SocialShield

Our team plans on integrating more features to improve the UX, including: a built in camera so that the user may directly submit a taken photo to the database and earn points. a gallery of images so that the user may see all the photos that they had taken previously Milestone tracker to keep track of the total number of points (e.g. 10, 50, 100 points) Uploading the webapp portion to a legit domain name Expanding the the database of ways to make the mask, as in add more creative add ons so people can express themselves through their facemasks Automatically notify people based off of number of uploads when to donate Keep a total of masks and subtract when masks are donated

People Behind SocialShield

SocialShield is made by STEM-oriented high school juniors Ryan Ma, Daniel Wei, Rhea Dixit and Haoli Yin.

Share this project: