A beautiful weather web application built with Angular 21 and Tailwind CSS 4, featuring a Neumorphism design with automatic day/night theming.
Powered by Open-Meteo API (free, no API key required).
- Neumorphic UI with day/night mode (auto-switches based on time & API data)
- Weather particles (rain, snow, clouds, stars) animated with CSS
- 16-day forecast with gradient temperature bars
- Hourly forecast (next 24h) with horizontal scroll
- Air Quality Index (US AQI, PM2.5, PM10)
- UV Index with color-coded scale
- Wind compass with SVG rotating needle
- Visibility & cloud cover indicators
- Unit toggle (Celsius / Fahrenheit) with localStorage persistence
- Geolocation detect current position
- Popular cities (8 cities with live weather on homepage)
- Recent searches (last 5, stored in localStorage)
- Server-Side Rendering (SSR) with Angular SSR + Express
- Responsive layout (mobile-first grid)
| Layer | Technology |
|---|---|
| Framework | Angular 21 (standalone, signals) |
| Styling | Tailwind CSS 4 (no custom CSS) |
| API | Open-Meteo (weather + air quality) |
| SSR | @angular/ssr + Express 5 |
| Lint | ESLint (@batuhan-bas/configs) |
| Format | Prettier (@batuhan-bas/configs) |
| Package | pnpm |
| Testing | Vitest |
# Install dependencies
pnpm install
# Development server
pnpm start
# Open http://localhost:4200
# Production build
pnpm build
# Run SSR server
pnpm serve:ssr:the-weather
# Open http://localhost:4000| Command | Description |
|---|---|
pnpm start |
Start dev server |
pnpm build |
Production build |
pnpm test |
Run unit tests (Vitest) |
pnpm lint |
Lint TypeScript files |
pnpm lint:fix |
Lint and auto-fix |
pnpm format |
Format all source files |
pnpm format:check |
Check formatting |
src/
app/
models/
air-quality.model.ts # AQI types + getAqiLevel/getUvLevel helpers
geocoding.model.ts # Geocoding API response types
neu-theme.ts # Neumorphism theme (day/night Tailwind classes)
weather-codes.ts # WMO weather codes -> emoji, description, bg gradients
weather.model.ts # Forecast API response types
pages/
home/ # Homepage with search, popular cities, recent searches
detail/ # Weather detail with all metrics, forecast, particles
services/
air-quality.service.ts # Open-Meteo Air Quality API
geocoding.service.ts # Open-Meteo Geocoding API
popular-cities.service.ts # Multi-location batch weather fetch
recent-searches.service.ts# localStorage recent searches
weather.service.ts # Open-Meteo Forecast API (httpResource)
styles.css # Tailwind import + animation keyframes only