Today, I am proud to release my latest web app and project: Coronavirus (COVID-19) Live Monitor, your hub for news and information on the Coronavirus outbreak. The code can be found on the GitHub repo.
Go check it out!
The site includes three main sections: stats, WHO press releases and health resources, and latest news.
The stats section includes a total case count, as well as total deaths and recoveries and their percentages within the total case count.
The WHO press releases and health resources section includes a video of the latest WHO press conference about the virus and links to latest situation reports and WHO news, as well as various links to health resources such as the NHS (U.K.) and the CDC (U.S.A.).
Finally, the latest news section includes news articles about the virus from a vast array of news sources. News on the virus is also sorted into country based the user's IP address, allowing for users to read news in their own language, localized for their area.
How It Was Built (in around 2-3 days total)
If you're interested in reading specifically how this was built, I've written a detailed description of the various steps I took to take this from 0 lines of code to a working web app in the course of a few days and a few more commits to GitHub.
If you choose not to continue reading, I hope you take a look at the site if you have a chance.
If you do continue reading, I hope you find my development process interesting and check out the code on GitHub.
1. Ideas and Wireframing
Before I wrote a line of code for this project, I made sure to know exactly what I was trying to build, and which technologies I would be using.
One thing I kept in mind while working on this is the large amount of information around this epidemic. At the time of writing, it can seem almost impossible to escape headlines of the virus, whether that be scrolling through YouTube, on Instagram or Twitter, or even COVID-19 related posts on The DEV Community. This constant flow of information into people about this virus has in some cases caused a lot more panic than helpful action.
So, bearing this in mind, I decided it best to not create my own coronavirus informational content sourced from health experts, but instead just link to them as health resources, as I am not an expert myself.
My main goal with this project was simply to get something working, fast.
I drew out three sections of a basic site, one large section with a case count, another with latest news, and a larger one in the center with linking to latest W.H.O. press releases and other health resources such as the CDC (U.S.A.) and the NHS (U.K.).
2. Setting Up the HTML and CSS
With this project, I went for a very component-like based CSS structure. Styles were reused in most places in my CSS, allowing for quicker development time.
I set up the basic HTML and CSS with the three sections I had chosen (stats, information, and latest news), and made sure to make each section a component.
Here's what that might have looked like:
In this example, the
panel class was a component, styled with rounded corners, some padding, and a background color.
The site had numerous reused components, such as a panel header, a tabs system, and several more.
3. Building the News Panel
I have some experience building news aggregators in the past, for example my news site Kalva, which organizes articles from hundreds of news sources into one place, searchable and sortable by source and country.
For that site, I used NewsAPI to get articles from various sources and sort and search them. I used NewsAPI for the news panel of this site as well.
fetch script to get latest articles and headlines with the keyword "coronavirus" in them, and then display those articles in the news panel.
NewsAPI also has a feature that allows articles to be sorted by country, which I implemented in an
select box in the news panel.
To display news from the user's current country, I used IPAPI to determine the user's country based on their IP address, and then displayed news from only that country.
4. Building the Cases and Stats Panel
The first thing I needed for the cases and stats panel was actual statistics. At the time of writing the code, I didn't have access to APIs like The COVID Tracking Project, so I chose to use a basic web scraping and cronjobs system.
The general idea was to scrape a site with stats every couple minutes, and then update my own site with those stats.
That web scraper in PHP was then requested by a Python program running locally every few minutes.
You can see specifically how I did this on the code on GitHub.
5. Building the Latest Updates and Health Resources Panel
The last panel included two tabs, one with latest updates and a press video from the W.H.O., and another with links to health resources.
For fetching the latest W.H.O. press video, I first attempted a similar system for my PHP web scraper to get the current case data.
6. Making it Work on Mobile
After everything was done, I spent some time writing the CSS to make everything work smoothly on mobile.
The URL Hash looks something like this:
https://covid19.xtrp.io/ --> default tab https://covid19.xtrp.io/#cases --> cases and stats tab https://covid19.xtrp.io/#news --> news tab
One key advantage of using a URL hash is that, when a hash is updated or added, the page is not forced to reload. This allows for a seemless user experience while also making sure the page is correctly displayed on load.
A hash is easily set via the
That's All For Now!
I'll be updating this site at xtrp.io a bit more regularly in the near future as well as releasing new projects, and be sure to check out some of my other posts if you liked this one.
Thanks for scrolling.
— Gabriel Romualdo, March 21, 2020