
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

Dark mode

Selected capital

Dark mode

Current location

Search bar
Update History
27/12/2024
Initial commit