/aj-covid-tracker-react-mapbox

React Covid Tracker using ArcGIS Cases API, Twitter Search API and Mapbox JS

Primary LanguageJavaScript

World Coronavirus Map Frontend

This map tracks the latest infection counts and rates as supplied by the ArcGIS database. It also provides death counts and rates per selected state or country as well as real-time tweets from individuals in the affected areas that are accessed via Twitter's Statuses API.

Motivation

With misinformation surrounding the current pandemic at an all-time high, I wanted to be able to receive the most accurate information possible as supplied by reliable sources. The purpose of this app is the dissemination of truthful coronavirus reports by comparing statistical data with independently supplied information from on-the ground observations made by real people via Tweets.

Build Status

Netlify Status

Code Style

react component style - functional with hooks

Screenshots

world coronavirus map screenshot

Tech/Framework Used

  • Front End: React.js
  • State Management: Redux.js
  • Data Retrieval: ArcGIS API
  • Selective User Tweets: Twitter Statuses API
  • Data Map Visualizations: Mapbox.js API
  • Donation Capability: Coinbase Commerce API

Site Build & Backend Deployment

Current continuous build is managed by Netlify and maintained using Netlify CLI. Backend and environment variables are configured on a Heroku server instance.

Features

Users are able to toggle between infection/recovery data and visualizations via a switch supplied in the custom dashboard. Users may also choose to hide the dashboard to view the map unobstructed. Tweets are pulled from a preset area centered around the selected area and update with each click. Clicked hotspots bring up a modal displaying the selected area's statistics.

Installation

Fork and clone this repository and run yarn to install required dependencies. You will also need to fork and clone the Backend repo and host it at your preferred provider. Heroku is recommended for ease of implementation.

There are several APIs you will need to create KEYS for.

The frontend may be hosted on any desired service, however Netlify is by this author preferred.

Contribute

A feature which may augment the usefulness of the app is a country selector. As of this current iteration, cumulative data from the United States has not been included.