Aditya Surve• 220
@AdityaSurve
Submitted
Aleksei
@AlekseiBestuzhev
All comments
- Aleksei• 200
@AlekseiBestuzhev
Posted
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 - Riki Wendri• 1,380
@F4YY
Submitted
Aleksei• 200@AlekseiBestuzhev
Posted
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 - Deepanshu Heer• 230
@deep0133
Submitted
Aleksei• 200@AlekseiBestuzhev
Posted
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
@jCasia
Submitted
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!😀
Aleksei• 200@AlekseiBestuzhev
Posted
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 - Sebastian DC• 360
@sebasdex
Submitted
This is my first project in a more advanced way during this time of learning. I would like to continue learning and I hope you can give me feedback on how I could improve this project. Thank you.
Aleksei• 200@AlekseiBestuzhev
Posted
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
@timbosTours
Submitted
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!
Aleksei• 200@AlekseiBestuzhev
Posted
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 -
@FlavioRoman
Submitted
For this project use react router since I am learning how to use it, I am still learning about react router to be able to use it correctly, if you have a tip or any questions, feel free to write as it would help me too
Aleksei• 200@AlekseiBestuzhev
Posted
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- Yash Gautam• 160
@gauyash
Submitted
Aleksei• 200@AlekseiBestuzhev
Posted
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 - JitkaM• 150
@JiMare
Submitted
Aleksei• 200@AlekseiBestuzhev
Posted
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
