Skip to content
Submitted 3 months ago

REST Countries API built with Astro

Younes Atyq•240
@younes-atyq
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 challenges did you encounter, and how did you overcome them?

While tackling this challenge, I made the decision to incorporate Astro’s transitions (morph) to enhance the user experience and give it a more app-like feel. To my surprise, the implementation worked exceptionally well, exceeding my initial expectations. However, this positive experience was limited to a scenario where I was working with a simple dataset that displayed only one region on the screen.

As soon as I attempted to fetch data for all countries, significant issues began to surface. The flickering between light and dark modes took nearly a second to resolve, along with delays in every other feature that relied on client-side JavaScript. In an effort to mitigate these problems, I explored various solutions. Unfortunately, none of my approaches proved effective in handling such a large volume of data.

Realizing that further attempts might lead to diminishing returns, I ultimately decided to remove the transitions altogether. Once I did so, everything functioned smoothly again.

Community feedback

  • Teodor Jenkler•3,760
    @TedJenklerPosted 3 months ago

    Hi Younes Atyq,

    Wow, great job on your project! Your card animation looks fantastic, and your CSS is as good as it gets. It’s impressive to see a project with no noticeable breakpoints. You should definitely be proud of the attention to detail and overall execution.

    One suggestion I have is to add JavaScript transitions to the border buttons. This small enhancement can significantly improve user experience and make a big difference (e.g., changing FRA to France).

    As a little tip, I’d also suggest using a template from Frontend Mentor or another similar resource for your documentation. With the quality of your work, recruiters will definitely appreciate seeing your process and the things you've learned along the way. It can really help showcase your skills and growth.

    Keep up the excellent work!

    Best, Teodor

    Marked as helpful
    0
    Younes Atyq•240
    @younes-atyqPosted 3 months ago

    Hi @TedJenkler,

    Thank you for your advice! I truly appreciate it and will make sure to work on implementing your suggestions.

    1

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