Took an old project, a simple weather app that fetches an API, and beefed it up!
Live Demo: https://ohweatherapp.netlify.app
Tech used: HTML, CSS, JavaScript, OpenWeatherMap API
Originally developed with HTML, CSS, and JavaScript, this weather app served as one of my first jumps into fetching APIs. I revisited this project to implement some enhanced features. The addition of local storage functionality allows the app to remember the last looked-up location, providing a more personalized and convenient user experience. I extended error handling to ensure robust performance even in challenging network conditions. The introduction of a geolocation button allows users to quickly access weather information based on their current location, adding a valuable feature for on-the-go users. Furthermore, the incorporation of a 5-day forecast offers users a better view of the weather outlook.
During the optimization phase, I took a closer look at fine-tuning the app's performance and making it more user-friendly. I dabbled in some AJAX, using asynchronous JavaScript to make API requests smoother, giving the app a boost in efficiency. To speed things up for returning visitors, I added a bit of caching, storing commonly accessed items locally. I also added some responsiveness to the CSS.
Revisiting and expanding on this project taught me a bunch of valuable lessons in web development. Playing around with local storage emphasized how crucial it is for creating a seamless user experience. The expanded error handling mechanisms reinforced the idea of graceful degradation, making sure users get helpful feedback even when things don't go as planned. When adding the geolocation feature, I had to dive into the intricacies of user permissions.
Plus, throwing in a 5-day forecast was no walk in the park. It pushed me to think more deeply about presenting data and designing the user interface. The improved responsive design isn't just about looking good on various screens; it's about making the app accessible and easy to use on different devices. These updates reminded me that software development is an ongoing journey, and enhancing existing projects is a key part of the growth process.
If I were to do anything else I'd start over from scratch. It was fun to just limit myself to CSS but I think Bootstrap or Tailwind would add a way better UI.
Take a look at the original and see how it expanded:
API Weahter App OLD https://github.com/StewedDownSteve/APIWeatherApp
Drag and Drop Kanban: https://github.com/StewedDownSteve/Drag_Drop_kanban
Weather App(Geo Location): https://github.com/StewedDownSteve/Weather_App_Updated/tree/main