Skip to content
Submitted 1 day ago

Responsive app using React, Typescript and TanStack query

typescript, react, zustand, tanstack-query, pwa
LVL 2
@eliziq
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 particularly proud of the theming engine and the overall design fluidity. I implemented a Light/Dark mode toggle that respects system preferences but allows for a manual override that persists in localStorage.

Next time, in that kind of app I would focus more on animations and visual effects.

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

Managing location data was a bit of a challenge. I needed to support weather retrieval from two sources: the browser's Geolocation API (coordinates) and a manual city search (geocoding results). These sources returned data in slightly different formats.

My solution was to design a unified Location interface and add a custom hook to normalize the data before it enters the global state.

Implementing the Theme Toggle was a nice learning experience. Because I didn't start with a pre-defined design system, I had to go back and readjust my color variables. By mapping my UI elements to these variables, I was able to redefine the entire color palette in one place. This approach saved me from having to write separate styles for every component and ensured the transition between themes was consistent across the whole app.

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

I'm mainly looking to see how other developers structured their code and grid layouts. I’d love any general feedback on the code organization.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Liza Parkhomets’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