Weather App TS is a full-featured, client-side weather dashboard that delivers real-time conditions and multi-day forecasts for any city on the planet — no API key, no backend, no sign-up required. The application queries the Open-Meteo Weather API and the Open-Meteo Geocoding API directly from the browser, processes the responses through a strongly-typed React Context layer, and renders a responsive, adaptive UI built entirely with Tailwind CSS utility classes. React 19 keeps the rendering model predictable, TypeScript 6 catches integration errors at compile time, and Vite 8 delivers near-instant hot module replacement during development — together forming a stack that is both fast to iterate on and easy to extend.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/cristhianblaffita-web/Weather-App-Ts/llms.txt
Use this file to discover all available pages before exploring further.
Key Features
Global City Search
Debounced autocomplete powered by the Open-Meteo Geocoding API lets users find any city worldwide with minimal keystrokes and no redundant network requests.
Current Weather Conditions
Displays temperature, feels-like temperature, relative humidity, wind speed, and cloud coverage percentage — all sourced from the Open-Meteo current weather endpoint.
Hourly Forecast
Shows the next 7 hours of weather from the current time, with per-hour temperature readings and WMO weather codes resolved to descriptive icons.
7-Day Daily Forecast
Presents a full week of daily forecasts including high and low temperatures and a weather-code icon for each day at a glance.
Dynamic Day/Night Theme
Background colors and icon variants automatically switch between day and night modes based on the actual sunrise and sunset times returned for the selected location.
Persistent City Preference
The last-selected city is serialized to
localStorage so the dashboard restores the correct location on every revisit — no re-search required.WMO Code Icons
Every WMO weather code is mapped to a human-readable label and a corresponding Lucide React icon, providing consistent visual language across current, hourly, and daily panels.
Fully Typed with TypeScript
All API response shapes, context values, component props, and utility return types are defined in dedicated
.ts type files, giving full IntelliSense coverage and compile-time safety.Tech Stack
The table below lists every production-relevant dependency with the version range declared inpackage.json and the specific role it plays in the application.
| Technology | Version | Role |
|---|---|---|
| React | ^19.2.6 | UI component model and concurrent rendering |
| TypeScript | ~6.0.2 | Static typing, improved DX, compile-time error detection |
| Tailwind CSS | ^4.3.0 | Utility-first CSS, responsive layout, theme tokens |
| Vite | ^8.0.12 | Development server, HMR, and production bundler |
| Lucide React | ^1.16.0 | Consistent SVG icon set for weather codes and UI controls |
| use-debounce | ^10.1.1 | Debounced search input to throttle geocoding API calls |
Project Structure
Thesrc/ directory is organized into five focused folders, each with a single responsibility. This separation keeps the codebase navigable as it grows and makes it straightforward to add new features — such as additional forecast panels or a new data source — without touching unrelated code.
Live Demo
A production build of Weather App TS is deployed on Vercel and available right now — no installation needed. Visit https://weather-app-ts-wheat.vercel.app/ to try the live application.