@Catalina-Hasnas
Posted
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