Oliver Shenton

Weather Wizard

Overview

Title:
Weather Wizard
Project Type:
Web app
Client:
Personal
Role:
Design & Development
Year:
2024
Duration:
N/A
Last Updated:
27/12/2024
Status:
Completed
Github:
Demo:

N/A

Context

Description:
A responsive weather tracking app built with React. It provides real-time weather updates, a five-day forecast, and quick access to popular world capitals. Designed with a simple, clean itnerfacem it makes it easy for users to check current conditions anywhere in the world.
Problem:
Most weather apps are either too cluttered with information or locked behind premium subscriptions. I wanted to create a lightweight, accessible alternative that focuses on clarity and usability while practising API integration and UI development.
Solution:
I designed and developed a weather tracker that consumes open weather APIs, with a focus on an intuitive interface. Users can search for any city, get weather for their current location, or quickly check common global destinations. A built-in dark mode ensures readability at any time of day.
Audience:
👤 General users wanting to quick weather checks
👤 Travellers planning trips

Scope

Features:
  • 🟢 Date & time
  • 🟢 Dark mode toggle
  • 🟢 Location search bar
  • 🟢 Get current location
  • 🟢 Popular locations
  • 🟢 Current day forecast
  • 🟢 Five day forecast
Pages:
  • 🟢 Home - Search, popular cities, and forecasts

Techstack

HTML

CSS

JavaScript

React

Open Weather API

Image Gallery

Weather Wizard

Weather Wizard

Dark mode

Dark mode

Selected capital

Selected capital

Dark mode

Dark mode

Current location

Current location

Search bar

Search bar