SkyWise: Smart Weather Management

SkyWise lets you search any city worldwide, view live weather, save favorite locations, track search history, and see insights on a dashboard. Built with OutSystems and OpenWeatherMap API.

  • 0 Raised
  • 7 Views
  • 0 Judges

Categories

  • This hackathon has categories available. Please select one if necessary.

Gallery

Description

SkyWise: Smart Weather is a live weather web app built with OutSystems 11. Search any city in the world and instantly get real-time temperature, humidity, wind, sunrise, sunset and a 5-day forecast, with the city marked on an interactive map. Save your favorite cities, track your search history with filters and trend charts, and view a dashboard of your most searched cities. Weather data comes from the Open-Meteo API, so every lookup shows fresh, real readings.

What the project does

SkyWise is a one-stop weather workspace. Instead of only showing today’s temperature, it lets users search live weather for any city, keep a list of saved places, and look back at what they searched before. Every search fetches fresh data from the Open-Meteo API and shows it with a map marker, so users can see where the city is as well as what the weather is like.

What we built

  • Login: A split-screen sign-in page with a rain and cloud animation. It is a demo login, so any email and password works.
  • Weather Search: Search by city name to see temperature, condition, feels-like, humidity, wind, sunrise and sunset. It also shows a 5-day forecast with rain chances and an interactive Leaflet map with a marker on the city. The background changes with the weather and time of day. An “Add to Favorites” button saves the city, and it then shows “Saved”.
  • Dashboard: Total searches, total favorites, most searched city, and last searched city with its latest reading. A chart compares temperatures of the top searched cities.
  • Saved Cities: Every favorite appears as a card with its latest temperature and condition, plus View and Delete buttons.
  • Search History: Filter by city and date range, browse a paginated table of past searches (temperature, condition, humidity), and see a Temperature Trend chart.
  • Navigation: A collapsible sidebar shared across all screens.

How we built it

  • Built with OutSystems 11 (Service Studio) as a Reactive web app.
  • Open-Meteo API is integrated for real weather data and the forecast.
  • Leaflet.js with OpenStreetMap tiles is used for the interactive map and city markers.
  • OutSystems Charts is used for the dashboard and history charts.
  • Entities: City, WeatherHistory and Favorites store searches and saved cities.
  • Advanced SQL is used for “latest record per city” using a MAX(SearchedOn) subquery, so each city shows once. A TOP 5 query is used for the dashboard chart.
  • OutSystems UI pagination handles history pages on the client side, so page changes need no extra server calls.
  • A shared sidebar block and consistent dark theme styling keep all screens uniform.

Challenges we solved

  • Duplicate cities in Saved Cities: fixed with a latest-search subquery and a flat output structure.
  • Advanced SQL “Invalid object name” errors: fixed by wrapping entity names in curly braces, like {City}.
  • Conflicting sidebar styles from duplicated CSS: fixed by keeping the sidebar CSS only in the shared block.

Impact and future scope

SkyWise helps anyone who checks weather for several places, like travellers, families in different cities, or planners. Future ideas: [weather alerts, hourly forecast, multi-language support, mobile app, real user authentication].

Attachments