React, React Router v6.4, tailwindCSS project

Community feedback

• 

  P

  Luciano Lima•1,270

  @LucianoDLima

  Posted over 1 year ago

  Hey, Renata. Well done on completing this challenge!

  Here goes some feedback:

  • If user reloads your page, it throws a 404 error (you can test it yourself, just reload the page). There is a config to fix that, I don't host in netlify so I can't tell you how to do it, only hosted in vercel but I'm sure you can find a solution!
  • Take a look at prefer-color-theme on css or js/react. This ensures the page's theme respect the user's device. So if my device is on dark mode, your website will automatically be on dark mode when I visit your website for the first time.
  • Look up a bit more on localStorage, that way you can save the theme locally so when user refreshes your page, or revisit some other time, it will still be in the same theme they left it
  • I recommend adding the following classes in the div the wraps everything below the header to ensure your page doesn't stretch too much when users zoom out or, in my case, has a wider screen (it makes the page looks cleaner)

  max-w-7xl mx-auto
  

  • It would be nice if user could click the border of a country, and this would take the user to that country
  • Still on the border, some countries have a lot of borders, and right now the spacing between them is breaking when you look up a country wich has a lot of borders (try searching for Russia to test it)
  • Some countries have multiple top level domain. Currently you're only displaying one (see Russia again to test it, Russia has 3 top level domain: .ru, .su and .рф)
  • Regarding the alternative text in the images, there is currently over 50 countries that have no alt text. I know the api has an alt text, however it is extremely long, and not all countries have it, so I'd consider adding one of your own, for example: "${currentCountry} flag" or something else short and descriptive
  • You skipped a heading level. You started with an <h1>, which is the logo, and then you went to <h3>. You should always follow the correct order, so instead of h3, consider using h2 and if you need it to be smaller, just do that with tailwind css instead.
  • Use more semantic html tags, right now you are using divs for almost everything. You could, for example, use a <header> to wrap the logo and theme toggle, and you could use a <main> to wrap all the countries card (one main to wrap them all)

  11

  Marked as helpful