Covid-19 Tracker React App

Get daily information about the number corona virus cases in any part of the world.

Comment

Inspiration

Sincerely I got my inspiration for this web app from a Youtube tutorial. Then I decided to create something similar with extra functionalities compared to that of the tutorial I'd watched. Also I've been hearing a lot of false information on the statistics of the number corona virus cases in the world which I felt like it was misleading and had a terrible effect on the mental health of the masses. So I decided to start with my community first by creating a web tool that is gonna help them get the correct information from a reliable API. Covid-Traqa (that's the name of the web app) is not just a web tool but with the help of an online apk bundler, I was create an android version of my web app (download here)

What it does

Covid-Traqa provides users with daily information about the number of infected, recovered and deaths cases of the corona virus infection. This data is also been visualized on the world's most popular basic charts (a line chart, bar chart and a pie chart). The scope of this data provided by TrackCorona goes beyond provinces to cities and also countries too.

How we built it

I built this web application straight on my computer using my knowledge on react js, html, css, jQuery and javascript. Also with knowledge on how to consume an API (http fetch requests).

I also got some fonts from google fonts.

For the images, from a free stock images site.

The charts, I used a react chartjs library.

For the search, I built a custom search engine.

With the help of Nodemailer, I was able to create a new email to handle the web app's email services. I did this in the node backend. There I created a method to handle email services and send automatic response emails.

Challenges we ran into

Since I couldn't afford enough internet connection, what I'll do was, I'll download the various endpoints (data endpoints from the api) in json format and I'll place them locally in my project directory and then from there I'll be making my API calls to my localhost.

This was my first time working on a complete project at all and I had little knowledge about react and how web frameworks work. I'd just moved from "spaghetti coding" javascript websites to framework architecture. So the whole thing was still very strange to me.

I'd never worked with an external API before. So the whole concept of making api calls was very strange too and new to me.

I was working both on this project and my school work too, so it was a very challenging one to pull off.

Accomplishments that we're proud of

I'd two main accomplishments that I can say I'm really proud of :- - I finally learned how to use a backend technology. - Above all I was able to transform data from a remote API to useful information on my website.

What we learned

By the end of this project, I'd learned a whole lot of new technologies and these are the technologies that govern the web world today. I'd learned :- - Full-stack web development. - React Js and how web app frameworks work. - The whole concept of APIs - How to use external libraries as tools in achieving certain goals. e.g the chartjs library to visualize my corona virus statistics data. - Node, Express and how to host a web app on a cloud service (I used heroku).

What's next for Covid-19 Tracker React App

For now I don't have much in mind. But in the nearest future, I'll like to implement a world map visualization chart in the website and also create a feature where the system will be able to diagnose patience of Covid-19.

Share this project:

Updates