Skip to content
Submitted about 2 years ago

REST Countries API(Vite + React JS + React Router + SCSS + leaflet)

accessibility, axios, react, react-router, sass/scss
mohamed yasser amer•610
@mohamedyasser27
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found that implementing a reusable dark theme hook to be challenging, particularly when it came to utilizing SCSS. After much experimentation, I discovered a mixin that generated CSS custom properties, which helped me overcome this hurdle.

also, while developing functions to manipulate the country data, I realized that I wasn't entirely confident about the way I had written the code. I felt that I could benefit from some guidance on best practices in this area.

I would like to learn more about the recommended approaches to structuring project folders and ensuring accessibility. By implementing best practices in these areas, I hope to create cleaner, more efficient, and more scalable projects in the future.

i also want to know your opinion on the whole project responsive design.

Code

Please log in to post a comment

Log in

Community feedback

  • Emmanuel Daniel•1,170
    @coderdannie

    Hello Congrats on the completion of this project. You did a great Job. My suggestion is as follows

    1. While data is still been fetched from the API, before the data arrives, you can render loading spinner or something of a simple text like 'loading...' just to make your app more user friendly in terms of users experience.
    2. Also you can as well handle errors in a more obvious manner. Right now if I should input a country that doesn't exist, it doesn't just display anything. It seems blank. You can implement a ui error as well like ' no country found for your query". You can as well check my solution so see the suggestions I made. I also implement this suggestions https://rest-countries-coderdannie.netlify.app/ Overall you did a great job Happy coding
    Marked as helpful

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