Skip to content
OverviewSolutions
1
Comments
9
Aleksei
@AlekseiBestuzhev

All comments

  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    Congratulations on completing this difficult task. Cool start page. 🔥

    There are a few items that need fixing:

    • Not all countries open on the details page. The error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" is thrown.
    • On the details page "cursor: pointer" anywhere on the page. In theory, it should be only at the buttons.
    • When clicking on the "border countries" element, the country details page should open.
    • Need to handle missing values. For example, the capital of Antarctica. Also for this reason, the error about which I wrote earlier falls. Not all countries have neighbors and it turns out that you are passing the undefind to the map method.
    • A lot of code is duplicated, especially in classes.

    try:

    const className = "border-2 px-2 py-0 md:px-3 md:py-2 rounded-sm ${
darkMode 
? 'bg-darkBlue border-veryDarkBlue2 text-white' 
: 'bg-white border-darkGray text-darkGray'
}";

    Note that I intentionally used double quotes (should be backticks) to correctly apply text formatting.

    instead:

    className={
darkMode
? "bg-darkBlue border-2 border-veryDarkBlue2 text-white px-2 py-0 md:px-3 md:py-2 rounded-sm"
: "bg-white border-2 border-darkGray text-darkGray px-2 py-0 md:px-3 md:py-2 rounded-sm "
}

    Find the common and apply the ternary operator only to the different parameters. The same can be done inside the transfer of props.

    • In general, for colors, I would recommend CSS variables. It also greatly reduces duplication.

    I hope this will be helpful. Good luck!🤚

    Marked as helpful
    0
  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    • The countries of the Oceania region (not only them, but in the majority) throw a 400 error when opened.
    • There is no Antarctic in the filter.
    • When I open the country Antarctica, the application crashes.

    Otherwise great, keep it up!👍

    Marked as helpful
    0
  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    • Filter reset does not work. Switching to the original state (all) throws a 404 error.
    • Also, I would not make a request for every filter change or input into the search bar. It is better to filter already received data.
    • In the details of each country, the idea is that the border countries should be buttons leading to their own detail pages.

    Generally, good project! 👏

    Good luck!

    1
  • Jethier•390
    @jCasiaSubmitted over 1 year ago

    Hello Everyone! 😀

    I really wanted to challenge myself and wanted to develop something that will help me practice working with API requests. So I ended up starting my first Advanced level challenge and WOW a challenge I definitely got. It took me quite a long time to create but was worth it in the end!

    Coding and creating the pages, components and styles were fine but adding the functionalities were difficult indeed. After many errors and bugs, I finally managed to get it to work! However, it may need a little bit more work and maybe some refactoring in the future. Other than that, it was fun to code and I have learnt quite a lot by doing this challenge.

    I encourage everyone to give higher level challenges a go! Yes it will take more time and possibly harder, but I guarantee you, that you will learn few or more things along the way!

    Any feedbacks or suggestions are always welcome!😀

    Rest Countries Api created using React utilising React Query

    1
    Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    • Try to open China and you will see the error. This is due to the fact that you are using the search by name. From the documentation: "Search by country name. If you want to get an exact match, use the next endpoint. It can be the common or official value". China, Macau, Hong Kong and Taiwan have the match in the official name. The same situation with South Georgia and Georgia.
    • When I open Antarctica, the app crashes. Check the console.
    • Not all properties exist in all countries. The capital of Antarctica, for example. You need to handle their absence. I think the error is being thrown for the same reason.
    • In filtering by regions, there is no way to reset the filter. I also advise not to make a new request after selecting a region, but to filter the received ones.
    • Missing region Antarctica.
    • I would make the request to the server separate from the components.
    • Easy to read project structure. Everything is very clear and easy to navigate.

    👏 Well done for completing this challenging project. Good luck!

    Marked as helpful
    1
  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    • I would remove the styles from the root element as its only function is to accept components. The header should be 100% viewport and not have padding from its edges.
    • I would add one more media query for the cards, since everything is very compressed at a resolution of more than 767 pixels. Change the number of grid columns.
    • On the details page, if there are many countries, then they go beyond the viewport and create a horizontal scroll. Use flex-wrap: wrap;
    • And in the same place you use <p> in which buttons lie, although it is intended for text. Use <div>. This will be more seductive.
    • Missing region Antarctica.
    • Not all properties exist in all countries. The capital of Antarctica, for example. You need to handle their absence.

    Well done for completing this challenging project. Good luck!

    Marked as helpful
    0
  • Timothy Fawcett•250
    @timbosToursSubmitted over 1 year ago

    I had a lot of fun doing this challenge. Once again, Frontend mentor comes up with the educational goods. I Got to learn how to make a dark theme with Tailwind and next-themes. I Got to build out a big typescript interface for the API data. I decided to give Tailwind another go, It definitely makes styling fast, despite the extra clutter in the .tsx files.

    Thanks Frontend Mentor!

    Where in the world with Next, Typescript and Tailwind. Dark Mode + API

    1
    Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    • Try to open China and you will see the error. This is due to the fact that you are using the search by name. From the documentation: "Search by country name. If you want to get an exact match, use the next endpoint. It can be the common or official value". China and Taiwan have the match in the official name, and in the response array from the server, Taiwan comes after China and displays Taiwan. Same situation with South Georgia and Georgia.

    • When I open Antarctica, the app crashes. Check the console.

    • Not all properties exist in all countries, this should be taken into account in the typing. The capital of Antarctica, for example. You need to handle their absence.

    • Images on the main page have different heights.

    • When I use the region filter, the selected region is not displayed. There is no way to reset the filter. I would also advise not to make a new request, instead it is better to filter.

    • Missing region Antarctica.

    Well done for completing this challenging project. Good luck!

    Marked as helpful
    0
  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello.

    When you open a country-specific page in border countries, you have languages in their native script. There should be countries in the form of buttons that send to the country page.

    Also, I would advise you to send requests to the server. Or if you still want to receive data from a file, then I would move the loader function to the utils folder. I would also change

    if (filter !== null && filter !== "") {...}

    to

    if (filter) {...}

    And don't forget to handle the missing fields. Like the capital of Antarctica. Good luck!

    Marked as helpful
    0
  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello. Try to open China and you will see an error. This is due to the fact that you are using the search by name. From the documentation: "Search by country name. If you want to get an exact match, use the next endpoint. It can be the common or official value". China, Macau, Hong Kong and Taiwan have a match in the official name, and in the response array from the server all 4 come and they are all displayed on the page

    Marked as helpful
    0
  • Aleksei•200
    @AlekseiBestuzhevPosted over 1 year ago

    Hello. Try to open China and you will see the error. This is due to the fact that you are using the search by name. From the documentation: "Search by country name. If you want to get an exact match, use the next endpoint. It can be the common or official value". China and Taiwan have the match in the official name, and in the response array from the server, Taiwan comes after China and displays Taiwan. Same situation with South Georgia and Georgia

    Marked as helpful
    0