Corona Stats India

Table of Contents

• Bootstrapping
• Tailwind CSS
• Gatsbyjs with Tailwind
• D3
• Mapbox
• Framer Motion
• Static Site Generation
• Getting Started
• Deployment
• Learning Gatsby

Bootstrapping

Use the Gatsby CLI to create a new site, specifying the default starter.

# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

Tailwind CSS

A utility-first CSS framework for rapidly building custom designs

As a client of TailwindUI (highly recommended), I got to use their amazing components using @tailwindcss/ui package

Gatsbyjs with Tailwind

I have used the Gatsby theme authored by myself to setup tailwind with Gatsbyjs. It includes TailwindCSS, TailwindUI & TailwindUI/react

D3

We are displaying two simple bar graph to render the daily increase in cases/deaths. I have used the amazing book Fullstack D3 for reference about using d3 with react

Mapbox

Used Mapbox Gl JS to render choropleths. It is a JavaScript library that uses WebGL to render interactive maps.

Framer Motion

Used framer motion and it's simple animation API. It works well with Server-side rendering and avoids flashes of unstyled content

Static Site Generation

Most of the data displayed on the site is static generated. I used source plugins to fetch data from APIs provided by Covid19India

Getting Started

First, run the development server:

yarn develop

Open http://localhost:8000 with your browser to see the result.

You can start editing the page by modifying the codebase. The page auto-updates as you edit the file.

Deployment

The easiest way to deploy Next.js to production is to use the Vercel (ZEIT previously) platform from the creators of Next.js. All that we need to do is signup with Vercel and import the project through the console

Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.