Covid Dashboard App
In this tutorial, we will build a Covid Dashboard App using React. The app fetches Covid-19 statistics from the disease.sh API and displays the total number of cases, active cases, and recoveries for a selected country. The list of countries comes from the restcountries API.
While building the app, you will learn the basics of fetching data from APIs in React. We will also use a popular component library, shadcn/ui, to style the app.
Getting Started
Go to the covid-dashboard repository and click “Use this template” → “Create a new repository” to create your own copy.
Clone your repository to your computer:
git clone <your-repo-url> covid-dashboard
cd covid-dashboard
code .
The template is a TypeScript React app scaffolded with Vite. It also includes Prettier and Tailwind CSS. We will build the dashboard in several steps, each explained in a separate section. Follow the sections in order to build the app.
If you get stuck at any point, you can view the complete solution on the master branch of the original repository.
Learning Outcomes
- Set up a React project with a component library (shadcn/ui) for styling
- Define TypeScript interfaces and service functions to fetch and transform data from external APIs
- Break a UI into reusable components and manage their data with state, effects, and props
- Share data between components by lifting state up to a common ancestor