Covid Hub

Inspiration

The COVID-19 pandemic has led to a dramatic loss of human life and presents challenges in public health, food systems, and the economy. Governments and Corporations have responded to the pandemic by providing relief aid and COVID infection data. However, the provided information is not centralized as it comes from different sources. We've created a centralized website that consists of a Home Page, About Us tab, a Discussion tab, a map of the covid cases, and a relief form to reduce the abstraction barrier for people.

What it does

The Home tab explains the purpose of the website. It also consists of a chat with a bot to remind people of the importance of washing their hands and wearing a mask. The About tab explains the inspiration that went behind the website, how the site works, and how we built it. The Discussion tab is where anyone can make a post, such as how they are feeling after getting COVID-19, or what symptoms they had. The Map tab indicates the confirmed cases, dead, recovered, and last updated times of COVID data in all countries around the world. The Relief Form tab should be filled out for people who need money or food, and this information will get forwarded to governments and/or corporations that are willing to provide help. And the Useful Links tab references other articles or information that should be read by the viewer.

How I built it

We built our website using HTML, CSS, and JavaScript. We used the Maps JavaScript API by google to create a map and add markers. A TrackCorona API to get COVID-19 data. The relief form uses Firebase to track the submitted data. The chat on the home page was made with JQuery.

Challenges I ran into

None of us had any experience of creating a website prior to this hackathon. We had also never used any of the tools we listed in the “built with” section. Fortunately, JavaScript, CSS, and HTML had plenty of online resources to learn from. Google’s Map API was well documented, but adding markers and integrating it with TrackCorona API was challenging. Google’s firebase was difficult to use but was an effective way of gathering data. JQuery was also useful in creating our bot as it helped handle events, perform animation, and simplify code.

Accomplishments that I'm proud of

This was the first website that we’ve made, so it’s a major milestone in our coding careers. Learning how to make a website while integrating various API’s and tools is something we are proud of.

What I learned

We learned how to use HTML, CSS, and JavaScript to make websites and create a dynamic discussion forum. We learned how to use Google Maps API and TrackCovid API to create a dynamic map with covid details and incorporating it into our website. We learned how to use firebase to store relief form data. And we learned how to use Jquery to animate code.

What's next for Covid Hub

There are several things we plan on doing to Covid Hub after this Hackathon. First, we want to make it mobile responsive so it can be viewed on any platform. The TrackCovid API gave us a few incorrect latitude and longitude information for certain countries. For example, the map displays Namibia in the United States (even though it’s located in Africa. In the future, we will use a better API. After we fix these issues, we plan on publishing this website for external use.

Built With

• css
• firebase
• google-maps
• html
• javascript
• jquery
• trackcovid-api