REST Countries with react, react-router, and tailwindcss

Hello, John.

Your solution is very impressive! Nice work.

I noticed the countries' images are different sizes. You could potentially wrap them inside a <span> and give it a min-height and min-width and set these dimensions according to the smallest country's image.

You could also do the same with the max-width and max-height and set them according to the smallest image's dimensions.

This way, all the images grow to a fixed maximum point and shrink to a fixed minimum point.

Try it, and let me know how it goes.

All the best with future solutions.

Hi @John,

It is my pleasure to review your work. It is good how you combined everything. Since you want to make it even better, here are a few comments to make it even better:

• The loading component was hardcoded. You could have used an image, icon or just svg image if you care about sizing and resolution. reference: https://github.com/jbidz/rest-countries/blob/main/src/components/Loading.jsx
• The continent dropdown should have a default of Continent. Currently, the first child of the select element is used as default (Africa). Use:

<option>Continent</option>

reference: https://github.com/jbidz/rest-countries/blob/main/src/components/SelectByRegion.jsx

• Each Card displays a raw population e.g 123342321. This is not very readable for big numbers. Use humanize to format the population in the card component. Here is a link to the npm package: https://www.npmjs.com/package/humanize-number.

reference: https://github.com/jbidz/rest-countries/blob/main/src/components/Card.jsx

I know this is a lot but it is rewarding to do.

If you find this helpful, kindly mark it as helpful.

Best Regards.