santhoshpandi/weatherman

Purpose and Entry Points

WeatherMAN is a Vite-served React/TypeScript single-page weather dashboard. It searches global cities, retrieves Open-Meteo geocoding and forecast data, and presents current, hourly, and daily conditions. Browser startup flows from src/main.tsx into the application shell in src/App.tsx; index.html is the static host document.

Application Composition and Navigation

src/App.tsx coordinates the page-level experience, primarily the dashboard and city detail views:

• src/pages/Dashboard.tsx is the search-and-overview workspace.

• src/pages/CityDetails.tsx renders detailed forecast and metric views for a selected city.

• src/components/Navbar.tsx provides global navigation/UI access.

The application is client-rendered and deployable as static hosting, with Vercel routing/deployment configuration in vercel.json.

State Architecture

Redux Toolkit is the central client-state boundary:

• src/store/store.ts assembles the Redux store.

• src/features/citiesSlice.ts owns searched/selected city state.

• src/features/weatherSlice.ts owns fetched weather data and request lifecycle state.

• src/features/favouritesSlice.ts persists the user’s saved-city selection in application state.

• src/features/settingsSlice.ts holds presentation or weather-setting preferences.

Pages and components dispatch state actions and select state rather than directly coupling UI to remote API responses.

Weather Retrieval Pipeline

src/services/weatherAPI.ts is the external-service adapter. It uses environment-provided Open-Meteo endpoints (VITE_GEO_URL, VITE_WEATHER_URL) to:

1. resolve user-entered city names into geographic coordinates;

2. request forecast/current weather for coordinates;

3. return data for weather state updates and rendering.

This layer is the intended boundary for caching, rate limiting, API failure normalization, and protecting the UI from Open-Meteo response details. .env.example documents the required endpoint configuration.

UI Data Flow and States

src/components/SearchBar.tsx initiates city lookup; selected city data drives weather retrieval and route/page content. src/components/CityCard.tsx displays city-level summary data, while src/pages/CityDetails.tsx consumes the richer forecast payload for detailed analytics. src/components/SkeletonCard.tsx and src/components/ErrorState.tsx isolate loading and failure states from normal weather rendering.

Domain Model and Presentation

src/types/weather.ts defines the TypeScript weather-data contract shared between the API adapter, Redux features, and UI. Styling is centralized in src/index.css; the stated frontend stack includes React, Redux Toolkit, TypeScript, Tailwind, and Recharts. Recharts-backed visualizations belong at the detail/dashboard presentation boundary rather than in service or state code.

Runtime and Infrastructure

The runtime is a browser SPA built by Vite (vite.config.ts) and configured through VITE_* environment variables. Its only named external data dependency is Open-Meteo’s geocoding/weather APIs. vercel.json supports static deployment on Vercel, though the build remains suitable for other static hosts.