React.js, react-router, flex, grid, axios

Community feedback

• 

  Praneet Dixit•120

  @PraneetDixitPosted over 3 years ago

  Hi!

  Some points for improvement -

  • I guess the body background color in light mode is not correct.
  • You are sending a separate network request for every filter change. A better approach can be fetching all countries once on the initial page load, storing the data in a variable and performing all the filter operations on the stored data.
  • There are many ways to manage the country flag. If you want to keep using the flag as a background image, you can change the background styling as below :-

  /*** CSS ***/
  .image{
      background-size: contain; /* So that you don't end up cutting the flag */
      background-position: top; /* Keeping the flag on top */
      background-repeat: no-repeat; /* Don't repeat the background */
  }
  

  • The icon and text in theme changer are misaligned.

  /*** CSS ***/
  .theme-toggle{
      align-items: center;
  }
  

  • Set cursor: pointer on clickable elements.

  Some additional improvements (optional) -

  • You can set pagination or infinite scrolling for long lists of countries.
  • Allow users to directly visit country detail view by entering url in browser like https://countries-search-api.netlify.app/detail/India.

  Happy Coding!

  0