COVID-19 Data App

COVID-19 Data is an open-source Progressive Web App dashboard for tracking COVID-19 statistics, built with Next.js, SWR, and Chakra UI, and deployed at covid19.sznm.dev. It was created by developer sozonome and is available as a GitHub repository for reuse or contribution.

What is the COVID-19 Data App?

The COVID-19 Data App is a web application that fetches pandemic statistics from public APIs and displays them in a responsive dashboard interface. It takes data from @mathdroid's covid-19-api, @ariya's dekontaminasi, and @Reynaldi531's api-covid19-indonesia-v2, producing visual summaries of case counts, recoveries, and deaths. The current v2 release is written in TypeScript using Next.js for routing and server-side rendering, Chakra UI for component styling, and SWR for caching and server state synchronization. The app is designed as a PWA, meaning it can be installed on supported devices and work offline.

Key Features

• Next.js + TypeScript — Bootstrapped with create-next-app, the project uses Next.js pages under src/pages and full TypeScript typings, with the only missing typings being the API response shapes (listed as a to-do).
• Chakra UI styling — The interface is built with Chakra UI components, and responsive desktop styling is already implemented.
• SWR data fetching — The SWR library handles data requests to the three public COVID-19 APIs, providing caching and revalidation out of the box.
• PWA configuration — The repository includes next-pwa configs (marked as completed in release notes), allowing the site to be installed as a Progressive Web App.
• Live demo — A hosted instance runs at http://covid19.sznm.dev/, so you can see the current output without setting up the project.
• Version history — v1 (May 2020) was built with GatsbyJS, Evergreen UI, TailwindCSS, and Nivo Charts; v2 (Sep 2020) was redesigned and rewritten on NextJS, Chakra-UI, and SWR.
• In-progress roadmap — Charts are still to be added, and type definitions for API responses are planned so the any type can be removed.

Who is the COVID-19 Data App for?

• Next.js developers — Use this repository as a reference for combining Next.js, Chakra UI, TypeScript, and SWR in a real-world data application.
• Indonesian users — The app includes an integration with api-covid19-indonesia-v2, making it useful for tracking local Indonesian COVID-19 statistics.
• PWA enthusiasts — See how next-pwa is configured in a Next.js app to make a dashboard installable and offline-capable.

Use cases

• Developers: study the codebase to learn how SWR is used to fetch and cache data from multiple external REST APIs within a Next.js page structure.
• Hobbyists: deploy the app to a hosting service and share the live dashboard so friends and family can monitor global pandemic numbers.
• Portfolio reviewers: demonstrate a polished Chakra UI dashboard with responsive desktop styling and a clean release-note history across two major rewrites.

How does the app work?

The app runs as a Next.js project; after cloning, you start the development server with pnpm dev and open http://localhost:3000. The dashboard fetches JSON data client-side via SWR from the three public API endpoints, then renders cards and numbers through Chakra UI components. The release notes indicate the site was first built with GatsbyJS and later rewritten to the current Next.js + Chakra-UI stack.

FAQ

What data sources does the app use?

The app pulls from three public APIs: mathdroid's covid-19-api, ariya's dekontaminasi, and Reynaldi531's api-covid19-indonesia-v2. These provide global and Indonesia-specific pandemic statistics.

How do I run the project locally?

Clone the repository, install dependencies with pnpm install, then run pnpm dev to start the development server. The page at http://localhost:3000 auto-updates as you edit files in src/pages.

Is the app a Progressive Web App?

Yes, the v2 release includes next-pwa configuration, which is marked as completed. This enables installability and offline support for the dashboard.

What front-end libraries are used?

The current version uses Next.js as the framework, Chakra UI for UI components, SWR for data fetching, and TypeScript for static typing. The earlier v1 release instead used GatsbyJS, Evergreen UI, TailwindCSS, and Nivo Charts.

Are charts available?

Charts are listed as an in-progress to-do in the release notes. The current version displays numeric data but does not yet include chart visualizations.