mporwoll/cms.c2sgmbh
1
0
Fork 0
mirror of https://github.com/complexcaresolutions/cms.c2sgmbh.git synced 2026-03-17 17:24:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: separate frontend tasks and add documentation summary

Browse source 
- Add FRONTEND.md with comprehensive frontend development guide
- Update TODO.md with summary of open payload-server tasks
- Mark frontend tasks as moved to FRONTEND.md with [→] symbol
- Include API endpoints, tenant filtering, and localization info

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Martin Porwoll 2025-12-11 15:02:04 +00:00
parent a066539129
commit 85d6e8fa18
2 changed files with 396 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

329
docs/anleitungen/FRONTEND.md Normal file
View file

@ -0,0 +1,329 @@
# Frontend-Entwicklung - Payload CMS Multi-Tenant
> **Server:** sv-frontend (LXC 704) - 10.10.181.104
> **Backend API:** https://pl.c2sgmbh.de/api
## Übersicht
Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS als Headless CMS über die REST-API.
---
## API-Dokumentation
| Ressource | URL |
|-----------|-----|
| **Swagger UI** | https://pl.c2sgmbh.de/api/docs |
| **OpenAPI JSON** | https://pl.c2sgmbh.de/api/openapi.json |
| **REST API Base** | https://pl.c2sgmbh.de/api |
---
## Offene Frontend-Tasks
### Hohe Priorität
- [ ] **Block-Komponenten entwickeln**
- [ ] Hero Block
- [ ] Text Block
- [ ] Image Text Block
- [ ] Card Grid Block
- [ ] Quote Block
- [ ] CTA Block
- [ ] Contact Form Block
- [ ] Video Block
- [ ] Divider Block
- [ ] Timeline Block
- [ ] Posts List Block
- [ ] Testimonials Block
- [ ] Newsletter Block
- [ ] Process Steps Block
- [ ] **Newsletter-Anmelde-Formular**
- API: `POST /api/newsletter/subscribe`
- Double Opt-In Flow bereits im Backend implementiert
- Felder: email, firstName (optional), tenantId, source
- [ ] **Cookie-Banner implementieren**
- Cookie Configurations aus API laden
- Consent-Logs an Backend senden
- DSGVO-konform mit Opt-In
### Mittlere Priorität
- [ ] **Multi-Tenant Routing**
- Domain-basierte Tenant-Erkennung
- Locale-Routing (`/[locale]/...`)
- Unterstützte Locales: `de` (default), `en`
- [ ] **SEO-Integration**
- Meta-Tags aus Pages/Posts
- Structured Data (JSON-LD)
- Sitemap: https://pl.c2sgmbh.de/sitemap.xml
- [ ] **Suche implementieren**
- API: `GET /api/search?q=...&locale=de`
- Auto-Complete: `GET /api/search/suggestions?q=...`
- Rate-Limit: 30 Requests/Minute
### Tenant-spezifische Features
#### porwoll.de
- [ ] Immobilien-Listing
- [ ] Objektsuche mit Filtern
- [ ] Kontaktformular mit Objekt-Referenz
#### complexcaresolutions.de (C2S)
- [ ] Team-Übersicht
- [ ] Leistungs-Seiten
- [ ] Karriere-Seite mit Stellenangeboten
#### gunshin.de (Fotografin-Portfolio)
- [ ] Portfolio-Galerie
- API: `GET /api/portfolios?where[tenant][equals]=5`
- Kategorien: `GET /api/portfolio-categories`
- [ ] Projekt-Detailseiten mit Lightbox
- [ ] Referenzen-Slider
#### zweitmein.ng
- [ ] Produkt-Übersicht (falls E-Commerce)
- [ ] FAQ-Sektion
- [ ] Preistabellen
---
## API-Endpoints
### Collections
| Collection | Endpoint | Beschreibung |
|------------|----------|--------------|
| Pages | `GET /api/pages` | Seiten mit Blocks |
| Posts | `GET /api/posts` | Blog, News, Presse |
| Categories | `GET /api/categories` | Post-Kategorien |
| Testimonials | `GET /api/testimonials` | Kundenbewertungen |
| Team | `GET /api/team` | Team-Mitglieder |
| Services | `GET /api/services` | Leistungen |
| FAQs | `GET /api/faqs` | FAQ-Einträge |
| Portfolios | `GET /api/portfolios` | Portfolio-Projekte |
| Media | `GET /api/media` | Medien/Bilder |
### Globals
| Global | Endpoint | Beschreibung |
|--------|----------|--------------|
| Site Settings | `GET /api/globals/site-settings` | Logo, Name, SEO |
| Navigation | `GET /api/globals/navigation` | Menü-Struktur |
| SEO Settings | `GET /api/globals/seo-settings` | Default SEO |
### Spezielle Endpoints
| Endpoint | Methode | Beschreibung |
|----------|---------|--------------|
| `/api/search` | GET | Volltextsuche |
| `/api/search/suggestions` | GET | Auto-Complete |
| `/api/newsletter/subscribe` | POST | Newsletter-Anmeldung |
---
## Tenant-Filterung
Alle Collection-Anfragen sollten nach Tenant gefiltert werden:
```typescript
// Beispiel: Posts für Tenant "c2s" (ID: 4)
fetch('https://pl.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de')
// Beispiel: Pages für Tenant "gunshin" (ID: 5)
fetch('https://pl.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de')
```
### Tenant-IDs
| ID | Name | Slug | Domain |
|----|------|------|--------|
| 1 | porwoll.de | porwoll | porwoll.de |
| 4 | Complex Care Solutions GmbH | c2s | complexcaresolutions.de |
| 5 | Gunshin | gunshin | gunshin.de |
---
## Bild-Optimierung
Media-Objekte enthalten mehrere Größen:
```typescript
interface Media {
url: string // Original
sizes: {
thumbnail: { url, width, height } // 150x150
small: { url, width, height } // 300x300
medium: { url, width, height } // 600x600
large: { url, width, height } // 1200x1200
xlarge: { url, width, height } // 1920x1920
'2k': { url, width, height } // 2560x2560
og: { url, width, height } // 1200x630 (Social)
// + AVIF-Varianten
thumbnail_avif: { url, width, height }
small_avif: { url, width, height }
// ...
}
focalX?: number // Fokuspunkt X (0-100)
focalY?: number // Fokuspunkt Y (0-100)
}
```
---
## Lokalisierung
Unterstützte Locales: `de` (default), `en`
```typescript
// Deutsch (default)
fetch('https://pl.c2sgmbh.de/api/posts?locale=de')
// Englisch
fetch('https://pl.c2sgmbh.de/api/posts?locale=en')
// Fallback: Wenn EN nicht vorhanden, wird DE zurückgegeben
```
---
## Newsletter-Integration
### Anmeldung
```typescript
const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: 'user@example.com',
firstName: 'Max', // optional
tenantId: 4, // Pflicht
source: 'footer' // optional: Herkunft
})
})
// Response: { success: true, message: '...' }
```
### Flow
1. User gibt E-Mail ein → `POST /api/newsletter/subscribe`
2. Backend sendet Double Opt-In E-Mail
3. User klickt Bestätigungs-Link
4. Backend sendet Willkommens-E-Mail
5. User kann sich über Link in E-Mails abmelden
---
## Cookie-Consent
### Konfiguration laden
```typescript
const config = await fetch('https://pl.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4')
```
### Consent loggen
```typescript
await fetch('https://pl.c2sgmbh.de/api/consent-logs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
tenant: 4,
consentGiven: true,
categories: ['necessary', 'analytics'],
ipAddress: '...', // Optional, für DSGVO
userAgent: navigator.userAgent
})
})
```
---
## Kontaktformular
Formular-Submissions werden über die Forms-Collection verarbeitet:
```typescript
await fetch('https://pl.c2sgmbh.de/api/form-submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
form: 1, // Form-ID
submissionData: [
{ field: 'name', value: 'Max Mustermann' },
{ field: 'email', value: 'max@example.com' },
{ field: 'message', value: 'Ihre Nachricht...' }
]
})
})
```
---
## Authentifizierung (optional)
Falls User-Authentifizierung benötigt wird:
```typescript
// Login
const { token, user } = await fetch('https://pl.c2sgmbh.de/api/users/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
}).then(r => r.json())
// Authentifizierte Requests
fetch('https://pl.c2sgmbh.de/api/...', {
headers: { 'Authorization': `JWT ${token}` }
})
```
---
## Entwicklungshinweise
### TypeScript-Typen
Die Payload-Typen können aus dem Backend exportiert werden:
```bash
# Auf dem Payload-Server
pnpm payload generate:types
# Datei: src/payload-types.ts
```
Diese Datei kann ins Frontend-Projekt kopiert werden für typsichere API-Calls.
### Rate-Limits
| Endpoint | Limit |
|----------|-------|
| Öffentliche API | 60/min |
| Suche | 30/min |
| Newsletter | 5/10min |
| Formulare | 5/10min |
### Caching
- API-Responses werden serverseitig gecacht (Redis)
- TTL: 60 Sekunden für Suche
- Cache wird bei Content-Änderungen invalidiert
---
## Ressourcen
- **Payload CMS Docs:** https://payloadcms.com/docs
- **API-Dokumentation:** https://pl.c2sgmbh.de/api/docs
- **Backend-Repository:** https://github.com/c2s-admin/cms.c2sgmbh.git
---
*Erstellt: 11.12.2025*

