All solutions

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

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

I very much like the way of learning and handling the cart using react context, so that if it was a multipage application, the context would very much help me in getting data anywhere inside any component with synchronization.

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

My components were in different files sharing the same data or same state and I was having difficulty with props drilling in react, and then I found how I can use react context to make a context provider and then get the same data anywhere using hooks.

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

I think that I handle themes with a very good logic using cn utility function which is using clsx and tailwind-merge libraries.

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

The only challenge that I encountered was how to create a theme switcher toggle button, and how to implement different themes, making sure that code remains DRY.