Skip to content
Submitted almost 2 years ago

Integrating with a REST countries API

react, tailwind-css, react-router
hakeemgardner•170
@hakeemgardner
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found it difficult to get the countries flags to be the same size and also some aspects of the countries details are missing. I'm unsure about that aspect. also i would like to know what areas can be improved about

Code

Please log in to post a comment

Log in

Community feedback

  • Better5afe•850
    @better5afe

    Hi there, congrats on completing the challenge!

    Below you can find some minor suggestions from my side:

    • The Where in the world page title can be a Link element that takes the user back to the Homepage onClick.
    • You can add some space between the moon icon and the button text. Also, you can add flex to it and align the icon and the text to be on the same line vertically.
    • Detail pages for some countries are not found (see Antarctica or Western Sahara).
    • You can add a feedback message that no countries were found if the user types in an incorrect value.
    • No results appear if the user selects the America filter.
    • There are some issues with the detail fields, such as empty Currency and Languages and the Top Level Domain is always displayed as "none".
    • For the Population field, there is a method to automatically add comas to larger numbers - you can try implementing it!
    • I see that you are fetching the data inside the App component and then providing it to other components by props drilling. As an alternative, I would suggest Redux Toolkit for state management as this app is quite complex and for fetching the data you can use either Redux Thunk or React Router's loader functions.
    • As for the image size issue, you can set a width on the entire card element and then make the image container take 100% of this amount. Tried it in the browser and it seems to work.

    Overall, I really like your approach. The code is well written and organised. Keep it up!

    Happy Coding!

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