A Web Application to visualize COVID-19 presence in the United States.
With the COVID-19 pandemic, the United States has become a global hotspot for the spread of the virus. There is a great need to be able to visualize the spread of the virus in the United States and across the globe. This will help the masses understand the spread of the virus as well as the regions that are affected the most. This application is designed to visualize the spread of the virus in the United States. The application makes use of the Covid Act Now API. The application is designed to be used in any browser.
The task is Front-End inclined involving the use if React Js , a REST API, Material-UI, and a Google Map. The choice of React Js was made because it is a library that is easy to use and is very popular.
The application requirements outlined in the test have been met in my implementation. However, as with any software, there are trade offs that need to be considered. The trade offs are as follows:
- The Covid Act Now API does not provide the coordinates of the USA States (lat,lng) in the response. This is a limitation of the API. As a result, I had to get that data elsewhere. The coordinates data set might not be very accurate and some of the states might not be represented in the dataset
Some of the future improvements that I would like to make are:
- The application is not fully optimized for mobile devices
- One the user searches/filters for a specific state, I'd like to be able to zoom in on that state
- The UI could be improved in several ways
- including pie charts & bar graphs in the visualization
- improving the overall look & feel of the application
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
What things you need to install the software and how to install them.
- Node.js
- NPM/Yarn
- React Knowledge
- REST APIs
- General HTML/CSS Knowledge
- Git
- NPM Packages
- Material UI
- Google-Map-React
A step by step series of examples that tell you how to get a development env running.
Say what the step will be
1. Install Node.js
2. Install NPM/Yarn
3. Clone the repository from GitHub
4. Open terminal and navigate to the project directory
5. Run "yarn install" to install all the packages
6. Run "yarn start"
7. Open the browser and navigate to http://localhost:3000
8. Enjoy!
The Application is to be used to view & understand the spread of COVID-19 within the United States.
- To create a production ready version of the application, run "yarn build"
- To deploy the application to a live system, run "yarn deploy"
- ReactJs - A JavaScript library for building user interfaces.
- NodeJs - Server Environment
- Google Maps API - Maps Javascript API
- Google Map React - a component written over a small set of the Google Maps API
- Material UI - UI library for React
This was written by Kelvin Mwaura Find below my various digital profiles
- Hat tip to the following people & organizations for their contributions: