Ever checked the weather online and felt overwhelmed by outdated, clunky UIs?
Say hello to Weatherly! Now checking the weather could not be any simpler 💡, more straight to the point 🚀 or more beautiful 🖌️.
This milestone lays the foundation of the project, including:
- HTML skeleton: Well-structured and semantically meaningful;
- CSS styles 🎨: Designed for a polished, responsive layout;
- Resources 🖼️: images, icons.
While not yet interactive, this stage focuses on creating a cross-device compatible template with media queries, ensuring it works beautifully on all screens 💻📱.
Using Vanilla JavaScript and asynchronous programming, I added interactive features that bring functionality to the website 🎯.
When loaded, the app attempts to geolocate 📍 the user and displays the weather for their current location. If geolocation fails—whether due to denied permissions or a Google Maps API error—the weather defaults to Bucharest.
The search bar lets users look up the weather for any location, as long as the data is available from the OpenWeatherMap API 🌦️. During network issues, a loading spinner keeps users informed, encouraging them to check their connection and try reconnecting 🔄 .
Leveled up ⬆️ the project by converting all JavaScript scripts to TypeScript, introducing benefits like strong typing, interfaces, and decorators. This transition ensures better scalability, improved code clarity, and fewer runtime errors 🚫🐞 — perfect for serious project development.
Transitioned to a component-based architecture 🧩 using React ⚛️, making the codebase more modular, scalable, and easier to maintain. Leveraged React hooks to manage state and side effects. This shift improves performance and enables faster development by reusing components across the app.
Implemented unit testing using Jest and React Testing Library to ensure individual components function correctly. It helps maintain a high-quality codebase while making refactoring easier and safer.
Currently, the search functionality is somewhat limited, as users can only search by city. I plan to enhance this by adding autocomplete suggestions in the search bar, displaying the city, country, and, for the US, the state.
Another area for improvement is performance. Reverse geocoding could be optimized, and the overall rendering speed could be boosted for a smoother user experience.
Finally, I plan to enhance inclusivity by implementing toggles that allow users to switch between Celsius and Fahrenheit.