Kids Against COVID

Figma wireframe used to design the UI of our application
Multiple options to send thank you notes
API to query local hospitals
A digital canvas to create letters
A map to display all of the letters submitted

Inspiration

The international efforts to tackle the current pandemic have been head-on and vast. However, for many civilians locked in their homes for the safety of others, they can feel helpless and want to do more than self-quarantining. Students, as we all knew from first-hand experience, are one such group growing increasingly more restless and wanting to take action. Thus, we created KidsAgainstCovid. Countless news articles and hospital websites are expressing their appreciation for letters, posters, and other tokens of appreciation they have received from the community. However, there is currently no streamlined method to locate hospitals fighting the disease near a certain location.

What Our Platform Does

Our platform, with three simple message delivery types and systems, makes sending thank you messages easier. Users can send their notes through either a video by uploading a short recorded video, a physical letter in which we provide some basic instructions on how-to and a mailing address, and a digital message canvas. This canvas allows users free reign to be creative with their message while not being restricted by a lack of printing accessibility or physical materials. The goal was to motivate even the youngest of children to have the opportunity to write thank you notes. By generating a list of local hospitals to send the letters to using the user's address, the user gets to give right back to the community that has likely been giving them so much. This list is generated by an API tracking which PPE supplies hospitals are in need of.

We also keep track of notes that have been sent around the country as a visual morale boost to quite literally "show the love".

How We built it

The stack for KidsAgainstCOVID is React for stateful rendering, Reactstrap (npm module combining Bootstrap and React components) for UI/Design, ReachRouter for navigation, and Firebase Firestore/Storage for data management with Firebase Hosting to deliver the app.

KidsAgainstCOVID also makes use of Google Maps API to render the map of letters/locations and an API built using Postman by one of our friends to query from FindTheMasks.com. That API retrieves nearby hospitals in short supply of PPE and is hosted here: https://covid-19-hospitals.now.sh/

We used Figma to design wireframes of the site's pages for reference and guidance as we worked. For the Digital Letters, we built out the drawing portion using React-Canvas-Draw and color palettes with React-Colors, in addition to a lot of integrated native Javascript Canvas code. The Digital Letter itself is created through a composite of several different canvas objects.

These designs are uploaded to Firebase Storage, and the entire submission itself is stored on Firestore. We utilize the real-time feature of Firestore to dynamically update our map as users submit their letters.

The platform is hosted entirely on Google Cloud, using Firebase for deployment.

Challenges we ran into

A major challenge we faced was to keep the experience as simple as possible. Additionally, even though it was hosted on a website, we wanted to make sure the notes were genuine and authentic. To remedy this, we provided some more rigid templates, but also some very free options to allow users to choose their route.

What's next for "Kids Against COVID"

As healthcare professionals and essential workers continue to work unrelentingly, we wanted to ensure every member our community could give back and show their gratitude—even small— in some way.

We hoped this would continue to support front-line workers while empowering kids that anyone truly can make a positive difference.