Wetter-Projekt

Table of Contents

1. Überblick
2. Ziel
3. Features
4. Technologie-Stack
5. Projekt-Struktur
6. Lösung
   • Datenquellen
   • Wie funktioniert die Suche?
   • Benutzerführung
7. API

Überblick

Wetter-Projekt ist eine moderne Wetter-Applikation. Eine Umsetzung mit Next.js + TypeScript im Monorepo. Nutzer können Wettervorhersagen abrufen.

Ziel

1. Einfache Suche nach Orten mit anschließender Anzeige der Vorhersage.
2. Responsive, zugängliche UI mit Fokus auf Performance.

Features

• 🌤️ Aktuelle Wettervorhersage
• 📅 7-Tage-Vorhersage
• ⏱️ Stündliche Vorhersage (24 Stunden)
• 🔍 Standortsuche mit Autocomplete und Flaggen
• 🌍 Unterstützung für weltweite Standorte
• 📱 Responsive Design

Technologie-Stack

• Framework: Next.js 16 (App Router)
• Sprache: TypeScript
• Styling: Tailwind CSS
• UI-Komponenten: shadcn/ui
• Wetter-API: Open-Meteo (openmeteo npm package)
• Icons: Lucide React

Projekt-Struktur

Dies ist ein Monorepo mit folgender Struktur (relevant für das Wetter-Projekt):

wetter-projekt/
├── webseite/          # Next.js Applikation
│   ├── app/           # Next.js App Router
│   ├── components/    # React Komponenten
│   └── lib/           # Utility-Funktionen
└── package.json       # Root package.json für Workspace

Lösung

Datenquellen

• Open-Meteo liefert Vorhersagen und Archivdaten.

Wie funktioniert die Suche?

• Eingabe eines Ortes über die Autocomplete-Suche in der Navigation.
• Abruf der Koordinaten über die Open-Meteo-Geocoding-API.
• Anschließende Anfrage an die Forecast-API je nach Seite.

Benutzerführung

• Navigation mit Suche führt direkt zur Vorhersage für den gewählten Ort.

API

Die App nutzt die Open-Meteo API:

• Geocoding: https://geocoding-api.open-meteo.com/v1/search
• Wettervorhersage: https://api.open-meteo.com/v1/forecast