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 with color theme switcher

wevs 100

@dopewevmond

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

Community feedback

Kyrie 70

@KyrieeWen

Posted

Hey wevs

Happy to see you finished this challenge, great work. I'd like to give some feedback after review your code.. hope it would be helpful

First of all, From App.js I'd like to recommend you read the react documentation of how to use useState hook. it should be const [a, setA] format, T is too ambiguous and hard to understand the actual meaning, and you can name it from togglerFunc to toggleTheme to match. Secondly, in Navbar.js, you can try to encapsulate those two components in different conditions to make your code easier to read.. Moreover, In CountriesPage, you can chain your fetch function with then make your response to be json format, and you can refactor it to not call api when its already loaded once (store data in local storage for example).. I saw you have commented eslint lines, you can configure them in eslint configure file and loading === false can be refactored to !loading, same for error.. In CountryDetailPage, you can rename cd to CountryDetails to make it more descriptive and then extract those properties out by doing .then({subregion, capital}) for example..

Generally speaking, really good project, achieved core functionality, used several hooks to make it easier to build.. Hope everything makes sense and can be helpful

Marked as helpful

0

wevs 100

@dopewevmond

Posted

hey Kyrie

really appreciate you taking the time to review my code and suggest how i could make it better. i'll refactor and keep these tips in mind for subsequent projects. thanks!

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