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!
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.
## 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.
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
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!
This application was developed with create-react-app. To load the page on port:3000, you must use Yarn Start.
The API I am utilizing for real-time data - https://covid19.mathdro.id/api
I used Chart.js to present the visual data in a line graph and bar graph.
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
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)