disease.sh APIThe disease.sh API, available at https://disease.sh/, is a free API that provides data on current global outbreaks, including COVID-19. Its documentation is available at https://disease.sh/docs/. The API endpoint that interests us is https://disease.sh/v3/covid-19/countries/{country}. This endpoint provides data on COVID-19 cases by country. The path parameter {country} is a “iso2” or “iso3” country code. For example, to get data on the United States, you would use the endpoint https://disease.sh/v3/covid-19/countries/US. The response is a JSON object with the following properties: (Note: The values are based on the data at the time of writing.)
{
"updated": 1719242306308,
"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
}Let’s create a src/data/types.ts file to define the types for the API response:
// Define the types for the data that is returned from the https://disease.sh/
export interface DiseaseCountryInfo {
_id: number;
iso2: string;
iso3: string;
lat: number;
long: number;
flag: string;
}
// Define the types for the API response that is returned from the https://disease.sh/
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;
}
// Define the types for the statistics that are displayed in the dashboard
export interface CovidData {
countryName: string;
countryCode: string;
countryFlag: string;
confirmed: number;
active: number;
recovered: number;
}Notice the CovidData interface. This interface defines the shape of the data that we will display in the dashboard. The countryFlag property is the URL to the flag image of the country. The confirmed, active, and recovered properties are the total number of confirmed, active, and recovered cases, respectively.
Let’s define a function that fetches the COVID-19 data for a given country and returns the data in the shape of the CovidData interface. Create a src/data/api.ts file and add the following code:
import {
CovidData,
DiseaseApiResponse,
DiseaseCountryInfo,
} from "./types.ts";
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,
};
}The fetchCovidData function fetches the COVID-19 data for a given country code and returns the data in the shape of the CovidData interface.
restcountries.com APIThe restcountries.com, available at https://restcountries.com/, provides information about countries, including their ISO2 or ISO3 codes. The API endpoint that interests us is https://restcountries.com/v3.1/all. This endpoint provides the list of all countries and their details. The response is a JSON array of objects, with each object representing a country. Each country object has many properties but the ones that interest us have the following structure:
// Define the types for the data that is returned from the https://restcountries.com/
export interface PartialCountryData {
name: {
common: string;
official: string;
};
cca2: string; // ISO 3166-1 alpha-2 code
cca3: string; // ISO 3166-1 alpha-3 code
}Add the above type definition to the src/data/types.ts file. The cca2 and cca3 properties are the ISO2 and ISO3 codes, respectively. We can use these codes to query the disease.sh API for COVID-19 data.
To define the shape of the data for consuming the list of countries, update the src/data/types.ts file with the following code:
// Define the types for the dropdown that are displayed in the dashboard
export interface CountryData {
name: string;
code: string; // ISO 3166-1 alpha-2 code
}Finally, define a function that fetches the list of countries and their ISO2 and ISO3 codes. Update the src/data/api.ts file with the following code:
import {
CountryData,
PartialCountryData,
} from "./types.ts";
const REST_COUNTRIES_API = "https://restcountries.com/v3.1/all";
// Fetch the list of countries from the REST Countries API
export async function fetchCountries(): Promise<CountryData[]> {
const response = await fetch(REST_COUNTRIES_API);
if (!response.ok) {
throw new Error(`API request failed! with status: ${response.status}`);
}
const data: PartialCountryData[] = await response.json();
// Map the API data to the required format
return data.map((country) => ({
name: country.name.common,
code: country.cca2,
}));
}For your reference, here is the final structure of the src/data/types.ts and src/data/api.ts files:
The final src/data/types.ts that includes all the types is as follows:
// Define the types for the data that is returned from the https://disease.sh/
export interface DiseaseCountryInfo {
_id: number;
iso2: string;
iso3: string;
lat: number;
long: number;
flag: string;
}
// Define the types for the API response that is returned from the https://disease.sh/
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;
}
// Define the types for the statistics that are displayed in the dashboard
export interface CovidData {
countryName: string;
countryCode: string;
countryFlag: string;
confirmed: number;
active: number;
recovered: number;
}
// Define the types for the data that is returned from the https://restcountries.com/
export interface PartialCountryData {
name: {
common: string;
official: string;
};
cca2: string; // ISO 3166-1 alpha-2 code
cca3: string; // ISO 3166-1 alpha-3 code
}
// Define the types for the dropdown that are displayed in the dashboard
export interface CountryData {
name: string;
code: string; // ISO 3166-1 alpha-2 code
}The final src/data/api.ts file that includes the API functions is as follows:
import {
CovidData,
DiseaseApiResponse,
PartialCountryData,
CountryData,
DiseaseCountryInfo,
} from "./types.ts";
const REST_DISEASE_API = "https://disease.sh/v3/covid-19/countries";
const REST_COUNTRIES_API = "https://restcountries.com/v3.1/all";
// 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,
};
}
// Fetch the list of countries from the REST Countries API
export async function fetchCountries(): Promise<CountryData[]> {
const response = await fetch(REST_COUNTRIES_API);
if (!response.ok) {
throw new Error(`API request failed! with status: ${response.status}`);
}
const data: PartialCountryData[] = await response.json();
// Map the API data to the required format
return data.map((country) => ({
name: country.name.common,
code: country.cca2,
}));
}In this task, we explored the disease.sh and restcountries.com APIs. We defined the types for the data returned by these APIs and created functions to fetch the COVID-19 data for a given country and the list of countries.
In the next task, we will create the layout and style for the dashboard.