Home

Awesome

COVID19-Worldwide-Stats

A Coronavirus COVID-19 global data statistics application - developed using React, Gatsby, Material UI, Recharts

Live Demo (view details by clicking lines and bars)

<p align="center"> <img height="500" src="https://github.com/maxMaxineChen/COVID19-Worldwide-Stats/blob/master/images/laptop.png" /> </p>

Overview

The data of this statistics accessed from the mathdroid API, which serving data from John Hopkins University CSSE.

The Live Demo data gets updated every 8 hours automatically from a JSON file from this Git Repo by Github Actions. Tech stack: React, Gatsby, Material UI, Recharts, Github Actions, Responsive design

<p align="center"> <img width="700" src="https://github.com/maxMaxineChen/COVID19-Worldwide-Stats/blob/master/images/how-the-site-work.jpg" /> </p>

Getting Start

  1. Clone.

    git clone https://github.com/maxMaxineChen/COVID19-Worldwide-Stats.git

  2. Install deps.

    cd COVID19-Worldwide-Stats/
npm install

  3. Running

    npm start

    You can now view covid19-worldwide-stats in the browser with http://localhost:8000/ . View GraphiQL, an in-browser IDE, to explore your site's data and schema: http://localhost:8000/___graphql

  4. Other Commands

    npm run format
# Format your code
npm run lint
# Eslint Airbnb without .jsx extension and without single quote

Deploying

The live demo uses Github Actions to update data/data.json file and deploy to branch gh-pages which hosted by Github page.

If you like to know the detail of the workflow, check it out deployUpdate.yaml

If you like to know more about data source, check it out this Git Repo

Todo