Responsive REST countries API with color theme switcher

Community feedback

• 

  Carl•855

  @CarlHummPosted over 1 year ago

  Hello there!

  Your GitHub repository is minified production build of react code so it's very difficult to know how you've structured your components/state. If you're comfortable with Git you could create a development branch to make it easier to see. Either way, I had a look at your application and the following stood out:

  Re-using data instead of making additional requests

  • Each time you select a region you make a fetch request. However, since you've already made a request for all countries for the initial render, you could use this data and filter it like you did via the search input to save on requests and improve performance.

  Prevent same selections / unchanged data from making network requests or re-rendering components

  • Each time you select a region it looks like you trigger an event handler which makes a fetch request and then sets the state which triggers a re-render. This happens even if the data is the same and you have selected the same region. Maybe add some conditional logic/validation to prevent the same selection from making a request or updating state.

  Fix logic to filter by region after text input

  • Your filter logic does not consider region selection. What do I mean? Say I type in 'United' into the search bar, all countries with 'United' in the name will show up. But when I change the region to Europe the results remain the same and do not filter by region. A small notification appears stating 'Showing Europe Countries' before re-rendering the component to show the same unfiltered results.

  • If I then type anything into the search box the results will then filter correctly and take into account the region. Without seeing the code it's hard to tell what's happening but I suspect the problem lies in the differences in logic between your search and select event handler and the way you're setting state.

  Example

  Remove empty spaces either side of input

  • Your input field triggers re-renders based on empty spaces. You might not want this. You can easily solve this by applying .trim() to your search input.

  Conclusion

  Other than these points, everything works correctly on my screen. It responds well, colour theme switches successfully and looks great. I've never used tailwind myself so can't comment on that. Keep in mind I'm not an expert so if I've made a mistake feel free to correct me.

  Good luck on your next project feel free to ask me any questions.

  Marked as helpful

  0

  ---

  

  Hassan•940

  @hnasser44Posted over 1 year ago

  @CarlHumm Thank you so much for your feedback and for sharing that helpful video with me. I really appreciate your insights, and I will definitely fix these issues that you pointed out. I'll make sure to use the original source code, not the production build folder.

  1

  

  Hassan•940

  @hnasser44Posted over 1 year ago

  @CarlHumm Hello! I wanted to let you know that I've taken your valuable remarks into consideration and made some changes. As a React beginner, I'm still learning the ropes, so if you have a moment, I'd really appreciate it if you could review my code and share any further suggestions or best practices. Your help has been awesome so far, and I'm grateful for your support. Thanks a bunch!" 😊

  0