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
New Relic's Browser Application Tool:
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
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)
I like it. What did you use for visualisation?
Thank you! I used react-vis, an open-source library for data visualization using React.