Skip to content
OverviewSolutions
5
Comments
3

Jean Chris

@john-coderproCameroon160 points

I'm a young guy passionate about coding, I love to learn new things and tackle difficult challenges because I do think that we learn more when are confronted to the difficulty

I’m currently learning...

Nodejs

Latest solutions

Latest comments

  • Jean Chris•160
    @john-coderpro

    I'm going to start this task management web app tomorrow 😃, I don't want to look at your code before I finish it. Anyway, you are impressive bro, for how long have you been learning web development? I guess you already have a job as a front end, right? Great job 👍, will tell what I think of your code when I finish mine

  • Jean Chris•160
    @john-coderpro

    hello ibrahim, congratulations for completing this challenge I don't know much about react but I got a glimpse in your code and this is what I can say about your specific preoccupations:

    you can't really do much to improve the time needed to fetch data from the api unless you reduce the amount of data you request, this is achievable by requesting the data by region starting with the region with the smallest amount of data (oceania in your case) then updating the view with those data before fetching the data for the other regions, that way the user will start interacting with your app very quickly (less than 3 second when you request countries from oceania first)

    to get the whole country's name for borders you'll use the borders array that the api provides, because this are cca3 codes, you can pass it as a parameter to the following function

     const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
    if (arrayOfBordersCca3Codes) 
        return countries
            .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
            .reduce(
                (arrayOfBordersNames, currentObject) =>
                    arrayOfBordersNames.concat(currentObject.name.common),
                []
            )
    else return null
}

    hope it helps

  • Jean Chris•160
    @john-coderpro

    hi dusan, congratulations for completing this challenge! here are some suggestions I can give to you:

    • I have noticed that once the user filters countries by region, there's no way to get back to all countries, think about adding an 'all' button

    • you can improve accessibility by making your interactive elements focusable ( like your countries cards, the filters country button ...), it can be done by giving them a tabindex of 0

    • think about using the right html element for the right purpose ( your toggle theme button for instance is a paragraph!, think about making it a button, which is even naturally focusable)

    • the countries' borders in your app are cca3 codes which is not very informative for the user, you can use this function to get the real names of the corresponding borders

    const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
   if (arrayOfBordersCca3Codes) 
       return countries
           .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
           .reduce(
               (arrayOfBordersNames, currentObject) =>
                   arrayOfBordersNames.concat(currentObject.name.common),
               []
           )
   else return null}

    hope it helps