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

Country Search in React with hooks and react router

Bohdan 130

@BohdanNikolaychuk

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


Country Search in React with hooks and react router

Community feedback

@GrzywN

Posted

Awesome job 👏

I have some small suggestions which might help you:

  • I see that you are using folder component structure. I recommend making an index.jsx file in each component folder and import and export your component for example Container in it. In the result, if you wanna import something you can use path to the folder instead of the jsx/tsx file. For example ../components/Container instead of ../components/Container/Container. It can also provide some kind of encapsulation, because you can export components which should be available globally and don't import those which shouldn't be. You can also make use of normal export (not default) and export all the components from a folder with the regular export. All files are available in one import. Some people also like naming components index.jsx, but I think it makes files hard to work with (if every component file name is index.jsx)

  • The next small thing I could suggest is to use alt attribute (even empty, if image is not meaningful) on every <img /> tag, but in this case you could use something like alt={`${commonNameVariable} flag`} for example.

I will definitely look up to your solution since I'm doing this challenge myself.

Have a nice day and happy coding too ✌️

Marked as helpful

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