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

React with React-Router, SASS. Used CSS variables for theming.

Clinton 260

@DarkFM

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


I designed the site to update the URL query strings as the user adds filters (search and Region) but because github pages server does not support History API. So I had to use HashRouter.

Feedback on structure and design choices are welcome as this is my first proper react project. I tried to stay true to the original design. As laid out in the design files.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Clinton, awesome work on this challenge, you've done a really good job! How did you get on working with React? Did you like using it?

I've only got a couple of suggestions, but both aren't related to React:

  • If you search for countries and get 2 returned, they are spread across the page because you're using justify-content: space-between; on the container. I would just let them maintain the natural flow with flex-start.
  • You're using a div for your custom dropdown, which means that people who need to use the keyboard or other assistive technologies to navigate the page can't access it. I would recommend research accessible HTML patterns for custom dropdowns to get this working for all users.

I hope these tips help. Keep up the great work! 👍

1

Clinton 260

@DarkFM

Posted

Thanks for the feedback @mattstuddert. I will look into fixing the issues you mentioned.

As for the project itself, I found it to be the perfect difficulty for learning react.

Really apreciate the work you've done here.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@DarkFM I'm really happy to hear that! It's great that you like the site and are finding the challenges useful 🙂

0
TishG 205

@TishG

Posted

Your app looks great. I like the transition effect when switching between light mode and dark mode.

I don't know if you notice this or are working on it at the moment but the search functionality does not work.

0

TishG 205

@TishG

Posted

Nevermind, just went back and tested it again and the search does work. Nice!

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