Rest Countries API - React

Community feedback

• 

  Jean Gustave NSABIYERA•390

  @jeangu2002Posted 16 days ago

  Nice work. Probably the best solution i have seen so far.

  1
• 

  Andrey•2,570

  @dar-juPosted about 1 month ago

  Hi!

  Great job! The animation you used is absolutely super! It's the best I've seen.

  I have some comments on the work:

  • the skeleton is triggered when the page is initially loaded, but it seems to me that it is disabled not when the images are loaded, but by a timer. Because I see alt and there is still no image
  • alt for images on the page must be unique
  • your routes are not worked out, I can't go to the country via a direct link. In addition, the path with spaces is not used quite correctly - https://countries-api-geojsone.netlify.app/South Georgia and the South Sandwich Islands
  • it is better to use header instead of div at the top of the site, it is not semantically correct to use nav, header is enough here.
  • why are you using the <div> tag for "Dark Mode"? Semantically, it is correct to use <button> or <a>, it is a switch
  • your page has a broken header hierarchy, if H1 is used for "Where in the world?", then the country name should be H2. When selecting regions, headers should not be used at all there.
  • if I select the Europe region, then go to the country, if click the Back button, then I do not get back to Europe
  • often, when I click the Back button, an image of a woman flashes. Perhaps she needs a small delay in appearance
  • you can still work on "performance", PageSpeed ​​Insights does not have very high indicators
  • you can also work on accessibility, not being able to work on the site using a keyboard

  Otherwise, everything is cool, good luck with the development!

  1

  ---

  

  P

  Tsotne Meladze•1,020

  @tsotneforesterPosted about 1 month ago

  @dar-ju I am so grateful to receive such detailed review of my project, I spent a bunch of time to do it, but still have got a lot of details not working as intended and you listed really crucial things!

  here is what I have fixed 🏆

  • semantics - I dont really pay much attention to them, I could have had much more mess in HTML tags
  • I uploaded _redirects for netlify, so now you can access link directly
  • unique alts (most easy and silly mistake 😅)
  • region is maintained in "/:country" route, so if you go back, region is selected
  • I have never thought about accessibility things and it turned out to be quiet challenging, what a joy to navigate without mouse! 🐭
  • skeleton was indeed controlled by timer to make it appear a little it longer, but 700ms is not enough, I just disabled it
  • image of woman was because "loading" state in custom fetcher hook was false

  "performance" issues and react app optimizations is really much needed indeed!

  1