Skip to content
Submitted about 4 years ago

React Countries REST API + Styled Components

Aaron Stroud•435
@astroud
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

In this initial release, I deviated from the design in a couple of ways:

  • I left out the DarkMode label. I think it looks better as a single icon.

I still need to fix the blinding darkmode flash. It's annoying on the initial load, but it becomes downright infuriating when you rapidly navigate between border countries (while in darkmode).

I'm planning to use this Josh Comeau post as a guide The Quest for the Perfect Dark Mode, but I'm going to need to overhaul my themes and darkmode to fix the flash. 💥

Addressed:

  • <del>I used flex box for the grid, so I couldn't get the cards to justify along the sides (justify-content: space-between) with a gap. Should I refactor using css grid?</del> (Safari now supports gap with flexbox as of last month)
Code

Please log in to post a comment

Log in

Community feedback

  • Jen•1,230
    @En-Jen

    Hey Aaron, really well done!!😊 I went ahead and bookmarked it so I can study it more and learn from it. I really like the country card loaders that are displayed during the initial API call and the sound effect on toggle between light and dark mode is a really nice touch 👏

    One suggestion I have is maybe have more of the country card loaders during the initial API call so that there aren't any big blank spaces on the screen without loaders if the user is viewing it on a wider desktop.

    Also, it looks like you're doing quite a bit of prop drilling with the prop handleSearch (it's passed to FilterableCountryList, then FilterControls, then SearchBar before it's actually used) Could you declare that function in the SearchBar component so that it lives in the component that actually uses it? You could use Redux to manage the state and access countryFilter in App.jsx and then dispatch the action to change the state from SearchBar.jsx. I realize learning Redux may seem daunting but it's worth it!

    Overall super awesome job and keep up the great work!! 💪

  • tediko•6,700
    @tediko

    Hello, Aaron! 👋

    Congratulations on finishing another challenge! You did great on this challenge. I won't lie, this sound effect on toggle scared the hell out of me. I think it is unnecessary in such a project to add such effects, but as we're learning is good to play with the code. Atleast make it a little bit quieter. 😅 Also, I added justify-content: space-between on .bhdLno container and it works good. It takes full width of container and place your flex items between like in design.

    • Add :focus pseudo class to interactive elements like anchors, buttons etc. Use outline property to make your website more accessible to keyboard users. Focusable elements like anchor, buttons or inputs they have applied default :focus pseudo class with outline property. These default styles are subtle and hardly visible tho. Furthermore every browser has a slightly different default style for the outline, so you probably want to change the default style. Read more about why we should change focus styles.

    Good luck with that, have fun coding! 💪

  • P
    Joanne Wang•205
    @joanneccwang

    Try remove the margin of the cards and use gap property instead. gap will literally create gaps between flex items.

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