Weather Map

An interactive weather map application that displays current weather conditions for various locations around the world.

Features

  • Interactive world map with clickable locations
  • Real-time weather data from Open-Meteo API
  • Temperature, humidity, wind speed, and weather conditions
  • Responsive design with TailwindCSS
  • No API keys required

Project Structure

├── backend/
│   └── index.ts             # Hono API server
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # React frontend entry point
│   └── components/
│       ├── App.tsx          # Main app component
│       ├── WeatherMap.tsx   # Interactive map component
│       └── WeatherCard.tsx  # Weather info display
├── shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

API Endpoints

  • GET / - Serves the frontend application
  • GET /api/weather?lat={lat}&lon={lon} - Fetches weather data for coordinates

Usage

The application loads with a world map. Click on any location to see current weather conditions including temperature, humidity, wind speed, and weather description.