@TedJenkler
Posted
Hi @MachadoA,
Nice project! I love this one because there's so much to learn in a single project. Here are a few suggestions to enhance it even further:
Custom Select Element: Consider learning how to create a custom select dropdown. This would allow you to add animations, like rotating arrows and hover effects, to match the design more closely. It’s a great way to improve both your CSS and JavaScript skills.
Search Bar Design: Nice job with adding the "X" to the search bar! Just a small tip—consider removing the outline when the search bar is focused. This can help maintain the clean look of your design.
Translating Border Names: Consider using JavaScript to translate country border codes (e.g., "FRA") into their full names (e.g., "France"). This would improve user experience and is a great challenge for working with data—it’s more complex than it seems
Search Bar State Management: I noticed that when you search for a country, navigate to its page, and then go back, the search bar still has one country selected. Consider to clear the search when navigating away t.ex implementing a useEffect to reset the search state under certain conditions. This would make the navigation smoother for users.
Otherwise, great job with the grid layout and overall design! Continue the great work.
Best, Teodor
Marked as helpful
@MachadoA
Posted
@TedJenkler
Hi Teodor,
Thank you so much for your thoughtful feedback and suggestions! I’ve made some of the changes you recommended, and I really appreciate your insights.
However, I’m still facing some challenges with handling dark mode. Do you have any additional thoughts or tips on how to approach this?
Thanks again for your help!
Best regards, Ana Amaral
@TedJenkler
Posted
Hi again @MachadoA,
When you want dark and light theme functionality, you basically need a way to save the state through re-renders, some state that can be passed down to all components, and a button to change the state. I see you've used the Context hook to achieve the "global state," and the only thing you seem to have forgotten is to save it through re-renders. You can do this with localStorage.setItem() and localStorage.getItem().
If you want to learn more, I would recommend looking into Redux Toolkit. Even though it seems scary at first, it makes handling global state so much easier.
*I would always try to split the problem you have into smaller parts and figure out how to achieve it. This method has worked for me, and I’ve learned a lot of advanced topics like filter search and debounce using it.
@MachadoA
Posted
@TedJenkler Hi Teodor,
I wanted to update you on the dark mode issue. After further investigation, I realized that the problem wasn’t with the code logic or state management itself but with how the CSS selectors were applied. Instead of using localStorage as initially planned, I found that I needed to ensure the dark-mode class was correctly applied to the body element. This approach allowed me to update the CSS selectors and ensure that dark mode was applied consistently across different components.
I’ve updated the App.css to reflect these changes, and this adjustment resolved the issues I was experiencing. I chose not to implement Redux to keep the focus on refining my use of useContext, which helped me better understand the context API and how to manage global state within React.
Thank you for your support and suggestions. If you have any further advice or insights, I’d be glad to hear them.
Best regards, Ana Amaral
