Inspiration
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.This application serves as a way to inspire the community to take action against the virus through making protective masks, thus providing people in quarantine something fun/productive to do, stagnating community spread in addition to potentially benefiting doctors/nurses if donated.
What it does
MaskWeaver is an app that focuses on teaching people ways to make CDC approved face masks with household materials, such as old shirts and bandannas. The user logs into the interface and is given the option to learn how to create new masks. Once the masks have been made the user uploads the pictures to get points for the number of masks built. In addition to uploads, there is information on how to donate these masks - which is through a multi corporation project called HealthEquip that identifies and ships medical supplies to nearby hospitals for free - which can earn more points and bonuses. 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. Overall this game-like application is focused on making protective gear something people at home can DIY (giving people at home something productive to do) which helps in preventing 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
This was our second-ever project using Firebase, the third-ever project with React, and our third week of learning web development technologies as a whole. As such, it remained difficult for us to do a lot of the core functionality, especially integration between the browser client and the Google Cloud servers.
Our main challenge was to get friends to work, 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're proud of
This was the first 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, how to integrate mobile gestures such as swipes into a React application.
What's next for MaskWeaver
Our team plans on integrating more features to improve the UX, including:
- a built in react 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
People Behind MaskWeaver
MaskWeaver is made by STEM oriented high schoolers Daniel Wei, Haoli Yin, Ryan Ma and Rhea Dixit.
Log in or sign up for Devpost to join the conversation.