hyper-weather

As a user I want to be able to use a frontend Current Weather page that displays real-time weather for a selected location. Includes current temperature, conditions, feels-like, high/low, precipitation chance, humidity, wind speed/direction, visibility, pressure, dew point, cloud cover, hourly forecast strip, sunrise/sunset arc, AQI/UV panel, and a 7-day forecast teaser. Implement based on the existing Current Weather (v2) JSX design. Supports °F/°C toggle and manual data refresh. Links from: Globe Home. Links to: 7-Day Forecast page.

As a user I want to be able to use a backend API that resolves a user's geolocation (browser Geolocation API or IP-based fallback) and returns lat/lon coordinates. Expose endpoint: GET /api/location/detect. Also support location search by city name: GET /api/location/search?q={query}. Integrate with Globe Home and Current Weather page location selection flow.

As a user I want to be able to use an AI API that generates user-friendly natural language explanations of current weather conditions and forecasts. Integrate GPT 5.2 via Langchain to produce brief, human-readable summaries (e.g., 'It's a warm and sunny afternoon, great for outdoor activities.'). Expose endpoint: POST /api/ai/explain with weather data payload. Display the AI summary on the Current Weather page.

As a user I want to be able to use a frontend 7-Day Forecast page that shows a detailed daily forecast for the next 7 days. Each day shows date, weather icon, high/low temperatures, precipitation probability, wind, and condition summary. Implement based on the existing Forecast (v2) JSX design. Supports °F/°C toggle. Links from: Current Weather page. Links to: Current Weather page (back navigation).

As a user I want to be able to use a frontend Globe Home page that displays an interactive 3D rotating globe with animated weather icons over regions. Users can click a region/location to navigate to the Current Weather page. Implement based on the existing Globe Home (v2) JSX design. Includes dynamic background color shifts based on weather condition, smooth hover highlights, and zoom micro-interaction on click. Links to: Current Weather page.

As a user I want to be able to use a frontend Globe Home page that detects my location automatically on load and highlights it on the globe. Clicking a region on the globe captures lat/lon and navigates to the Current Weather page with that location. Integrates browser Geolocation API and the backend /api/location/detect and /api/location/search endpoints.

As a user I want to be able to use a frontend that meets WCAG 2.1 Level AA accessibility standards across all pages (Globe Home, Current Weather, 7-Day Forecast). Audit and fix: color contrast ratios, keyboard navigation, ARIA labels on interactive elements (globe, cards, toggle), focus indicators, and screen-reader compatibility for weather data.

As a user I want to be able to use a frontend that connects to the backend weather API to display live current weather and forecast data on the Current Weather and 7-Day Forecast pages. Replace mock/static data with real API responses. Handle loading states, error states (e.g., location unavailable), and the 15-minute auto-refresh timer. Support the °F/°C unit toggle by passing the units parameter to the API.

As a user I want to be able to use a frontend that loads within 2 seconds on a standard 4G connection. Implement code splitting, lazy loading for the 3D globe, image/icon optimization, and API response caching on the frontend. Audit Lighthouse scores and address performance bottlenecks across all three pages.