Inspiration

According to a live case tracker at https://www.nytimes.com/interactive/2020/us/new-york-coronavirus-cases.html, New York alone has over 300,000 confirmed cases of coronavirus. We wanted to create an application that would better represent the number of cases in local communities, so that a user of the application can find the amount of cases in their area. Furthermore, when assessing the risk of not following social distancing protocol, users would be able to weigh in the number of cases in an area.

What it does

A user can login and register an account. In this process, they submit their information to the database and then that information is rendered as a marker on a map. The user can move around the map and see the corona virus cases around them.

How I built it

We built a single-page application seperated into a frontend, and backend. The frontend consisted primarily of a free Google Map API, and React-Redux. Furthermore, we needed a backend that used Postgres, Node.js and this database would store user information, and would have routes for retrieving this information in the frontend.

Challenges we ran into

Showing markers on the map on frontend when trying to retrieve information from backend. Setting up the database foreign keys. User authentication (login/signup) so that they can only access certain areas of the application when they have a user status.

Accomplishments that I'm proud of

Being able to use React-Redux Being able to setup a functional backend Being able to send information from frontend to backend Being able to render markers on the Google map

What I learned

How to use a map api and set database How to use React Hooks How to use elephantSQL How to use Redux store and local state at the same time in a component to add different functionalities

What's next for Coronavirus Map

Fix and polish the quirks of the website and make it fully functional Implement a better UI

Share this project:

Updates