DEV Community

Cover image for COVID-19 Tracker with React, Chart.js, Nodejs
Shawn Humphreys
Shawn Humphreys

Posted on

COVID-19 Tracker with React, Chart.js, Nodejs

covid-19 tracker

What can I do to contribute to the current crisis? Often, I found myself repeating this question over and over the past few months. As a recent boot camp grad, I know I wanted to take the skills I learned and contribute to the current crisis the world is facing. One day, I scrolled through GitHub projects that were trending and found that said "COVID-19 Tracker". I wish I can find the original project that I encountered, but it was very simple and easy to read. Sure enough, I found a YouTube tutorial on how to build one. The issue that the project was the line chart was mobile-friendly and the card components were too small in 4k view. I decided I wanted to tackle this project and put my touches on it!

Visual Data

To present the data visually, you will need to learn Chart.js. I found it to be pretty simple and easy to use. The visual data does present nicely, but I had to do a few media queries to optimize it for mobile use. I also used CountUp to add numbers counting up in the card component. I have not used CoutnUp before, but I will be using it for future projects as it is very confident to use.

Chart.js visual data

## Future Updates
I plan on turning the page to be most visually-pleasing. Although this is a really good start, I would love to add a few designs to get the project to stand out for when I present the project to employers. I would also like to add a few more animations to it to add to the user experience of the page.

Github Project

GitHub logo mrshawnhum / covid19-tracker

Covid-19 Tracker with visual chart data both line and bar graphs

Coronavirus Tracker Web Application

LIVE site - https://example-covid-19-tracker.netlify.app

covid-19 tracker

With the unfortunate circumstance, I have decided to develop a web application to track the current cases of the pandemic and provide visual data of the statics. Please feel free to fork this project!

Introduction

This application was developed with create-react-app. To load the page on port:3000, you must use Yarn Start.

API

The API I am utilizing for real-time data - https://covid19.mathdro.id/api

Chart Visualization

I used Chart.js to present the visual data in a line graph and bar graph.

Component layout

I used Material-UI to conveniently design my components. This allows me to focus on the logic of the application as material-ui designs my responsive components

Countup

With visual increasing number format, I have used Countup from react-countup




Check out the project on GitHub! Please leave a star on the project if it has provided any value to you! Feel free to fork the project and put your spin on the project. I am always interested to hear how others had made it better or unique.

Top comments (0)