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

REST Countries API - React, React Query, Axios

P

@richardcyrus

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


Feedback welcome. Uses React Query and Axios to handle the data, search and filtering. Also uses Cypress (first time using) for some basic tests.

Community feedback

P
Omar M 110

@omonteon

Posted

Hey Richard !

This is my first time providing feedback in the community, I hope my comments are helpful.

First of all, in my opinion, all the requirements are met both in desktop and in mobile. Congrats on that !

However, I did found some possible issues:

  1. There is a 404 when erasing the search text. If you write something in the search input and then you erase all of it, multiple requests are sent with 404 response status code. After a few of these requests fail, a message error "Request failed with status code 404" is displayed. A possible alternative I would suggest is handling this by requesting all countries, same as the request when the app loads.

  2. There is a quick flicker when you have selected the dark mode and you refresh the page. I solved this problem by using a script that handled setting the default theme before loading the app bundle. https://dev.to/ayc0/light-dark-mode-avoid-flickering-on-reload-1567

  3. If you run an audit using chrome dev tools, some performance issues are shown. I think it might be related with the images. Maybe that was not your focus with this solution, just something I noticed that I thought it might help.

That's it, I hope this is useful for your future learning.

BTW I think it's cool that you started using cypress, it's one of my favorite testing tools.

Marked as helpful

2

P

@richardcyrus

Posted

@omonteon Thanks for the feedback. I've fixed the issue with clearing the search field resulting in a 404.

With regards to the flicker, even after trying your solution the flash of white continues to exist. I'm leaving that as is.

For the Lighthouse performance report, I think you may be correct in that it's related to the time it takes to process the response from the API and paint the page. It was not a focus of my development.

0

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