Olamide456/weather-app

An interactive 9-question weather quiz web app built with React & TypeScript that turns live forecasts into personalized daily plans. Features 4-language support (English, Igbo, Yoruba, Hausa) # Weather Persona 🌤️ > **Plan your school day — Weather, decoded.** An interactive 9-question weather quiz web application that transforms raw meteorological data into a plain-English, personalized daily action plan. Built for students and everyday users to decide whether to bring an umbrella, grab sunglasses, or layer up for campus life. --- ## 🚀 Features - **9-Step Interactive Weather Quiz**: Custom campus & weather-themed personality questions. - **Real-Time Location Search**: Instant global city and town geocoding search. - **Multi-Language Support (4 Languages)**: Built-in internationalization (i18n) switcher for: - 🇬🇧 **English** (`en`) - 🇳🇬 **Igbo** (`ig` - *Asụsụ Igbo*) - 🇳🇬 **Yoruba** (`yo` - *Èdè Yorùbá*) - 🇳🇬 **Hausa** (`ha` - *Harshen Hausa*) - **Personalized Recommendations**: Tailored advice on outfits, UV protection, hydration, and study spots based on quiz inputs and forecast metrics. - **Full Weather Dashboard**: 24-hour hourly trend forecast, 7-day extended forecast, temperature ranges, UV index, and wind speeds. - **Memphis Design Aesthetic**: Modern UI featuring smooth micro-animations powered by Framer Motion. --- ## 🛠️ Tech Stack & Architecture ### **Frontend** - **Framework**: React 19 + TypeScript - **Build Tool**: Vite 7 - **Styling**: Tailwind CSS v4 - **Animations**: Framer Motion 12 - **Effects**: `canvas-confetti` ### **Backend & Data Integration** - **Serverless / No API Key Required**: Directly integrates with Open-Meteo REST API. - **Geocoding Search**: Real-time city search using `geocoding-api.open-meteo.com` with request debouncing and cancellation. - **Forecast Engine**: Queries `api.open-meteo.com` for hourly temperature, WMO weather codes, UV index max, precipitation probability, and wind speeds. --- ## 📊 Language Composition | Language | Percentage | Purpose | | :--- | :---: | :--- | | **TypeScript / TSX** | `~85%` | Core app logic, UI components, state management & i18n | | **C …