Project Overview
Weather’ Africa is a modern, lightweight web application designed to make weather forecasts for African cities accessible and visually engaging.
It displays 7-day forecasts, the local time of each city, and can automatically detect the user’s current location.
👉 Live Demo: african-weather-forecast.netlify.app
📦 Source Code: GitHub – Weather’ Africa
Home Interface
The home screen features a clean, responsive layout that adapts perfectly to any screen size.
Users can easily pick a city or let the app detect their location to view local forecasts instantly.
Key Features
- Dynamic city list loaded from a CSV file
- Smart autocomplete search with instant suggestions
- 7-day forecast powered by the 7Timer! API
- Live local clock based on each city’s timezone
- Automatic geolocation for instant weather updates
- Fully responsive design for mobile and desktop
Weather Forecasts
Each day appears as a visual weather card, showing temperature ranges, weather icons, and conditions updated automatically from the API response.
The interface is designed for clarity, accessibility, and performance.
Design & Architecture
Weather’ Africa follows a modular and fully client-side architecture:
- City data parsed from a CSV file using PapaParse.js
- Search bar and dropdown powered by the same data source
- Weather data fetched from 7Timer! API using latitude/longitude
- Results displayed dynamically with animated weather cards
- Real-time clock updated per city’s timezone
This lightweight architecture ensures speed, simplicity, and zero backend dependencies.
Smart Search
The autocomplete search allows users to explore hundreds of African cities easily.
Suggestions appear as you type, thanks to efficient JavaScript event handling and DOM updates.
Mobile View
Weather’ Africa is fully mobile-responsive.
The adaptive grid layout ensures a smooth and intuitive experience across smartphones, tablets, and desktops.
Experience & Learnings
This project helped me strengthen my skills in:
- Asynchronous JavaScript (
fetch,async/await) - API integration and data visualization
- Dynamic DOM manipulation and modular design
- Responsive UX/UI design
- Data parsing and optimization for performance
Weather’ Africa reflects my passion for clean design, real-time interactivity, and user-centered functionality.
Author
Developed by Alfran Essone, a web developer passionate about building modern, data-driven digital experiences for Africa and beyond.