Files
oikos/CLAUDE.md
T
ulsklyc d49cbe33b3 feat: Phase 1 — Projektstruktur, DB-Schema, Auth-System
- Vollständige Verzeichnisstruktur gemäß CLAUDE.md
- Express-Server mit Helmet, Sessions, Rate Limiting, SPA-Fallback
- SQLite-Schema (Migration v1): 10 Tabellen, updated_at-Triggers, Indizes
- Versioniertes Migrations-System (schema_migrations)
- Auth-Routen: Login, Logout, /me, Admin-User-CRUD
- Frontend App-Shell: SPA-Router, API-Client, Design-System (CSS Tokens)
- PWA: Service Worker, Web App Manifest
- Setup-Script für ersten Admin-User (node setup.js)
- DB-Tests mit node:sqlite built-in: 29/29 bestanden
- Docker Compose + Dockerfile + Nginx-Beispielkonfiguration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 14:32:36 +01:00

517 lines
21 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# CLAUDE.md — Familienplaner Web-App „Oikos"
<role>
Du bist ein Senior Full-Stack-Entwickler mit Expertise in Self-Hosted Web-Apps, Progressive Web Apps, Datenbankdesign und UX/UI-Design. Du arbeitest methodisch in klar abgegrenzten Phasen und lieferst produktionsreifen, dokumentierten Code.
</role>
<project_context>
Selbstgehostete Familienplaner-Web-App mit dem Namen "Oikos" für eine einzelne Familie (26 Personen). Kein App-Store, kein öffentlicher Zugang. Deployment via Docker auf einem privaten Linux-Server hinter Nginx Reverse Proxy mit SSL. Die App wird ausschließlich über den Browser auf Android, iOS und Desktop genutzt.
</project_context>
---
## ARCHITEKTUR-ENTSCHEIDUNGEN
<tech_stack>
### Backend
- **Runtime:** Node.js (LTS)
- **Framework:** Express.js (minimalistisch, nur Routing + Middleware)
- **Datenbank:** SQLite mit **better-sqlite3** + **SQLCipher** (Verschlüsselung at rest)
- **Auth:** Session-basiert mit **bcrypt** (Passwort-Hashing) + **express-session** mit SQLite-Session-Store
- **API-Design:** RESTful JSON-API, alle Routen unter `/api/v1/`
- **Kalender-Sync:** CalDAV-Client-Library für Google Calendar / Apple Calendar Integration
- **Wetter-API:** OpenWeatherMap Free Tier (serverseitiger Proxy, API-Key nie im Frontend)
### Frontend
- **Kein Build-Step.** Kein React, kein Vue, kein Webpack, kein Bundler.
- **Vanilla JavaScript** mit ES-Modulen (`type="module"`)
- **Web Components** (Custom Elements) für wiederverwendbare UI-Komponenten
- **CSS:** Custom Properties (Design Tokens), CSS Grid + Flexbox, Container Queries
- **Interaktivität:** Alpine.js (optional, ~15kb, CDN-Einbindung, kein Build nötig) — NUR wenn DOM-Manipulation in Vanilla JS zu verbose wird
- **Icons:** Lucide Icons (SVG, CDN)
- **PWA:** Service Worker für Offline-Grundfunktionalität, Web App Manifest für „Add to Homescreen"
### Deployment
- **Docker Compose:** Ein Container für die App (Node.js), Volumes für SQLite-DB und Uploads
- **Reverse Proxy:** Konfiguration für Nginx Proxy Manager (Beispiel-Config mitliefern)
- **Umgebungsvariablen:** `.env`-Datei für alle Secrets (DB-Passwort, API-Keys, Session-Secret)
</tech_stack>
<architecture_principles>
1. **Single-Page-Application-Verhalten** ohne SPA-Framework: Client-seitiges Routing über History API mit einem leichtgewichtigen eigenen Router (~50 Zeilen).
2. **API-First:** Jedes Modul hat eine saubere REST-API. Das Frontend ist ein reiner API-Consumer.
3. **Mobile-First Design:** Alle Layouts zuerst für 375px Breite entwerfen, dann nach oben skalieren.
4. **Offline-Tolerant:** Service Worker cached App-Shell. Daten werden bei Reconnect synchronisiert.
5. **Keine Telemetrie, kein Tracking, keine externen Fonts.** Alles self-contained.
</architecture_principles>
---
## DATENMODELL
<database_schema>
Entwirf das Schema nach diesen Entitäten. Jede Tabelle bekommt `id` (INTEGER PRIMARY KEY), `created_at`, `updated_at` (ISO 8601 Timestamps).
### Users
- `username` (UNIQUE, NOT NULL)
- `display_name`
- `password_hash` (bcrypt)
- `avatar_color` (HEX — für farbliche Zuordnung im UI)
- `role` (ENUM: 'admin', 'member') — Admin kann Familienmitglieder verwalten
### Tasks (Aufgaben-Modul)
- `title` (NOT NULL)
- `description` (Notizfeld, TEXT)
- `category` (z.B. Haushalt, Schule, Einkauf, Reparatur, Sonstiges)
- `priority` (ENUM: 'low', 'medium', 'high', 'urgent')
- `status` (ENUM: 'open', 'in_progress', 'done')
- `due_date` (DATE, nullable)
- `due_time` (TIME, nullable)
- `assigned_to` (FK → Users.id, nullable)
- `created_by` (FK → Users.id)
- `is_recurring` (BOOLEAN)
- `recurrence_rule` (TEXT, nullable — iCal RRULE Format, z.B. `FREQ=WEEKLY;BYDAY=MO,TH`)
- `parent_task_id` (FK → Tasks.id, nullable — für Teilaufgaben)
### Shopping Lists (Einkaufslisten-Modul)
- `name` (z.B. "Wocheneinkauf", "Baumarkt")
### Shopping Items
- `list_id` (FK → Shopping Lists.id)
- `name` (NOT NULL)
- `quantity` (TEXT, z.B. "500g", "2 Stück")
- `category` (ENUM: 'Obst & Gemüse', 'Milchprodukte', 'Fleisch & Fisch', 'Backwaren', 'Getränke', 'Tiefkühl', 'Haushalt', 'Drogerie', 'Sonstiges')
- `is_checked` (BOOLEAN)
- `added_from_meal` (FK → Meals.id, nullable — Herkunft aus Essensplan)
### Meals (Essensplan-Modul)
- `date` (DATE, NOT NULL)
- `meal_type` (ENUM: 'breakfast', 'lunch', 'dinner', 'snack')
- `title` (NOT NULL, z.B. "Spaghetti Bolognese")
- `notes` (TEXT, nullable)
- `created_by` (FK → Users.id)
### Meal Ingredients
- `meal_id` (FK → Meals.id)
- `name` (NOT NULL)
- `quantity` (TEXT, nullable)
- `on_shopping_list` (BOOLEAN — wurde bereits auf Einkaufsliste übernommen?)
### Calendar Events (Kalender-Modul)
- `title` (NOT NULL)
- `description` (TEXT, nullable)
- `start_datetime` (DATETIME, NOT NULL)
- `end_datetime` (DATETIME, nullable)
- `all_day` (BOOLEAN)
- `location` (TEXT, nullable)
- `color` (HEX — visuelle Kategorie)
- `assigned_to` (FK → Users.id, nullable)
- `created_by` (FK → Users.id)
- `external_calendar_id` (TEXT, nullable — ID aus Google/Apple Calendar)
- `external_source` (ENUM: 'local', 'google', 'apple')
- `recurrence_rule` (TEXT, nullable — iCal RRULE)
### Notes (Pinnwand-Modul)
- `title` (nullable)
- `content` (TEXT, NOT NULL)
- `color` (HEX — Sticky-Note-Farbe)
- `pinned` (BOOLEAN)
- `created_by` (FK → Users.id)
### Contacts (Wichtige Kontakte)
- `name` (NOT NULL)
- `category` (ENUM: 'Arzt', 'Schule/Kita', 'Behörde', 'Versicherung', 'Handwerker', 'Notfall', 'Sonstiges')
- `phone` (TEXT, nullable)
- `email` (TEXT, nullable)
- `address` (TEXT, nullable)
- `notes` (TEXT, nullable)
### Budget Entries (Budget-Tracker)
- `title` (NOT NULL)
- `amount` (REAL, NOT NULL — positiv = Einnahme, negativ = Ausgabe)
- `category` (ENUM: 'Lebensmittel', 'Miete', 'Versicherung', 'Mobilität', 'Freizeit', 'Kleidung', 'Gesundheit', 'Bildung', 'Sonstiges')
- `date` (DATE, NOT NULL)
- `is_recurring` (BOOLEAN)
- `recurrence_rule` (TEXT, nullable)
- `created_by` (FK → Users.id)
</database_schema>
---
## MODULE — FUNKTIONALE SPEZIFIKATIONEN
<module_dashboard>
### Dashboard (Startseite)
**Route:** `/`
**Layout:** Responsive Grid (1 Spalte mobil, 2 Spalten Tablet, 3 Spalten Desktop).
**Widgets:**
1. **Begrüßung** — "Guten [Morgen/Tag/Abend], [Name]" mit aktuellem Datum
2. **Wetter-Widget** — Aktuelles Wetter + 3-Tage-Vorschau. Standort konfigurierbar in Settings. Daten vom Backend-Proxy (OpenWeatherMap). Refresh alle 30 Minuten. Fallback bei API-Fehler: Widget ausblenden, kein Error-Screen.
3. **Anstehende Termine** — Nächste 35 Termine aus dem Kalender-Modul. Farbcodiert nach Person. Klick → Kalender-Modul.
4. **Dringende Aufgaben** — Aufgaben mit `priority: urgent/high` UND `due_date` innerhalb der nächsten 48h. Sortiert nach Fälligkeit. Klick → Aufgaben-Modul.
5. **Heutiges Essen** — Mahlzeiten für heute aus dem Essensplan. Zeigt Titel + Meal-Type. Klick → Essensplan-Modul.
6. **Pinnwand-Vorschau** — Letzte 23 angepinnte Notizen. Klick → Pinnwand.
7. **Schnellaktionen** — Floating Action Button (FAB) mit: + Aufgabe, + Termin, + Einkaufslisteneintrag, + Notiz.
**Design-Vorgaben:**
- Widgets als Cards mit `border-radius: 12px`, subtiler `box-shadow`
- Farbschema: Neutraler Hintergrund (`#F5F5F7`), Cards weiß, Akzentfarbe konfigurierbar
- Smooth Scroll, keine abrupten Übergänge
- Skeleton-Loading-States während API-Calls (keine Spinner)
</module_dashboard>
<module_tasks>
### Aufgaben-Modul
**Route:** `/tasks`
**Ansichten:**
1. **Listenansicht** (Standard) — Gruppiert nach Kategorie ODER Fälligkeit (umschaltbar). Filter: Person, Priorität, Status.
2. **Kanban-Ansicht** — Spalten: Offen → In Bearbeitung → Erledigt. Drag & Drop zum Statuswechsel.
**Funktionen:**
- CRUD für Aufgaben + Teilaufgaben (beliebig verschachtelbar, max. 2 Ebenen)
- Zuweisung an Familienmitglied (Avatar-Farbe als Indikator)
- Dringlichkeitsstufen visuell durch Farbe/Icon codiert
- Wiederkehrende Aufgaben: Bei Erledigung wird automatisch die nächste Instanz erstellt
- Swipe-Gesten auf Mobil: Links = erledigt, Rechts = bearbeiten
- Benachrichtigung (In-App-Badge) bei überfälligen Aufgaben
**Teilaufgaben:**
- Checkbox-Liste innerhalb einer Aufgabe
- Fortschrittsbalken (z.B. 3/5 Teilaufgaben erledigt)
- Eigene Notiz pro Teilaufgabe
</module_tasks>
<module_shopping>
### Einkaufslisten-Modul
**Route:** `/shopping`
**Funktionen:**
- Mehrere Listen parallel (z.B. "REWE", "dm", "Baumarkt")
- Artikel mit Kategorie, Menge, Checkbox
- Automatische Gruppierung nach Kategorie (Supermarkt-Gang-Logik)
- **Essensplan-Integration:** Button "Zutaten auf Einkaufsliste" im Essensplan → Zutaten werden mit Quell-Referenz übernommen
- Erledigte Artikel werden durchgestrichen, nach unten sortiert
- "Liste leeren" entfernt nur abgehakte Artikel
- Artikel-Vorschläge basierend auf bisherigen Einträgen (lokaler Autocomplete, kein externer Service)
</module_shopping>
<module_mealplan>
### Essensplan-Modul
**Route:** `/meals`
**Layout:** Wochenansicht (MoSo), jeder Tag mit Slots für Frühstück/Mittag/Abend/Snack.
**Funktionen:**
- Mahlzeit eintragen: Titel + optionale Notizen + Zutatenliste
- Zutaten pro Mahlzeit erfassen (Name + Menge)
- **Button "→ Einkaufsliste":** Überträgt alle nicht-abgehakten Zutaten der aktuellen Woche auf eine wählbare Einkaufsliste. Bereits übertragene Zutaten werden markiert.
- Wochennavigation (vor/zurück)
- Mahlzeiten per Drag & Drop zwischen Tagen/Slots verschieben
- Vergangene Mahlzeiten als Vorschläge beim Tippen (Autocomplete aus Historie)
</module_mealplan>
<module_calendar>
### Familienkalender-Modul
**Route:** `/calendar`
**Ansichten:**
1. **Monatsansicht** (Standard) — Tage mit Punkt-Indikatoren für Termine
2. **Wochenansicht** — Stundenraster mit Terminblöcken
3. **Tagesansicht** — Detaillierte Timeline
4. **Agenda-Ansicht** — Chronologische Liste aller kommenden Termine
**Funktionen:**
- CRUD für Termine (Titel, Beschreibung, Start/Ende, Ganztägig, Ort, Farbe, Zuweisung)
- Farbcodierung pro Person (Avatar-Farbe aus User-Profil)
- Wiederkehrende Termine (iCal RRULE)
- **Kalender-Sync:**
- **Google Calendar:** OAuth 2.0 → Google Calendar API v3. Zwei-Wege-Sync.
- **Apple Calendar (iCloud):** CalDAV-Protokoll. Zwei-Wege-Sync.
- Sync-Intervall konfigurierbar (Standard: alle 15 Minuten)
- Externe Termine visuell unterscheidbar (dezenter Badge/Icon)
- Konflikte: Externes Event gewinnt bei Änderungen, lokale Ergänzungen bleiben erhalten
</module_calendar>
<module_notes>
### Pinnwand / Notizen-Modul
**Route:** `/notes`
**Layout:** Masonry-Grid (Pinterest-Style) mit farbigen Sticky Notes.
**Funktionen:**
- CRUD für Notizen (Titel optional, Inhalt, Farbe wählbar)
- Anpinnen (erscheint oben + auf Dashboard)
- Ersteller wird angezeigt (Avatar-Farbe)
- Markdown-Light im Inhalt (fett, kursiv, Listen — kein Full-Markdown-Parser nötig, regex-basiert)
</module_notes>
<module_contacts>
### Wichtige Kontakte
**Route:** `/contacts`
**Funktionen:**
- CRUD für Kontakte mit Kategorie-Filter
- Telefonnummer als `tel:`-Link (direkter Anruf auf Mobil)
- E-Mail als `mailto:`-Link
- Adresse als Link zu Google Maps / Apple Maps (User-Agent-Detection)
- Suchfeld mit Echtzeit-Filter
</module_contacts>
<module_budget>
### Budget-Tracker
**Route:** `/budget`
**Ansichten:**
1. **Monatsübersicht** — Einnahmen vs. Ausgaben, Saldo. Balkendiagramm nach Kategorie (Canvas-basiert, keine Chart-Library).
2. **Transaktionsliste** — Chronologisch, filterbar nach Kategorie/Monat.
**Funktionen:**
- CRUD für Einträge (Titel, Betrag, Kategorie, Datum)
- Wiederkehrende Buchungen (Miete, Gehalt, Abos)
- Monatsvergleich (aktueller vs. Vormonat)
- Export als CSV
</module_budget>
---
## AUTHENTIFIZIERUNG & SICHERHEIT
<security>
1. **Login-Screen:** Username + Passwort. Kein öffentlicher Registrierungs-Endpoint. Neue User werden nur durch Admin erstellt.
2. **Passwort-Hashing:** bcrypt mit Cost Factor 12.
3. **Sessions:** `express-session` mit `httpOnly`, `secure`, `sameSite: strict` Cookies. Session-Timeout: 7 Tage.
4. **CSRF-Protection:** Double Submit Cookie Pattern.
5. **Rate Limiting:** 5 Login-Versuche pro Minute pro IP, danach 15min Sperre.
6. **Datenbank-Verschlüsselung:** SQLCipher (AES-256-CBC). Schlüssel aus `.env`.
7. **Input Validation:** Alle API-Inputs serverseitig validieren. Kein `eval()`, kein `innerHTML` mit User-Input.
8. **Content Security Policy:** Strikte CSP-Header. Nur eigene Ressourcen + explizit erlaubte CDNs.
9. **HTTPS-only:** App setzt `Strict-Transport-Security` Header. Redirect HTTP → HTTPS.
</security>
---
## UI/UX DESIGN-SYSTEM
<design_system>
### Farben (CSS Custom Properties)
```css
:root {
/* Neutrals */
--color-bg: #F5F5F7;
--color-surface: #FFFFFF;
--color-border: #E5E5EA;
--color-text-primary: #1C1C1E;
--color-text-secondary: #8E8E93;
/* Akzent (konfigurierbar pro Installation) */
--color-accent: #007AFF;
--color-accent-light: #E3F2FF;
/* Semantisch */
--color-success: #34C759;
--color-warning: #FF9500;
--color-danger: #FF3B30;
--color-info: #5AC8FA;
/* Prioritäten */
--color-priority-low: #8E8E93;
--color-priority-medium: #FF9500;
--color-priority-high: #FF6B35;
--color-priority-urgent: #FF3B30;
/* Schatten */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
/* Radien */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
/* Typografie */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', monospace;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1C1C1E;
--color-surface: #2C2C2E;
--color-border: #3A3A3C;
--color-text-primary: #F5F5F7;
--color-text-secondary: #8E8E93;
}
}
```
### Typografie
- Überschriften: System Font Stack, font-weight 600700
- Body: 16px (mobile), 15px (desktop), line-height 1.5
- Small/Caption: 13px, `color: var(--color-text-secondary)`
### Komponenten-Standards
- **Cards:** `background: var(--color-surface)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)`
- **Buttons:** Primär = `var(--color-accent)` + weiße Schrift. Sekundär = Outline. Mindesthöhe 44px (Touch-Target).
- **Inputs:** `border-radius: var(--radius-sm)`, `border: 1.5px solid var(--color-border)`, `padding: 12px 16px`
- **Navigation:** Bottom Tab Bar auf Mobil (5 Tabs: Dashboard, Aufgaben, Kalender, Essen, Mehr). Sidebar auf Desktop.
- **Übergänge:** `transition: all 0.2s ease` für interaktive Elemente. Seiten-Übergänge: Slide-Animation.
- **Leer-Zustände:** Jede Liste/Ansicht hat einen illustrierten Empty State mit Call-to-Action.
- **Touch:** Haptic Feedback wo möglich (`navigator.vibrate`). Pull-to-Refresh auf Listen.
### Responsive Breakpoints
- Mobil: < 768px (1 Spalte, Bottom Nav)
- Tablet: 768px1024px (2 Spalten, Bottom Nav)
- Desktop: > 1024px (Sidebar + Content Area)
</design_system>
---
## ENTWICKLUNGSPLAN — PHASENSTRUKTUR
<development_phases>
### Phase 1: Fundament
1. Projektstruktur anlegen (Verzeichnisse, package.json, .env.example, .gitignore)
2. Express-Server mit grundlegendem Routing-Setup
3. SQLite + SQLCipher Datenbankverbindung + Schema-Migration
4. Auth-System (Login, Session, User-CRUD für Admin)
5. Frontend App-Shell (SPA-Router, Navigation, Layout-Gerüst)
6. CSS Design-System (Custom Properties, Basis-Komponenten)
7. Docker Compose + Nginx-Config
### Phase 2: Kern-Module
8. Dashboard (Layout + Widget-Slots, zunächst mit Platzhaltern)
9. Aufgaben-Modul (CRUD + Listenansicht + Teilaufgaben)
10. Einkaufslisten-Modul (CRUD + Kategorien + Checkbox-Logik)
11. Essensplan-Modul (Wochenansicht + CRUD + Zutaten)
12. Essensplan → Einkaufsliste Integration
### Phase 3: Kalender & Erweiterungen
13. Kalender-Modul (lokale Termine, Monats-/Wochen-/Tagesansicht)
14. Google Calendar OAuth + Sync
15. Apple Calendar CalDAV + Sync
16. Pinnwand-Modul
17. Kontakte-Modul
18. Budget-Tracker
### Phase 4: Polish & Integration
19. Dashboard-Widgets mit Live-Daten verbinden
20. Wetter-Widget (OpenWeatherMap-Integration)
21. Wiederkehrende Aufgaben + Termine (RRULE-Engine)
22. Kanban-Ansicht für Aufgaben
23. Dark Mode
24. PWA (Service Worker, Manifest, Offline-Shell)
25. Drag & Drop (Aufgaben, Essensplan)
26. Swipe-Gesten (Mobil)
### Phase 5: Härtung
27. Input-Validation + Sanitization auf allen Endpoints
28. CSRF-Protection
29. Rate Limiting
30. CSP-Header + Security-Audit
31. Error Handling (globaler Error Boundary im Frontend, strukturierte Fehler-API)
32. Performance-Optimierung (Lazy Loading, Caching-Strategie)
33. README.md mit Setup-Anleitung
</development_phases>
---
## ANWEISUNGEN FÜR CLAUDE CODE
<execution_rules>
1. **Arbeite Phase für Phase.** Beginne keine neue Phase, bevor die aktuelle Phase vollständig funktioniert und getestet ist.
2. **Jede Datei bekommt einen Header-Kommentar:** Zweck, Modul-Zugehörigkeit, Abhängigkeiten.
3. **Kein toter Code.** Keine auskommentierten Blöcke, keine TODO-Kommentare ohne zugehörige GitHub-Issue-Referenz.
4. **API-Endpoints:** Dokumentiere jeden Endpoint inline als JSDoc-Kommentar mit Route, Method, Body, Response-Schema.
5. **Fehlerbehandlung:** Jeder API-Endpoint hat try/catch. Fehler werden als `{ error: string, code: number }` zurückgegeben.
6. **Frontend-Komponenten:** Jede Web Component ist eine eigene Datei in `/public/components/`. Naming: `fb-[modul]-[name].js` (z.B. `fb-task-card.js`).
7. **CSS:** Eine globale `styles.css` mit Design Tokens + Reset. Pro Modul eine eigene CSS-Datei. Kein Inline-Styling.
8. **Dateistruktur:**
```
/oikos
├── server/
│ ├── index.js (Express Entry Point)
│ ├── db.js (SQLite/SQLCipher Setup + Migrations)
│ ├── auth.js (Auth Middleware + Routes)
│ ├── routes/
│ │ ├── tasks.js
│ │ ├── shopping.js
│ │ ├── meals.js
│ │ ├── calendar.js
│ │ ├── notes.js
│ │ ├── contacts.js
│ │ ├── budget.js
│ │ └── weather.js
│ └── services/
│ ├── google-calendar.js
│ ├── apple-calendar.js
│ └── recurrence.js (RRULE-Parser/Generator)
├── public/
│ ├── index.html (App Shell)
│ ├── router.js (Client-Side Router)
│ ├── api.js (Fetch-Wrapper mit Auth + Error Handling)
│ ├── styles/
│ │ ├── tokens.css
│ │ ├── reset.css
│ │ ├── layout.css
│ │ └── [modul].css
│ ├── components/
│ │ ├── fb-app-shell.js
│ │ ├── fb-nav-bar.js
│ │ ├── fb-dashboard.js
│ │ ├── fb-task-*.js
│ │ ├── fb-shopping-*.js
│ │ ├── fb-meal-*.js
│ │ ├── fb-calendar-*.js
│ │ ├── fb-notes-*.js
│ │ ├── fb-contacts-*.js
│ │ └── fb-budget-*.js
│ ├── pages/
│ │ ├── dashboard.js
│ │ ├── tasks.js
│ │ ├── shopping.js
│ │ ├── meals.js
│ │ ├── calendar.js
│ │ ├── notes.js
│ │ ├── contacts.js
│ │ ├── budget.js
│ │ ├── settings.js
│ │ └── login.js
│ ├── sw.js (Service Worker)
│ └── manifest.json
├── docker-compose.yml
├── Dockerfile
├── nginx.conf.example
├── .env.example
├── package.json
└── README.md
```
9. **Keine externen Abhängigkeiten im Frontend** außer: Lucide Icons (CDN), optional Alpine.js (CDN).
10. **Backend-Dependencies** minimieren: `express`, `better-sqlite3`, `bcrypt`, `express-session`, `express-rate-limit`, `helmet`, `dotenv`. Für Kalender-Sync: `node-fetch`, `googleapis` (Google), `tsdav` (CalDAV).
11. **Deutsche UI-Texte.** Alle Labels, Buttons, Meldungen auf Deutsch. Datumsformate: `DD.MM.YYYY`, Uhrzeiten: `HH:MM` (24h).
12. **Bei Architektur-Unklarheiten:** Nicht raten. Frage nach. Dokumentiere die Entscheidung als Kommentar.
</execution_rules>
---
## QUALITÄTSKRITERIEN
<success_criteria>
- [ ] App startet mit `docker compose up` ohne manuelle Schritte außer `.env` konfigurieren
- [ ] Login funktioniert, Session bleibt über Browser-Neustart erhalten
- [ ] Alle 8 Module (Dashboard, Aufgaben, Einkauf, Essen, Kalender, Pinnwand, Kontakte, Budget) sind CRUD-funktional
- [ ] Essensplan-Zutaten können auf Einkaufsliste übernommen werden
- [ ] Dashboard zeigt Live-Daten aus allen relevanten Modulen
- [ ] Wetter-Widget zeigt aktuelle Daten
- [ ] App ist auf iPhone SE (375px) voll bedienbar
- [ ] Dark Mode funktioniert systemgesteuert
- [ ] Datenbank ist verschlüsselt (SQLCipher)
- [ ] Kein API-Endpoint ist ohne Auth erreichbar (außer Login)
- [ ] Lighthouse Mobile Score: Performance > 85, Accessibility > 90, Best Practices > 90
- [ ] Google Calendar Sync funktioniert bidirektional
</success_criteria>