Weather Forecast App using Open-Meteo API, React Hooks & Tailwind CSS

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

I’m most proud of how I integrated the Open-Meteo API and built a responsive weather interface that automatically detects the user’s location and also allow the user to search city and town by using the speech api. Managing global state with React Context and handling real-time data updates was a great learning experience.

If I were to do it again, I’d focus more on improving accessibility and optimizing the loading experience, especially for users who deny location access or have slower devices. I’d also experiment with animated weather backgrounds to make the UI more dynamic.

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

One of the main challenges I faced was getting speech recognition to work smoothly across different browsers, since support isn’t always consistent. I solved this by testing fallbacks and making sure the app still works even if the feature isn’t available. Another tricky part was handling multiple API calls for current, hourly, and daily forecasts without the data coming back out of sync, which I fixed by using Promise.all. I also ran into issues with auto-geolocation when users denied permissions or when the location was inaccurate, so I added proper error handling and a fallback search option. Managing state across components was another hurdle, but setting up React Context made it much easier. Finally, making the app fully responsive while supporting light and dark themes was a bit of a balancing act, but Tailwind CSS really helped keep the layout clean on all devices.

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

The main area I’d like help with is fixing a small glitch on first render, where the current, daily, and hourly weather components don’t load at the same time, they appear one after another, which makes the UI feel a bit jumpy. I’d love feedback on how to make all the data load smoothly together, maybe with better state handling or loading strategies.