Inspiration

I was first inspired to build this web app because of the need I saw for people to know what the status concerning the pandemic is for specific countries and locations around the world, making it very easy and accessible to the user.

What it does

The app takes the daily reports provided by John Hopkins for Covid-19 located in this repo: https://github.com/CSSEGISandData/COVID-19, checking for changes every hour and making updates accordingly in order to show the most recent recorded numbers for total cases, deaths and recoveries for countries, territories and even counties (counties only in U.S.). It uses this information to make it easily accessible to people. To do this, the app makes use of svg maps (from simplemaps.com) which are interactive and can be used to search for the numbers for a specific location in the globe. Checkout the video and the live app to see this in action. Additionally, the app makes use of rss feeds to get information related to coronavirus from a compilation of news sources including: "ABC", "BBC", "CBS", "CNN", "Fox", "NBC", "New York Times", "Reuters", and "The Guardian". It then shows the summaries provided by the rss feeds in a news section in the site where users can go visit the original source. These feeds are stored in a database and are refreshed every 15 minutes. The web app is optimized for mobile viewing as well as this was made a priority.

How I built it

I used node and express to build the web server, mongodb for my database, html, css, javascript and jquery for the frontend and pug as a templating engine.

Challenges I ran into

The challenges I ran into included being able to get the most reliable and up to date information concerning case numbers around the globe and figuring where to find the map svgs, how to make them interactive and easy to use. it was also my first time using pug and I hadn't had a lot of experience with express before this project. Additionally, finding the rss feeds and processing them was a challenge. Lastly, it was challenging to implement the logic for keeping the information up to date.

Accomplishments that I'm proud of

This is the first time I've built a full-fledged launched application in my career as a developer as I'm only a Junior in college so it was very satisfying to see the app live, working and providing useful information for people. Starting out, I had no idea how I was going to get the data or do the maps and seeing them working after very long hours also made me feel really proud. Lastly, the news articles weren't part of my plan but as I realized that this could be useful and found out ways to do it, it was really cool to see this come to life. I'm proud of building something useful and the incredible learning experience of building something from the ground up simply by doing research and taking things one step at a time.

What I learned

I learned so many things but here are a few:

  1. How to make svg maps interactive
  2. Working with a mongodb database
  3. How to create routes
  4. Launching an app with heroku
  5. Getting data from the internet, processing it and storing it
  6. Automating tasks to update the data automatically
  7. Using rss-feeds to retrieve news, process the articles and display them
  8. How to use a templating engine like pug
  9. Making jquery my best friend
  10. Optimizing site for mobile users via media queries
  11. Using Google Analytics to keep track of the users on the site

What's next for Coronavirus (Covid-19) Global Map

I can see a future when it comes to the news pages and adding more useful, unique data for specific countries and territories.

Built With

Share this project:

Updates