Skip to main content
Weather App

Weather App

Frontend application that consumes multiple weather APIs to display real-time data and forecasts across different cities, with interactive charts.

Vue.jsBootstrapChart.js
LiveGitHub

Overview

Frontend web app to check the weather of any city by name, abbreviation, or geographic coordinates. Two independent APIs work together: one resolves the location’s coordinates, the other fetches its weather data, which is then rendered as charts and cards for the current and surrounding days.

Key features

  • City search — look up weather by city name, abbreviation, or raw coordinates.
  • Current conditions & forecast — temperature, wind speed, and a multi-day outlook.
  • Interactive charts — average temperature and other metrics visualized with Chart.js.
  • Toast notifications and animated transitions for a smoother experience.
  • Responsive design, adapted from an existing Dribbble concept for desktop and mobile.

Tech stack

Built with Vue 3 and Vuex for state, Bootstrap for layout, AOS for scroll animations, and Axios to consume the OpenCage (geocoding) and OpenWeather (weather data) APIs. Deployed via GitHub Pages.