This challenge is really fun to solve, because it's really challenging to me, and I learned quite a lot of techniques!
I added some lazy loading to it, but I'm not sure if I did it correctly, I also added a bit of animation. I used React Context to handle the API calls and different functions and also to avoid prop drilling.
Honestly, I'm not really sure if I did is a proper way to solve it. So, any feedback is highly appreciated!
Congratulations on completing the challenge and incorporating some extra features like lazy loading and animations! It's great to hear that you learned a lot from the process.
In terms of feedback, one suggestion I have is to try implementing a feature where the regions dropdown disappears when the user clicks somewhere else on the site. This would provide a more seamless user experience and prevent the dropdown from cluttering the screen unnecessarily.
You can achieve this by adding an event listener to the document that listens for any clicks outside of the regions dropdown. When a click is detected outside of the dropdown, you can then set the dropdown state to be hidden. You can also add a ref to the regions dropdown and use it to check whether the click occurred within the dropdown area or outside of it.
Overall, great job on the challenge and keep up the good work!
