Skip to content
Submitted 13 days ago

weather application

react, redux, redux-toolkit
LVL 3
@abdalla-shaker
A solution to the Weather app challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

I’m most proud of using React and Redux Toolkit to properly manage the application state, which made the state management more organized and predictable as the application grew.

I’m also proud of making the UI fully responsive and implementing the localStorage feature to provide autocomplete suggestions from the last four places the user searched for. These features helped me create a more complete and user-friendly experience.

Next time, I would focus more on planning the application architecture and state structure before starting the implementation. This would help me keep the code even more maintainable as the project grows.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges I encountered was realizing that my custom useWeather hook was not behaving like a shared state solution such as Context API. Since the hook was being used in multiple components, each component had its own instance of the hook and could trigger its own data fetching. This caused inconsistent loading behavior, where one part of the application could finish rendering while another part was still loading.

I initially kept this approach, but after migrating the application to Redux Toolkit, the problem was solved by centralizing the weather data and loading state. All components now access the same weather state, so the application has a single source of truth and a consistent loading state across the UI.

Another major challenge was handling the error states correctly. The application needed to distinguish between an actual API failure and a location that simply could not be found. These cases required different messages and different UI states. I handled this by checking the API response and separating API errors from invalid-location errors, allowing the user to receive a more accurate message depending on what actually went wrong.

What specific areas of your project would you like help with?

Any feedback would be helpful. :)

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on abdalla shaker’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord