Climão

Climão is a responsive weather dashboard for checking current conditions and a five-day forecast at the user's location or in searched cities. It supports favorite cities, recent searches, light and dark themes, and temperature visualization.

Features

• Current conditions, thermal sensation, humidity, wind, pressure, sunrise, and sunset
• Eight-point temperature chart and daily forecast summary
• Geolocation with clear loading, permission, and failure states
• Debounced city search with cancellation of obsolete requests
• Favorites and search history persisted in localStorage
• Responsive interface, keyboard-accessible controls, and light/dark themes

Architecture

The application is a client-side React SPA built with TypeScript and Vite. React Router maps the location dashboard and city detail routes. TanStack Query owns remote state, caches weather data for five minutes, cancels obsolete requests through AbortSignal, and keeps queries isolated by coordinates. OpenWeatherMap provides weather, forecast, and geocoding data.

The UI combines Tailwind CSS with Radix primitives. Recharts is loaded with the route-level dashboard bundle, while route components and development-only query tools are split from the application shell. Favorites and history remain local to the browser and do not require an account or backend.

Stack

• React 18, React Router 7, and TypeScript
• Vite 6 and ESLint 10
• TanStack Query 5
• Tailwind CSS 3 and Radix UI
• Recharts 3
• OpenWeatherMap API

Local development

Requirements: Node.js 20 or newer, npm 11, and an OpenWeatherMap API key.

npm ci
cp .env.example .env.local
npm run dev

Set the key in .env.local:

VITE_OPEN_WEATHER_KEY=your_openweathermap_api_key

Variables prefixed with VITE_ are shipped to the browser. Treat this key as a public client credential: configure domain restrictions and usage limits in OpenWeatherMap and never reuse a privileged secret.

Quality checks

npm run check

This command runs ESLint with zero warnings allowed, TypeScript project compilation, and the production Vite build. See docs/dependency-audit.md for the dependency review and deferred migrations.

Project structure

src/
├── api/          # OpenWeatherMap client and response types
├── components/   # Domain components and reusable UI primitives
├── hooks/        # Queries, geolocation, debounce, and local persistence
├── lib/          # Shared utilities and QueryClient configuration
└── pages/        # Dashboard and city detail routes

Deployment

Run npm run build and publish the generated dist/ directory. The host must redirect unknown paths to index.html so direct access to /city/:cityName works with browser routing.

License

No license has been declared. All rights are reserved by the author.