Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

REST Countries API built with Astro

astro, sass/scss, typescript
Younes Atyq•240
@younes-atyq
A solution to the REST Countries API with color theme switcher challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Younes Atyq's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License