REST Countries with react, react-router, and tailwindcss

Community feedback

• 

  Vicktor•920

  @Victor-Nyagudi

  Posted over 2 years ago

  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.

  00

  Marked as helpful
• 

  Kehinde Hussein, Fasunle•190

  @Fasunle

  Posted over 2 years ago

  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.

  00

  Marked as helpful