REST Countries API with color theme switcher

What are you most proud of, and what would you do differently next time?

I am very much proud of how I integrated shadcn ui select component which is using Radix UI Select Primitive, Although I am thinking of creating my own select component using Radix UI next time.

What challenges did you encounter, and how did you overcome them?

The challenge that I first encounter was how to handle json data and use typescript to only fetch the data that will be displaying on the screen and filter out other unnecessary properties from the data. Here is how I tackle this problem.

import data from "./data.json";
 const countries: CountryList[] = data.map((country) => {
    return {
      name: country.name,
      population: country.population,
      region: country.region as Region,
      capital: country.capital,
      flags: country.flags,
    };
  });
```ts

**As for country detail page, here is how get the data:**

```ts
export const getCountry = (name: string): CountryDetail => {
  const country = data.find((c) => c.name.toLowerCase() == name.toLowerCase());
  if (!country) throw new Error(`Country with name ${name} does not exists`);
  let borderCountries = country.borders?.map((border) =>
    getCountryByAlpha3Code(border)
  );
  return {
    name: country.name,
    nativeName: country.nativeName,
    topLevelDomain: country.topLevelDomain,
    population: country.population,
    currencies: country.currencies,
    region: country.region,
    subregion: country.subregion,
    languages: country.languages,
    capital: country.capital,
    borderCountries: borderCountries,
    flags: country.flags,
  };
};
```ts