All solutions

Hey! This is one of the most complex projects I've built on React.

It's the first time I create a theme switcher, and the first time I create skeleton loaders.

Any feedback is welcome!

I'm specially interested about the project architecture with the skeletons. I decided to create the component, and the skeleton, both sharing the same stylesheet but in a different file.

Like this:

.
├── Countries
│   ├── Countries.module.scss
│   ├── Countries.tsx
│   └── CountriesSkeleton.tsx
├── CountryDetails
│   ├── CountryDetails.module.scss
│   ├── CountryDetails.tsx
│   └── CountryDetailsSkeleton.tsx
│
└── App.tsx

I think I wrote waaaay to big components. I'll separate them in the next days into something more manageable and 'good-practiced'.

I finally finished this challenge.

I'm looking for issues in the usability of the page, like a breaking layout, missing features, or something like that.

Also, comments on the architecture or the code of the project will be very welcome!

There's one issue I'm specially looking for help: the fonts.

I'm not sure if my files are corrupted or it's something special about this font, but it looks like the text itself has a bottom margin of 3-4 px. Makes some elements like the New! and Featured flags look badly aligned.