All solutions

This was the toughest challenge so far and it helped me understand React a bit better. There's still a lot to learn about routing and loading items synchronously! Often, I was getting an error "can't do function on undefined", because my JSX wanted to load before the items were downloaded from the API, so it would load NULL or undefined! I made a few workarounds for it, but I believe it can be done much better.

This was also my first project in Tailwind-CSS. It's quite handy and really quick to figure out. Their documentation is great.

One design choice I gave up on was simply downloading all countries once and then just filtering them based on different properties. I did not do this because https://restcountries.com already gives us methods for filtering. Was this a good choice?

A small thing people may or may not notice is that links to border countries are actually country codes and those always return 1 object, not an array. I was getting burned out, so I did not finish making a better solution.

What are the best ways to compartmentalize a React project? I am not sure! How many folders should I have and for what purposes?

All constructive feedback is appreciated.

This was the first app where I could see how react can be a shortcut for development. I still had problems with mostly CSS. Some of them are more, some less visible.

1. "learn more" button, upon clicking stays completely white and its state won't change back to normal until clicking a different element.
2. Perfect placement of elements, I could not make the middle card larger than others, but also keep all elements perfectly aligned.
3. I used a library "react-switch" for the toggle. So, I could not set a gradient as its color. I hope this is not too much of a problem. Their API only supports hex colors.
4. What is the best way to put a new favicon using react?

I am trying to learn react. I also had a lot of difficulties setting the styles properly. Here are the problems.

1. the colored top part of cards, is it a border or not? Mine does not look the same.
2. the layout of the 4 cards, I had to add extra divs and then tries to somehow arrange them to look like on the picture, but it was extremely difficult. I tried using grid and flex, but I was not sure how to set up the empty space in the 1st and 3rd column.
3. I could not put an <img> tag with a path to the given SVGs, but instead, I had to copy the entire SVG code inline. The problem was a path error "could not find the file specified". I was not sure how.
4. The positioning of the SVGs is not good. I tried using absolute positioning, but every time I would use "top" or "bottom", all 4 SVGs would arrange on top of each other for some reason.

Any advice about the layout in general?

The button starts glowing upon hovering, but if you click it, the glow gets stuck, no matter where you move the mouse, until you click on something else. How can I make the button glow and stop glowing when I stop hovering? My solution is a bit of a hack, using ::after pseudoelement, so I am not sure how to fix it.

This was also my intro to typescript. I installed it, because I like that strongly-typed languages make it easier to fix some mistakes, so I hoped this could help. I didn't have much use of it yet, since the only script needed here is to fetch advice from the API.

the header font must be bold or something, the specification given in the readme file is possibly wrong?