Inspiration

During the Coronavirus pandemic, people are staying at home and using their phones, computers, laptops, etc. They might want to get the latest information about COVID-19 online so they keep visiting different websites for news or data. But Stay Safe compiles all those functionalities into 1 single web application where the average user can get almost all the information about the Coronavirus pandemic that they might want.

Note: We even registered a domain from domain.com called letsstaysafe.online (since staysafe.online was already registered) to participate in the MLH best domain hack

What it does

Stay Safe is a web app that can be used to get information about the Coronavirus pandemic. It consists of 2 different pages. The main page includes a news slideshow which shows the latest news about the pandemic, worldwide. Users can slide through all the news slides and then click on it which will take the user to the article page of the respective news publisher. Then there's a case tracker which is gives the user statistics about the COVID-19 cases, deaths, recoveries, etc. all around the world. It has a map which indicates COVId-19 cases all around the world, a graph which is made up of historical case statistics for the selected country, etc. The Safety & Info page includes some general information about the pandemic that might be helpful to the user.

How we built it

We built this web application using React and JavaScript. There is no custom backend for this application since all the data has been taken from newsapi.org and disease.sh APIs. For the web requests, we used Axios and for the charts, we used Canvas.js

Challenges we ran into

  • create-react-app was not making TypeScript project even if we selected TypeScript during the project initialization prompt.
  • react-leaflet map not zooming in to the country once selected. Most likely an issue with the prop-based state management.

Accomplishments that we're proud of

  • Advanced prop based state management.
  • World map with circles indicating the number of cases.
  • Clean and modularized code.
  • Decent use of CSS
  • Proper usage of ES7 Syntax

What we learned

  • A lot of CSS stuff
  • React hooks and state management with props
  • New ES7 Syntax

What's next for Stay Safe

Although we created this project for this hackathon, I like it a lot. So I decided that I will be working on this project even after this hackathon. It's still not complete yet, it's just in the alpha stage due to the tight deadline of the hackathon.

Built With

Share this project:

Updates