Fullstack rest countries api 🙌 Built with the MERN stack!!!

Community feedback

• 

  Cătălina Hasnaș•300

  @Catalina-HasnasPosted 12 months ago

  Hello, Yashin! Nice work on the BE side and I also liked your usage of animations.

  I have a few suggestions, if you don't mind :)

  • Since you're already setting the value of style attribute of body tag, why not set a custom attribute such as data-theme and let CSS handle all the rest? Instead of:

  #light {
    color: #111517;
    background-color: #fff;
  }
  
  #dark {
    color: #fff;
    background-color: #2b3844;
  }
  

  You will have:

  body[data-theme="light"] {
    color: #111517;
    background-color: #fff;
  }
  
  body[data-theme="dark"] {
    color: #fff;
    background-color: #2b3844;
  }
  

  And that's it! All the other elements will use these variables in their classes. You can use var inside css modules as well. No need to pass darkMode state down to children and no need for additional logic like this: id={darkMode ? "dark" : "light"}

  • Right now there aren't a lot of components, but imagine if the project gets bigger. The number of files inside Component will continue to grow and become unsustainable. I would recommend to look into those components that represent subcomponents of another component and put them together in a folder. You can also export that div containing SearchBar and FilterCountries in it's own component for a cleaner HomePage component .

  • The response of the request to https://fm-rest-countries-api-sand.vercel.app/api/countries contains a lot of properties that the FE doesn't really need. Since you have the control over the backend, why not send to the FE a smaller response with only the properties they need?

  • Check out this article from React documentation on the usage of useEffect and really think if you have opportunities to remove the useEffects in your code to reduce the number of unneccesary re-renders. Here is another article explaining the issue.

  Good luck in your web dev journey ☺️

  Marked as helpful

  2

  ---

  

  Yashin•130

  @YashinNPosted 12 months ago

  @Catalina-Hasnas

  Hi Catalina,

  Wow! I did not expect to get such insightful feedback on frontend mentor. I really like the idea of the custom attribute makes so much sense to use this ,will give it a try 😁

  Thank you Catalina for the feedback and resources.

  0
• 

  Carl•855

  @CarlHummPosted 12 months ago

  Hello there, well done on completing the challenge!

  I liked that you

  1. Implemented a back-end
  2. Kept consistent with using version control and commits
  3. Organized code into appropriate folders

  As for changes, @Giovanni makes some good points with the colours of box shadow and loader dots whilst in dark mode. Other than this, I have listed some potential improvements below which may interest you.

  Search & Filter Logic

  • If I type in United and filter by Europe I should expect to see United Kingdom. At present this is not the case as the application only supports filter by search or select, but not search & select. An implementation detail but one worth considering.

  Caching Country Data

  • At present if you visit a country it will re-fetch the data regardless of whether it has already seen it. Example: You visit country, click back, visit same country, or you visit country, view border country, return to same country.

  You could implement a caching object into your custom hook so you can load from cache if present, otherwise fetch/update load states and then populate cache at end. Or alternatively have a library manage this for you such as @tanstack/react-query with useQuery() hook.

  Trim the input field

  • If the input field is empty and a user enters space twice or more it will return no results. One way of managing it would be to trim the input so that results are displayed if nothing is entered.

  Error Components

  • When nothing is found (such as entering country/asdsadsa or when inputing a country that doesn't exist, it would be nice to be presented with an error component to show us the state. Was something not found? Did something go wrong? Can you clear the search query and return to me where I was? That kind of thing. You have a loader component for the loading state so it shouldn't be too difficult to implement an error one.

  Overflowing Content

  • Remove min-width 100vw on body to prevent overflow - It's unnecessary.

  Good luck with the pagination and future projects!

  Marked as helpful

  0

  ---

  

  Yashin•130

  @YashinNPosted 12 months ago

  @CarlHumm

  Hi Carl,

  I must say your feedback is absolutely golden 🏆. I will definitely look at making these changes , they will be great updates.

  Thank you for your time and effort , much appreciated.

  1
• 

  Giovanni•100

  @jionnyMagiahPosted 12 months ago

  Very good job! If I can give you a small suggestion on my personal preference, I would change the color of the shadows in the dark mode and maybe the color of the loading animation, using dark mode the dots in the animations are black, on a dark blue background. I would go with something like the text color. But again, this is a personal preference :)

  Marked as helpful

  0

  ---

  

  Yashin•130

  @YashinNPosted 12 months ago

  @jionnyMagiah

  Yup definitely agree with your recommendations, thank you Giovanni.

  1