Skip to content
Submitted 4 months ago

Explore the World: A simple React App Powered by REST Countries API.

Mahmoud Elagamy•1,080
@Mahmoud-Elagamy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

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

...

Hello FEM Community!😉

this is my solution for rest countries api app challenge!😊.

I'm thrilled to share my solution for the rest countries api app challenge, and building this app was a fantastic learning experience that solidified my understanding of React's core concepts.

🛠️ Built with:

  • React✔
  • Tailwind ✔
  • TypeScript✔
  • Framer Motion ✔
What specific areas of your project would you like help with?

Check out the live demo and feel free to leave any feedback or ask questions about my approach! Thanks a lot😊.

Community feedback

  • Mizanur Rahman•160
    @MizanSafinPosted about 1 month ago

    Very nice Project you have done it effectively . Dark mode button work well except there is some problem in API calling most probably call country API different part of your Application rather you can call API once and use data in different place of your Web App using (react state managemant tool) like Zustant .

    Marked as helpful
    0
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 20 days ago

    Thanks for bringing this to my attention, I will work on improving this soon.

    1
    Mizanur Rahman•160
    @MizanSafinPosted 18 days ago

    @Mahmoud-Elagamy 💌

    0
  • HANICHE Zahir•280
    @ZahirHaniche-devPosted 3 months ago

    Great project, well executed and completed. Congratulations, my friend.

    I have a very important remark regarding the data reloading with every action you take on the site. I suggest you look at my project to see that the only loading I perform is retrieving the list when we first access the application. In your case, you make API calls every time you process or launch a feature, for example, the filter or the detail page.

    In my case, I use a reducer with a getData function that I call once. Then, for filtering, etc., I manipulate the array that I retrieve as a state.

    Marked as helpful
    0
    Mahmoud Elagamy•1,080
    @Mahmoud-ElagamyPosted 3 months ago

    Thank you so much for your kind words and constructive feedback! I really appreciate you taking the time to review my project.

    Your suggestion regarding data reloading makes perfect sense. I’ll implement a reducer or state to fetch and store the data only once, and then handle all filtering and detail views directly from that state. This will definitely optimize performance and improve the user experience.

    I’ll take a look at your project for inspiration as well. Thanks again for the helpful advice, looking forward to sharing the improved version with you!

    Best regards, your brother Agamy.

    0
    HANICHE Zahir•280
    @ZahirHaniche-devPosted 3 months ago

    It’s a pleasure, and it’s an honor to help you, my brother @Mahmoud-ElAgamy !

    0

Please log in to post a comment

Log in with GitHub

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