With Washington being the first state hit by COVID-19, we all have experienced the devastating effects from this pandemic from school closures to grocery store runs. One of the main things causing this lack of paranoia is lack of factual information. The spread of inaccurate information can cause even more of our family and friends to be in danger. As a result, many people have started hoarding resources, leaving very little to none for those who need those supplies desperately. In addition, our fear of going to hospitals can leave us trying to diagnose ourselves, not knowing the danger of taking multiple medications at once. If our website can aim to keep people safe, why not add your loved one to that list?

What it does

Our website is made up of three components: information tab, resource calculator, and medication checker. Our information tab shows live updates regarding the COVID-19 pandemic, including total cases, new cases, total deaths, and recovered cases. In addition, we included common misconceptions that many of us have been guilty of believing. By clearing up these myths, we hope to reassure the public and increase the spread of factual information. Our resource calculator gives an accurate approximation of the resources needed for the amount of time a family spends in quarantine. This way, people only get the supplies sufficient for their time in quarantine while still allowing others to provide for themselves during this crisis. Our last component, the medication checker, allows the user to check if a combination of drugs is safe or harmful. By doing so, they are able to limit hospital trips, thus reducing human interaction while still staying safe and healthy during the process.

How we built it

We wanted to have the flexibility over our website and thus we hosted our own server and acquired our own domain. First we created an AWS EC2 Ubuntu instance on Amazon Web Service for a place to host our server. For our server, we decided to use Node.js with express middleware and greenlock for SSL certificate. We created a server that is able to handle requests and will automatically update itself from the master branch of our github repository. We utilized Bootstrap Studio to develop a beautiful, professional, yet clean design in mere minutes. We used api calls to obtain coronavirus data for the world and the United States. In the end, we were able to create a functional and aesthetic information website for the COVID-19 pandemic.

Challenges we ran into

One of our major challenges was our lack of communication. Because this hackathon is online and we were not supposed to meet in person, being able to communicate what needed to be done and how it was supposed to go proved to be more complicated than we thought. However, we were able to utilize group chats and have multiple online video calls to assign and delegate tasks. Since it was our first time working with backend Node.js servers and AWS instances, we spent a while setting everything up. Managing security groups, getting elastic IPs, forwarding ports, were a challenge for first time back-end developers with no web service experience like us. Workflows on how to collaborate on multiple different parts of the project was a challenge also. We were able to overcome all of the challenges that we faced and developed a fast and simple workflow which resulted in a clean and functional website.

Accomplishments that we're proud of

During this learning process, we each individually gained our own accomplishments as we are all relatively new to this field of web development. For example, we felt accomplished after gaining the general notion of how server hosting works. Because it was a relatively new topic that most of us had no experience with, we were glad to be able to get the gist of it in just a short amount of time. Most of us were struggling along the way, but after reaching out to mentors who nudged us along the pathway, we each got our first breath of accomplishment and heave of relief. After we launched our website on March 29th, we shared the website to friends and families in hopes that they would be able to learn new information that they can use to protect themselves. From their experiences with our webpage, 100% of them reported that they learned something new and some even changed their existing behaviors after understanding the wide-ranging impacts that penetrate the linchpins of society, over hundreds of thousands of people and especially those who are most vulnerable.

What we learned

Since it was our first time dipping our toes into the world of full-stack developing, we as high school students faced many challenges. We were able to learn many aspects of front-end and back-end programming from basic HTML to CORS requests and DOM manipulation, from basic AWS instances to Server Hosting and Async API requests. Although this is just the beginning of our journey with programming and full-stack development, the variety of knowledge we learned through this hackathon can be easily carried over into our daily programming and design life, and forms a good foundation for future endeavours.

What's next for COVID PRO-TIPS

In order to increase our user-base, we want to implement this website into a full-fledged mobile application in order to reach a broader range of people in a more efficient method. With our wide-range of services offered in just one single website or mobile application, we hope that we become the first choice when it comes to gaining a complete, thorough understanding of the COVID-19 disease. However, as time progresses, the coronavirus pandemic will part ways with the human population, but our website will still have a use: the medication interaction checker. Because its convenience is not only limited to the COVID-19 pandemic, users are able to save time and money even after this crisis by using this interactive feature to check future medications without going to the hospital. Our hope is to expand our range of drugs to further represent the board range of medications currently to increase the safety of our community. Even though our site is providing live updates regarding the pandemic, we hope to provide a map to help users better visualize the spread of the virus so far. This way, users will be able to track the contagious rate of COVID-19 and prepare accordingly.

+ 3 more
Share this project: