Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

REST Countries API with color theme switcher

react
👾 Ekaterine Mitagvaria 👾•7,860
@catherineisonline
A solution to the REST Countries API with color theme switcher challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello, Frontend Mentor community! This is my solution to the REST Countries API with a color theme switcher.

I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.

I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!

Thanks

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Adarsh•1,640
    @adram3l3ch
    Posted over 3 years ago

    Hi Catherine you did a great job :) . You can sort out the border issue by making the border as a component itself and fetch about that country on that component. Also the problem of github pages with SPAs can be solved by using something like

    (function(l) {
            if (l.search[1] === '/' ) {
              var decoded = l.search.slice(1).split('&').map(function(s) { 
                return s.replace(/~and~/g, '&')
              }).join('?');
              window.history.replaceState(null, null,
                  l.pathname.slice(0, -1) + decoded + l.hash
              );
            }
          }(window.location))
    

    You can refer about the same here

    Marked as helpful
  • Muhammad Fadll•320
    @fadelun
    Posted over 3 years ago

    i have seen your website, but when dark mode some color it doesn't change. maybe you can check on style.css, there is ".region-list option"

    Marked as helpful
  • Travolgi 🍕•31,280
    @denielden
    Posted over 3 years ago

    Hey Catherine, congratulations on completing the challenge! You did a great job 😉

    Let me give you some little tips for optimizing your code:

    • add header tag ad wrap the nav to improve the Accessibility
    • with main tag wrap the content of page
    • add descriptive text in the alt attribute of the images
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of flag images and styling directly the img element
    • use ul element for the details text of country instead of multiple p
    • if you want to use the title for the href attribute you have to parse it in url, it can give problems creating links with empty spaces or special characters
    • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
    • I would also add a query reset button, I find it very convenient
    • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"
    • in the region filter after clicking on a region the submenu does not close
    • instead of using px use relative units of measurement like rem -> read here
    • to fetch data from API create and use a custom hook so you can reuse the same code in many different components and keep the logic separate from the design

    Hope this help! Happy coding 😁

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe
    Posted over 3 years ago

    Hi @catherineisonline,

    You did a great job in completing this challenge using React. 👍

    • For your issue to display the border countries, I suggest you build a list of countries with their respective alpha codes on the initial load since you are already fetching all the countries. Something like this:
    const countryCodes: [
      {
        name: 'Albania',
        alpha2Code: 'AL',
        alpha3Code: 'ALB'
      },
      {
        name: 'Algeria',
        alpha2Code: 'DZ',
        alpha3Code: 'DZA'
      }
    ]
    

    Then you could store this list in a global state using React's context API and when a user goes to the country page you can find the country codes from this countryCodes list and map them to their respective full name.

    • It might also be a good thing to wrap asynchronous logics in a try...catch block to catch any potential errors.

    I hope this helps.

    Keep it up.

    Marked as helpful
  • Javier Eufracio•320
    @Javieer57
    Posted over 1 year ago

    Hi!

    I found a bug in the neighboring countries' tags. When you click on one, it adds the neighboring countries of the current one to the neighboring countries from the previous screen. Excellent job! :)

  • Kiyoomi•480
    @Jukiyoomi
    Posted over 3 years ago

    I think you can get data of a country using its code with this link https://restcountries.com/v3.1/alpha/{code} from the api.

  • Korney Chervonenko•1,080
    @KorneyChervonenko
    Posted 8 months ago

    HI! Your solution looks nice though there are a couple of things you can improve:

    1. Region selector provides only 5 options despite the fact that there are 8 of them in the country database
    2. Clicking on India in boundary countries for some reason derives information about the British Indian Ocean Territory instead of India.
    3. Clicking on the Back button just jumps to the homepage instead of returning to the previously viewed country.
  • qadzek•580
    @qadzek
    Posted over 1 year ago

    Nice work. I like how you have implemented the "Filter by Region" menu.

    A couple of small remarks:

    • I can confirm the bug described by @Javieer57.
    • The use of any in TS is discouraged.
    • There are tools online to automatically convert a JSON response to TS types: https://app.quicktype.io
    • I don't think there is a need for separate FilteredCountries and AllCountries components.
    • A single API call should suffice.
  • Abdul•8,560
    @Samadeen
    Posted almost 3 years ago

    Hello Catherine... You did beautifully well on this project, can you kindly recommend resources to learn React

  • Anthony Rosman•510
    @D3press3dd
    Posted over 3 years ago

    wow, you've grown quite a bit in the area, keep it up, check out this tool for animations https://www.framer.com/motion/ you can see what you can do in my solution to this challenge, it is really intuitive you can check this video https://www.youtube.com/watch?v=u_95SPKE6vg and see how it works in just 5 minutes

  • Benjamin Thorpe•280
    @sparrowsl
    Posted over 3 years ago

    This is just too amazing, makes me want to do it now. I have no words to say here :)

    I only found that the spacing on the right side is not consistent with the left (on desktop) Everything else if just fire and amazing

  • Zein•380
    @Zein-MB
    Posted over 3 years ago

    Amazing! you're just an example of success!!

  • Valeri•190
    @Valeri85
    Posted over 3 years ago

    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value') Search.js:21 e = e.value;

  • Vicky Sangwan•100
    @vickydarlinn
    Posted over 3 years ago

    after a long time.....But Amazing🔥

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub