Coronavirus (COVID-19) which is an infectious disease caused by respiratory illness and symptoms like flu, cough, fever, difficulty breathing, on December 31, 2019, the first case was recorded in Wuhan, China and later the virus got spread around the world and as of now, around 1 million+ confirmed cases are being recorded since then. You can protect yourself from this virus by following basic precautions like washing your hand frequently, avoid touching your face, maintaining a distance of (1 meter or 3 feet) between people and most importantly if you are sick then immediately call for medical help at your nearest hospital. What is Coronavirus (COVID-19)? This article is originally published at https://hackbotone.com/blog/covid-19-full-stack-application How to build a full-stack application with interactive maps? In the current scenario, it’s quite important to track the statistics of all the cases around the world constantly and thanks to for providing the data to the public user, the data are quite well organized and sorted in very well manner and they are updating their repository every day. Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE) So as I have collected the data now I have decided to build a with interactive maps so that it will be quite easier for the user to track the cases across the globe. full-stack application Node.js Backend Services maintains the data in CSV format in their repository and I need to convert the CSV data to JSON format so that it will be quite easier for the front-end framework to populate the data in an efficient way. So to convert CSV to JSON I have use npm module which is a very popular CSV parser and converts CSV into JSON at a rate of around 90,000 rows per second. JHU CSSE csv-parser And after parsing the data I have stored the data into MongoDB so that it won’t parse the data every time, it will only parse the data when new data will be available. JHU CSSE updates the data once a day around 23:59 (UTC) and to synchronize the data in my server I am using npm modules which is a task scheduler and once you register a task with the given time then it will run in the background and triggers when it reaches to the scheduled time. node-cron And in my case, the scheduled time is 23 hours 59 minutes and when it reaches the time then it will update the data into my server. Now after parsing the data next big challenge is to populate all the coordinates on the map because on the map if I traditionally populate the coordinates then the application will be much slower, so the solution to this problem is which is an open standard format for representing geographical features as a point, line strings, polygons and etc and this format is based on Javascript Object Notation and most importantly all the maps platform such as , and many others supports GeoJSON format. GeoJSON GoogleMap Mapbox So I have design one endpoint as which takes the input from the and prepares all the coordinates into GeoJSON format, so the front-end framework can call this end-point while doing the map implementation. /markers.geojson MongoDB React.js Frontend Services I have chosen as my front-end framework for this application and to maintain the application state I have also implemented which is a very popular javascript library for managing application state and both of these frameworks are quite efficient and easy to implement. react.js redux To populate the coordinates on the map i have implemented which is quite similar to GoogleMap but the major advantage of Mapbox is it’s free and provides many better functionalities such as Custom maps, Clustering and etc. Mapbox As I have already mentioned that Mapbox also supports GeoJSON format so to populate GeoJSON data over the map, Mapbox has a technique called which is an individual layer of data within a vector source and defines which type of data map should display and in this application data type is ‘geojson’ and after defining the data refers to the source for visual representation and styling of the map. And in this way, I have populated all the coordinates on the map. Source-Layer Sources Layers Open Source It will be quite difficult for me to walk you through step-by-step every lines of codes. That’s why I made the complete development open-source on my Github. So that you can also build similar types of application by following this repository. Github Link:- covid19-full-stack-application Website Link:- https://covid19.hackbotone.com/ So this is the overall explanation of this website, I hope you guys understood the tools and techniques behind this application if you find any types of issues like on improving codes then please feel free raise an issue on Github or else you can reach out to me on I’ll be happy to answer your questions. twitter Please stay safe and stay well, I want to mention it again to protect yourself from this virus wear mask, wash your hand frequently and take necessary precautions if you get sick. Thank you & Happy coding :)

Twitter

Read My Stories

Too Long; Didn't Read

Questions about cloud security? Get answers here.

How I build Coronavirus Tracking Application

Too Long; Didn't Read

Company Mentioned

Anshuman Pattnaik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How I build Coronavirus Tracking Application

Too Long; Didn't Read

Company Mentioned

Anshuman Pattnaik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES