What is Coronavirus (COVID-19)?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. 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 Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE) 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. So as I have collected the data now I have decided to build a full-stack application with interactive maps so that it will be quite easier for the user to track the cases across the globe. Node.js Backend Services JHU CSSE 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 csv-parser npm module which is a very popular CSV parser and converts CSV into JSON at a rate of around 90,000 rows per second. 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 node-cron 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. 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 GeoJSON 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 GoogleMap, Mapbox and many others supports GeoJSON format. So I have design one endpoint as /markers.geojson which takes the input from the MongoDB and prepares all the coordinates into GeoJSON format, so the front-end framework can call this end-point while doing the map implementation. React.js Frontend Services I have chosen react.js as my front-end framework for this application and to maintain the application state I have also implemented redux which is a very popular javascript library for managing application state and both of these frameworks are quite efficient and easy to implement. To populate the coordinates on the map i have implemented Mapbox 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. As I have already mentioned that Mapbox also supports GeoJSON format so to populate GeoJSON data over the map, Mapbox has a technique called Source-Layer which is an individual layer of data within a vector source and Sources defines which type of data map should display and in this application data type is ‘geojson’ and after defining the data Layers 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. 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-applicationWebsite 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 twitter I’ll be happy to answer your questions. 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 :) What is Coronavirus (COVID-19)? 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 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? 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 Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE) 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 full-stack application 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 Node.js Backend Services JHU CSSE 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 csv-parser 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 node-cron 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 GeoJSON 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 GoogleMap , Mapbox and many others supports GeoJSON format. GeoJSON GoogleMap Mapbox So I have design one endpoint as /markers.geojson which takes the input from the MongoDB 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 React.js Frontend Services I have chosen react.js as my front-end framework for this application and to maintain the application state I have also implemented redux 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 Mapbox 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 Source-Layer which is an individual layer of data within a vector source and Sources defines which type of data map should display and in this application data type is ‘geojson’ and after defining the data Layers 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 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/ Github Link:- covid19-full-stack-application covid19-full-stack-application Website Link:- https://covid19.hackbotone.com/ 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 twitter 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 :)
