Explore the disease.sh API

Our dashboard needs COVID-19 data: confirmed cases, active cases, and recoveries for each country. The disease.sh API at https://disease.sh/ provides that data.

The endpoint https://disease.sh/v3/covid-19/countries/{country} returns COVID-19 data for a specific country. The path parameter {country} is an iso2 or iso3 country code. For example, requesting /countries/US returns data for the United States. Here is what the response looks like (values shown are from the time of writing):

{
  "updated": 1772995852279,
  "country": "USA",
  "countryInfo": {
    "_id": 840,
    "iso2": "US",
    "iso3": "USA",
    "lat": 38,
    "long": -97,
    "flag": "https://disease.sh/assets/img/flags/us.png"
  },
  "cases": 111820082,
  "todayCases": 0,
  "deaths": 1219487,
  "todayDeaths": 0,
  "recovered": 109814428,
  "todayRecovered": 0,
  "active": 786167,
  "critical": 940,
  "casesPerOneMillion": 333985,
  "deathsPerOneMillion": 3642,
  "tests": 1186851502,
  "testsPerOneMillion": 3544901,
  "population": 334805269,
  "continent": "North America",
  "oneCasePerPeople": 3,
  "oneDeathPerPeople": 275,
  "oneTestPerPeople": 0,
  "activePerOneMillion": 2348.13,
  "recoveredPerOneMillion": 327994.92,
  "criticalPerOneMillion": 2.81
}

Defining the Covid data types

Let’s create a src/types/covid.ts file to define the types for the API response:

// Country information returned by the disease.sh API
export interface DiseaseCountryInfo {
  _id: number;
  iso2: string;
  iso3: string;
  lat: number;
  long: number;
  flag: string;
}

// API response from the disease.sh API for a specific country
export interface DiseaseApiResponse {
  updated: number;
  country: string;
  countryInfo: DiseaseCountryInfo;
  cases: number;
  todayCases: number;
  deaths: number;
  todayDeaths: number;
  recovered: number;
  todayRecovered: number;
  active: number;
  critical: number;
  casesPerOneMillion: number;
  deathsPerOneMillion: number;
  tests: number;
  testsPerOneMillion: number;
  population: number;
  continent: string;
  oneCasePerPeople: number;
  oneDeathPerPeople: number;
  oneTestPerPeople: number;
  activePerOneMillion: number;
  recoveredPerOneMillion: number;
  criticalPerOneMillion: number;
}

// Internal type for the COVID-19 data that is used in the application
export interface CovidData {
  countryName: string;
  countryCode: string;
  countryFlag: string;
  confirmed: number;
  active: number;
  recovered: number;
}

Notice the CovidData interface at the bottom. This defines the shape of the data we will actually display in the dashboard. We do not need every field from the API, just the country name, code, flag, and the confirmed, active, and recovered counts.

Fetching Covid data by country

Next, let’s write a function that fetches COVID-19 data for a given country and maps it to our CovidData shape. Create a src/services/disease.ts file:

import type {
  CovidData,
  DiseaseApiResponse,
  DiseaseCountryInfo,
} from "@/types/covid";

const REST_DISEASE_API = "https://disease.sh/v3/covid-19/countries";

// Fetch the COVID-19 data for the given country code
// The country code is the ISO 3166-1 alpha-2 code
export async function fetchCovidData(countryCode: string): Promise<CovidData> {
  const response = await fetch(`${REST_DISEASE_API}/${countryCode}`);
  if (!response.ok) {
    throw new Error(`API request failed! with status: ${response.status}`);
  }
  const data: DiseaseApiResponse = await response.json();
  const countryInfo: DiseaseCountryInfo = data.countryInfo;

  // Parse and return the required data
  return {
    countryName: data.country,
    countryCode: countryInfo.iso2,
    countryFlag: countryInfo.flag,
    confirmed: data.cases,
    active: data.active,
    recovered: data.recovered,
  };
}

Checkpoint: Commit your progress.

git add .
git commit -m "dashboard-02: Define types and API function for disease.sh"
git push