The Relicans

loading...
Cover image for open-source-covid-vis

open-source-covid-vis

justan0therdev profile image Ruan Montelo ・2 min read

What I built

A website that provides data and related news about COVID-19 with open-source tools.

Category Submission:

Science and Observation: COVID-19

App Link

Click here to access the hosted website

Screenshots

Image showing the home page of the website

Image showing the data visualization page of the website

Image showing the news page of the website

New Relic's Browser Application Tool:
Image showing New Relic's app dashboard with Core Web Vitals metrics

Description

The website shows news that are somehow related to COVID-19 and information related to confirmed cases, recovered, and deaths using everything open-source.

Link to Source Code

open-source-covid-vis

Permissive License

MIT License

Background

People I know (including close family members) have been affected in some way by the COVID-19, losing jobs, health (physical and mental) and even their lives. Being able to provide information about it is critical to raise awareness about the kind of negative impact the disease might have in somebody's life; open-source is able to do that in a lot of ways, from providing technical tools to data about everything that is happening.

How I built it

Website:
The website was built using Next.js and styled-components. The data used by the application comes from two free Web APIs, using Rapid API.

For the data visualization, the open-source react-vis library was used with data from one of the APIs that provide information about cases in various countries. The said data was stored inside a JSON file to allow for fast rendering by the browser using React and react-vis.

For the news page, an HTTP request is made to a WebAPI and cached. The cache is kept in memory for two hours until another request can be made again. This was done to prevent a lot of requests to the WebAPI and allow for faster page loads, allowing for a better user experience.

New Relic's Browser Application Tool:
New Relic's tool helped me measure two things which I was most concerned about: Core Web Vitals and cache efficiency by measuring page loads. The tool was up and running in seconds and all I needed to do was "link" the app to my website and have it measuring data about it, such as the mentioned Core Web Vitals, page loads, sessions, list of browsers, devices etc.

Discussion (2)

pic
Editor guide
Collapse
p_mbanugo profile image
Peter Mbanugo

I like it. What did you use for visualisation?

Collapse
justan0therdev profile image
Ruan Montelo Author

Thank you! I used react-vis, an open-source library for data visualization using React.