86
docs/anleitungen/TODO.md
View file

@ -1,12 +1,55 @@
# To-Do-Liste - Payload CMS Multi-Tenant Projekt # To-Do-Liste - Payload CMS Multi-Tenant Projekt
> **Server:** sv-payload (LXC 700) - 10.10.181.100
> **Frontend-Tasks:** Siehe `FRONTEND.md` (sv-frontend, LXC 704)
---
## Zusammenfassung: Offene Tasks (Payload-Server)
### Hohe Priorität
| Status | Task | Bereich |
|--------|------|---------|
| [ ] | Rate-Limits auf Redis migrieren | Performance |
| [ ] | SMTP-Credentials in `.env` konfigurieren | E-Mail |
### Mittlere Priorität
| Status | Task | Bereich |
|--------|------|---------|
| [ ] | Media-Backup zu S3/MinIO | Backup |
| [ ] | CDN-Integration (Cloudflare) | Caching |
| [ ] | Connection Pooling (PgBouncer) | Datenbank |
| [ ] | CI/CD Pipeline erweitern (Lint/Test/Build) | DevOps |
| [ ] | Staging-Deployment | DevOps |
| [ ] | Memory-Problem lösen (Swap) | Infrastruktur |
| [ ] | PM2 Cluster Mode testen | Infrastruktur |
### Niedrige Priorität
| Status | Task | Bereich |
|--------|------|---------|
| [ ] | Monitoring: Sentry, Prometheus, Grafana | Monitoring |
| [ ] | AuditLogs Retention (90 Tage Cron) | Data Retention |
| [ ] | Email-Log Cleanup Cron | Data Retention |
| [ ] | Dashboard-Widget für Email-Status | Admin UX |
| [ ] | TypeScript Strict Mode | Tech Debt |
| [ ] | Unit Tests für Access Control | Testing |
| [ ] | E2E Tests für kritische Flows | Testing |
### Dokumentation
| Status | Task |
|--------|------|
| [ ] | DEPLOYMENT.md erstellen |
| [ ] | ~~FRONTEND_INTEGRATION.md~~ → Siehe `FRONTEND.md` |
---
## Legende ## Legende
- [ ] Offen - [ ] Offen
- [x] Erledigt - [x] Erledigt
- [~] In Bearbeitung - [~] In Bearbeitung
- [!] Hohe Priorität - [!] Hohe Priorität
- [?] Klärungsbedarf - [→] Ausgelagert (siehe FRONTEND.md)
--- ---
@ -103,10 +146,11 @@
- [x] API-Endpoints: subscribe, confirm, unsubscribe - [x] API-Endpoints: subscribe, confirm, unsubscribe
- [x] Automatischer E-Mail-Versand via Hook - [x] Automatischer E-Mail-Versand via Hook
- [ ] **[!] Frontend-Komponenten entwickeln** - [→] **Frontend-Komponenten entwickeln** → Siehe `FRONTEND.md`
- React/Next.js Komponenten für alle Blocks - ~~React/Next.js Komponenten für alle Blocks~~
- Newsletter-Anmelde-Formular - ~~Newsletter-Anmelde-Formular~~
- Cookie-Banner implementieren - ~~Cookie-Banner implementieren~~
- *Entwicklung auf sv-frontend (LXC 704)*
### Mittlere Priorität ### Mittlere Priorität
@ -423,15 +467,18 @@
## Phase 5: Tenant-spezifische Features ## Phase 5: Tenant-spezifische Features
> **Hinweis:** Backend-Collections hier, Frontend-Komponenten in `FRONTEND.md`
### porwoll.de ### porwoll.de
- [ ] Immobilien-Collection (falls benötigt) - [ ] Immobilien-Collection (falls benötigt) *(Backend)*
- [ ] Objektsuche - [→] Objektsuche *(Frontend)*
- [ ] Kontaktformular mit Objekt-Referenz - [→] Kontaktformular mit Objekt-Referenz *(Frontend)*
### complexcaresolutions.de (C2S) ### complexcaresolutions.de (C2S)
- [ ] Team-Collection - [x] Team-Collection *(bereits vorhanden)*
- [ ] Leistungs-Übersicht - [x] Services-Collection *(bereits vorhanden)*
- [ ] Karriere-Seite mit Stellenangeboten - [→] Leistungs-Übersicht *(Frontend)*
- [→] Karriere-Seite mit Stellenangeboten *(Frontend)*
### gunshin.de / Fotografin-Portfolio ### gunshin.de / Fotografin-Portfolio
- [x] Portfolio-Categories Collection (Erledigt: 06.12.2025) - [x] Portfolio-Categories Collection (Erledigt: 06.12.2025)
@ -444,13 +491,13 @@
- [x] Projekt-Details (Kunde, Ort, Datum, Ausrüstung) - [x] Projekt-Details (Kunde, Ort, Datum, Ausrüstung)
- [x] Status (draft/published/archived) - [x] Status (draft/published/archived)
- [x] isFeatured, SEO-Felder - [x] isFeatured, SEO-Felder
- [ ] Projekt-Galerie Frontend - [→] Projekt-Galerie Frontend *(Frontend)*
- [ ] Referenzen-Slider - [→] Referenzen-Slider *(Frontend)*
### zweitmein.ng ### zweitmein.ng
- [ ] Produkt-Collection (falls E-Commerce) - [ ] Produkt-Collection (falls E-Commerce) *(Backend)*
- [ ] FAQ-Collection - [x] FAQ-Collection *(bereits vorhanden)*
- [ ] Preistabellen - [→] Preistabellen *(Frontend)*
--- ---
@ -479,8 +526,8 @@
- [x] ANALYTICS_IMPLEMENTATION_GUIDE.md (Umami & Google Ads) - [x] ANALYTICS_IMPLEMENTATION_GUIDE.md (Umami & Google Ads)
- [x] Techstack_Dokumentation_12_2025.md (Infrastruktur & Deployment) - [x] Techstack_Dokumentation_12_2025.md (Infrastruktur & Deployment)
- [x] SECURITY.md (Sicherheitsrichtlinien) (Erledigt: 08.12.2025) - [x] SECURITY.md (Sicherheitsrichtlinien) (Erledigt: 08.12.2025)
- [x] FRONTEND.md (Frontend-Entwicklung für sv-frontend) (Erledigt: 11.12.2025)
- [ ] DEPLOYMENT.md (Deployment-Prozess) - [ ] DEPLOYMENT.md (Deployment-Prozess)
- [ ] FRONTEND_INTEGRATION.md (Next.js Guide)
--- ---
@ -520,8 +567,9 @@
3. ~~**[HOCH]** Full-Text-Search aktivieren (USE_FTS=true)~~ ✅ Erledigt 3. ~~**[HOCH]** Full-Text-Search aktivieren (USE_FTS=true)~~ ✅ Erledigt
4. **[HOCH]** Rate-Limits auf Redis migrieren (In-Memory-Fallback funktioniert) 4. **[HOCH]** Rate-Limits auf Redis migrieren (In-Memory-Fallback funktioniert)
5. ~~**[MITTEL]** CI/CD Pipeline mit GitHub Actions~~ ✅ security.yml erstellt 5. ~~**[MITTEL]** CI/CD Pipeline mit GitHub Actions~~ ✅ security.yml erstellt
6. **[MITTEL]** Frontend-Entwicklung starten 6. ~~**[MITTEL]** Frontend-Entwicklung starten~~ → sv-frontend (siehe FRONTEND.md)
7. **[NIEDRIG]** Admin UX Verbesserungen 7. **[MITTEL]** Media-Backup zu S3 einrichten
8. **[NIEDRIG]** Monitoring (Sentry/Prometheus)
--- ---