Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Countries Website with React

Darko 980

@dtomicic

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I've managed to do the challenge but still having some problems with the React code, first one being that some countries pages cannot be entered because the country doesen't have one of the elements that is being shown (for example any island country can't be showed because it doesen't have any border countries and therefore it's giving out some error and displays an empty page), second problem is I haven't figured out how to link the border countries to get to that specific country on click and the last problem is when you're on a country specific page and refresh it gives back a blank page haven't figured out how to fix that.

If anyone has any feedback or is able to help on these issues I would be more than thankful.

Community feedback

Travolgi 🍕 31,400

@denielden

Posted

Hi Darko, great work on this challenge! 😉

Here are a few tips for improve your code:

  • React fails in some countries because it expects to receive data that is not there, so to solve this problem you just need to check the data: if the country does not have a certain data then it does not show it on the details page
  • to connect the border countries you just need to use the code to retrieve the complete data
  • add header tag and wrap the navbar for improve the Accessibility
  • add main tag and wrap the content of page for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
  • I would also add a query reset button, I find it very convenient
  • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"
  • to make all flag images the same height use the object-fit: cover properties

Overall you did well 😁 Hope this help!

Marked as helpful

1

Darko 980

@dtomicic

Posted

@denielden thanks for the helpful reply, I'll look into all of the problems to try and fix them all once I get back into this project, I am very satisfied with how it turned out seeing as I'm new to React so a few mistakes here and there don't really bother me haha, thanks for the your time and feedback :D

1
Noah 40

@Noke0

Posted

The search bar is case sensitive but other than that great website!

1

Darko 980

@dtomicic

Posted

@Noke0 yeah that was also one of the problems but I've forgot to mention it since it was the first thing I implemented and forgot it when I got to the end haha, I'll try to look into it when I get back on this project because currently I'm working on something else. Thanks for the feedback :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord