Responsive app using React, Typescript and TanStack query

Solution retrospective
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.
Please log in to post a comment
Log in with GitHubCommunity 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