Anouma

Die Website von Anouma — Next.js (App Router) mit einem eingebauten Payload CMS (PostgreSQL) für Termine, Beiträge, Angebote und Seiteninhalte, plus Online-Termine mit P2P-Video-Call (WebRTC), Anmeldungen und E-Mail-Erinnerungen.

Projektstruktur

• app/(frontend)/ — die öffentliche Website (bestehendes ANOUMA-Design, eigener Root-Layout)
• app/(call)/ — die Video-Call-Oberfläche (/termine/[slug]/call), eigenes minimalistisches dunkles Layout ohne Navbar/Footer
• app/(payload)/ — der Admin-Bereich unter /admin, Payloads REST/GraphQL-API sowie die Meeting-/Cron-API-Routen (api/meetings/..., api/cron/...)
• app/global-not-found.tsx — statische 404-Seite (siehe unten, warum sie nötig ist)
• collections/, globals/, access/, fields/, payload.config.ts — die CMS-Konfiguration
• lib/payload/ — Local-API-Zugriffe für die öffentliche Website (mit React.cache pro Request memoisiert)
• lib/meeting/ — Meeting-Passwort, Zeitfenster/Status, signierte Beitritts-Tokens, WebSocket-Signaling, Reminder-Logik
• lib/email/ — SMTP-Versand (nodemailer) und das E-Mail-Template für Reminder
• lib/texte.ts — die ursprünglichen Anouma-Texte, nur noch als Seed-Quelle verwendet
• scripts/seed.ts — überträgt die vorhandenen Inhalte ins CMS
• server.ts — eigener Node-Server (statt next start), weil daran der WebRTC-Signaling-WebSocket hängt

Zwei bzw. drei Root-Layouts ((frontend), (payload), (call)) bedeuten: Next.js kann daraus keine einzelne 404-Seite komponieren, deshalb gibt es app/global-not-found.tsx (siehe experimental.globalNotFound in next.config.ts).

Online-Termine & Video-Call

• Ein Termin wird per Häkchen „Online-Termin“ zu einem Video-Call-Termin. Payload generiert dabei automatisch ein zufälliges Meeting-Passwort (nie aus der Meeting-ID abgeleitet); die Admin kann jederzeit ein neues erzeugen lassen.
• Öffentliche Beitrittsseite: /termine/[slug]/beitreten (Name + Passwort, beide Pflicht) → bei Erfolg /termine/[slug]/call.
• Ist die aufrufende Person im selben Browser als Admin eingeloggt, wird sie automatisch als Host erkannt (kein Passwort nötig, größeres Beitritts-Zeitfenster, exklusive Steuerung: Bildschirmfreigabe, Teilnehmer entfernen).
• Die Zeitfenster (wie früh Host/Teilnehmer beitreten dürfen, wie lange das Meeting nach Ende offen bleibt) sind zentral im CMS unter Video-Termin-Einstellungen konfigurierbar.
• Server-seitige Validierung: /api/meetings/[slug]/join prüft Termin, Zeitfenster und Passwort und stellt danach erst ein kurzlebiges, signiertes Sitzungs-Token aus (MEETING_SESSION_SECRET). Das WebSocket-Signaling (/ws/signaling, siehe server.ts) prüft dieses Token erneut, bevor jemand einem Raum beitreten darf.
• Reines P2P-WebRTC: Der Server relayt nur kleine Signaling-Nachrichten (Angebot/Antwort/ICE), niemals Audio/Video/Bildschirmfreigabe. Es wird nichts aufgezeichnet oder gespeichert.
• Teilnehmer-Anmeldungen laufen über die Collection Anmeldungen (event-registrations), öffentlich erreichbar über /api/meetings/[slug]/register.

E-Mail-Erinnerungen

Erinnerungs-Mails (60/30 Minuten vorher, pro Termin im CMS einzeln an-/abschaltbar) werden nicht automatisch im Hintergrund verschickt, sondern müssen von einem externen Cron-Job ausgelöst werden, z. B. alle 5 Minuten:

curl -H "Authorization: Bearer $CRON_SECRET" https://anouma.org/api/cron/event-reminders

Der Versand ist idempotent (reminder60Sent/reminder30Sent je Anmeldung, hostReminder60Sent/hostReminder30Sent je Termin) — ein häufiger laufender Cron verschickt also nie doppelt.

Setup

npm install
cp .env.example .env
# .env ausfüllen: DATABASE_URI, PAYLOAD_SECRET (z. B. mit `openssl rand -base64 48`)

Datenbank

Lokal per Docker:

docker compose up -d postgres

(oder eine gehostete Postgres-Instanz, z. B. Neon/Supabase — einfach DATABASE_URI in .env entsprechend setzen).

Entwicklung

npm run dev

• Website: http://localhost:3000
• Admin: http://localhost:3000/admin — beim ersten Aufruf legst du dort direkt deinen eigenen Admin-Zugang (E-Mail + Passwort) an. Es gibt kein Standardpasswort im Code.

Vorhandene Inhalte ins CMS übertragen

npm run seed

Überträgt die 7 Angebote sowie die Texte für Startseite, Über mich, Angebote-Einleitung, Aktuelles-Einleitung, Kontakt und Termin buchen aus lib/texte.ts ins CMS. Kann gefahrlos mehrfach ausgeführt werden. Kontaktdaten (E-Mail/Telefon/Region) werden zunächst als Platzhalter gesetzt — bitte im Admin unter „Kontakt“ durch die echten Angaben ersetzen.

Produktion

npm run build
npm run migrate   # wendet Datenbank-Migrationen an
npm run start

Mit Docker: docker build -t anouma . (baut die App und startet sie über den eigenen server.ts-Server statt next start, wegen des WebSocket-Signalings), .env per --env-file oder docker-compose.yml (Service app, aktuell auskommentiert) bereitstellen.

Weitere Skripte

Skript	Zweck
npm run generate:types	payload-types.ts aus der Config neu erzeugen
npm run generate:importmap	Admin-Importmap neu erzeugen (nach neuen Feldtypen)
npm run migrate:create	Neue Datenbank-Migration aus Config-Änderungen bauen
npm run lint	ESLint

Design

Siehe app/(frontend)/globals.css für das Farbsystem und AGENTS.md für die Next.js-Version-16-Hinweise, die für jede Code-Änderung in app/ gelten.