11/2024
Front-End

Weather App

A weather app simulation displayed inside a mobile device mockup, powered by a live weather API.

Tech Stack

Front-EndReact.jsWeatherAPI

Overview

Weather App is a front-end project that simulates a mobile weather application, displayed inside a phone mockup directly in the browser. It was my first project integrating a real external API, marking a key step in working with live data.

The app connects to a weather API to fetch real-time conditions based on location — displaying temperature, humidity, wind, and forecasts in a clean interface designed to feel native to mobile.

The focus of this project was learning how to consume and display API data effectively, while keeping the UI simple, accurate, and visually coherent within the mobile device simulation.

Key Responsibilities

  • Integrated a live weather API for the first time, handling real-time data fetching
  • Built the UI inside a mobile device mockup to simulate an app experience
  • Implemented location-based weather search
  • Displayed current conditions and forecast data in a clear, structured layout
  • Developed fully in the browser as a front-end only project

Key Features

  • Mobile device mockup simulating a real app experience
  • Live weather data via external API integration
  • Location-based current conditions and forecast
  • Temperature, humidity, wind, and precipitation display
  • Responsive and lightweight front-end implementation
Weather App 1
Weather App 2
Weather App 3
Weather App 4