pamietnik/webapp/CLAUDE.md

CLAUDE.md — Pamietnik Webapp

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Stack

• Sprache: TypeScript (strict)
• Build: Vite
• UI: Vanilla Web Components (kein Framework)
• Karte: MapLibre GL JS + OpenStreetMap Tiles (konfigurierbare Tile-URL)
• Kein CSS-Framework — minimales handgeschriebenes CSS

Befehle

npm install          # Dependencies installieren
npm run dev          # Dev-Server auf :5173 (proxied /v1, /login, /logout → :8080)
npm run build        # TypeScript-Check + Vite-Build nach dist/
npm run typecheck    # Nur TypeScript-Prüfung ohne Build
npm run preview      # Build-Ergebnis lokal vorschauen

Das Backend muss lokal auf :8080 laufen (siehe ../backend/).

Architektur

src/
  main.ts           App-Bootstrap, Routen registrieren
  router.ts         History-API-Router (keine externe Library)
  api.ts            Alle fetch()-Wrapper + TypeScript-Typen für API-Responses
  auth.ts           Login/Logout (POST /login, POST /logout)
  style.css         Globaler Reset + Basis-Layout
  components/
    app-shell.ts    Hauptkomponente: Navigation + Router-Outlet
    login-page.ts   Login-Formular
    days-page.ts    Tagesübersicht (GET /v1/days)
    day-detail-page.ts  Tagesdetail + Karte (GET /v1/trackpoints|stops|suggestions)
    track-map.ts    MapLibre-Wrapper als isolierte Web-Component

Konventionen

• Alle API-Typen (Trackpoint, Stop, Suggestion, DaySummary) sind in api.ts definiert
• Alle fetch()-Aufrufe laufen über api.ts — kein direktes fetch() in Komponenten
• Auth-State wird über Session-Cookie gehalten (credentials: 'include' bei jedem Request)
• 401-Response in api.ts → automatischer Redirect auf /login
• Tile-URL der Karte ist als Property auf <track-map> konfigurierbar (REQ-MAP-02)
• Neue Routen in main.ts registrieren (via route()), neue Komponenten in components/ anlegen und in main.ts importieren