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

Countries REST API with Color Theme Switcher

@ZahirHaniche-dev

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


What are you most proud of, and what would you do differently next time?

Thanks to this project, I was able to solidify and apply my knowledge of React, while also discovering Tailwind CSS. React significantly eased the implementation process.

What challenges did you encounter, and how did you overcome them?

What I found challenging was making the design responsive with Tailwind CSS.

What specific areas of your project would you like help with?

I don't have any specific needs at the moment, except if someone has an alternative or a different library from Tailwind CSS for better handling responsiveness (excluding Bootstrap).

Community feedback

@Mahmoud-ElAgamy

Posted

I've been using your Rest Countries API app and wanted to share some suggestions for improvement.

To enhance the user experience, I recommend:

1-Layout: Would be great if you set a max-width for the container to prevent it from becoming overly wide on larger screens, which can improve the overall layout and readability of the content.

2-Country Information: Make sure that you access the languages object correctly to retrieve the languages of each country

3-Country Details: Making border countries linkable and formatting population numbers for better readability.

4-User Interface: Using visual cues to highlight the selected region and active pagination.

By incorporating these changes, the app could become even more user-friendly and informative.

Good luck with the improvements!👍

Marked as helpful

0

@ZahirHaniche-dev

Posted

Thank you for the advice and recommendations, my dear friend. I completed this project in 24 hours and plan to improve it over time, especially regarding the layout, pagination, and border countries.

Thank you for your feedback and support!

1

@ZahirHaniche-dev

Posted

For this project, I chose Vite and ReactJS, a powerful duo for creating fast and responsive web applications, along with Tailwind CSS for its utility-first approach.

Additionally, I used the latest React features, including Redux and context usage types. For example, to call the API from the data.json file, I used a reducer with a getData function that is called only once, which allows my list to be managed directly through filtering.

As a result, my project is more readable and simplified compared to previous versions of React, where we had to use Axios or API calls to filter and rebuild our list table.

My solution differs slightly from the design because I’m more focused on the technical aspects behind it.

Feel free to follow me on GitHub, and thank you all for reading.

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