Weather Widget

https://github.com/anniedebry/WeatherWidget

The weather application/widget was made in Visual Studio Community using C#, MAUI, XAML, XML, and .NET 8.0. This application uses the OpenWeather API for generating weather data and searching cities.

Initial Design

The initial design of the weather app was going to display the city, current temperature, the high and the low of the current data, and then a list displaying the weather and temperature hourly. I drew the UI I wanted in MS Paint before building it in MAUI. The UI layout didin't account for current data in the screenshot yet, I originally wanted it to display 12 hours from the user's current time but ended up changing that. The data in the screenshot is hardcoded into the UI since I couldn't grab accurate data yet.

Generating API Data

For generating the OpenWeather data into the UI, I used an API key to request city forecast data. The app first sends a request to the API, which return a JSON file containing all the weather information for the city I requested. Then the data get parsed into current temperature, high, low, weather icon, and the temperature every 3 hours. The change I had to make was having the data show every 3 hours rather than every hour since a subscription is needed to get weather data hourly, which I'm not paying for. The menu bar at the top of the UI allows you to search for any city, this send a request to the API and will return the cities data if valid, if not valid it'll alert the user that the inputted city doesn't exist.

Final Design

When finalizing the design, I wanted the menu at the top to be see-through, which required a major MAUI workaround to create a transparent toolbar. I decided to add a style option where the user could view the data in a pixel aesthetic or stick with the default design. I created pixel backgrounds to represent the current weather in the pixel version of the application, which made it feel more immersive. There are background options for clear skies, rain, snow, clouds, and a default blue sky background, I'll only show three of the pixel designs though since I had trouble finding a city that has snow currently.

Demo