Submitted over 2 years ago

Countries Website with React

Darko•980

@dtomicic

Preview site View code

This is a solution for...REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

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
@denieldenPosted over 2 years ago
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
@dtomicicPosted over 2 years ago
@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
@Noke0Posted over 2 years ago
The search bar is case sensitive but other than that great website!
1
Darko•980
@dtomicicPosted over 2 years ago
@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

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