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

Rest Countries Api created using React utilising React Query

Jethier 390

@jCasia

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


Hello Everyone! 😀

I really wanted to challenge myself and wanted to develop something that will help me practice working with API requests. So I ended up starting my first Advanced level challenge and WOW a challenge I definitely got. It took me quite a long time to create but was worth it in the end!

Coding and creating the pages, components and styles were fine but adding the functionalities were difficult indeed. After many errors and bugs, I finally managed to get it to work! However, it may need a little bit more work and maybe some refactoring in the future. Other than that, it was fun to code and I have learnt quite a lot by doing this challenge.

I encourage everyone to give higher level challenges a go! Yes it will take more time and possibly harder, but I guarantee you, that you will learn few or more things along the way!

Any feedbacks or suggestions are always welcome!😀

Community feedback

Aleksei 200

@AlekseiBestuzhev

Posted

Hello.

  • Try to open China and you will see the error. This is due to the fact that you are using the search by name. From the documentation: "Search by country name. If you want to get an exact match, use the next endpoint. It can be the common or official value". China, Macau, Hong Kong and Taiwan have the match in the official name. The same situation with South Georgia and Georgia.
  • When I open Antarctica, the app crashes. Check the console.
  • Not all properties exist in all countries. The capital of Antarctica, for example. You need to handle their absence. I think the error is being thrown for the same reason.
  • In filtering by regions, there is no way to reset the filter. I also advise not to make a new request after selecting a region, but to filter the received ones.
  • Missing region Antarctica.
  • I would make the request to the server separate from the components.
  • Easy to read project structure. Everything is very clear and easy to navigate.

👏 Well done for completing this challenging project. Good luck!

Marked as helpful

1

Jethier 390

@jCasia

Posted

@AlekseiBestuzhev Thank you so much Aleksei😍 I really appreciate it! It was a tough challenge for me haha, But yes, some of the things you pointed out, I have failed to notice! I will definitely take note of everything you said!

Once again thank you!😊

0
Aleksei 200

@AlekseiBestuzhev

Posted

@jCasia Difficulties make us stronger! 💪

By the way, for regions use filtering and for the search bar try useDebounce. Useful hook for similar situations.

Marked as helpful

1
Jethier 390

@jCasia

Posted

@AlekseiBestuzhev haha true true🥹, I'm still weak though but I'm slowly getting there haha and Ooohh I've never come across that hook before, looking at the docs for it now and its definitely a good thing to include in a search bar!

0

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