cms.c2sgmbh/prompts/Community management roadmap prompt.md

Community Management System - Phasen 2.3 bis 3.0

Kontext

Du arbeitest am Community Management System für Complex Care Solutions (CCS). Die Phasen 1.0, 2.1 und 2.2 sind abgeschlossen:

Phase 1.0 (✅ Live):

• Community Inbox mit Filter, Suche, Detail-View
• YouTube OAuth Integration
• Rules Engine für Automatisierung
• Export (PDF/Excel/CSV)
• Claude AI Sentiment-Analyse

Phase 2.1 (✅ Merged):

• Analytics Dashboard unter /admin/views/community/analytics
• 6 API-Endpoints (overview, sentiment-trend, response-metrics, channel-comparison, top-content, topic-cloud)
• 6 React-Komponenten mit Recharts
• Responsive Design, Dark Mode

Phase 2.2 (✅ Merged):

• YouTube Auto-Sync (Cron alle 15 Min)
• AI Reply Suggestions (3 Tonalitäten)
• Kanalspezifische Personas (corporate, lifestyle, business)
• ClaudeReplyService mit medizinischer Fragen-Erkennung

---

Technischer Stack

Komponente	Technologie
Framework	Next.js 15 (App Router)
CMS	Payload CMS 3.x
Datenbank	PostgreSQL 17
Styling	SCSS mit BEM-Konvention
Charts	Recharts
AI	Anthropic Claude API (claude-3-5-haiku)
Auth	Payload Auth + OAuth 2.0
Deployment	Vercel

---

Bestehende Architektur

Verzeichnisstruktur

src/
├── app/(payload)/
│   ├── admin/views/community/
│   │   ├── inbox/
│   │   │   ├── page.tsx
│   │   │   ├── CommunityInbox.tsx
│   │   │   └── inbox.scss
│   │   └── analytics/
│   │       ├── page.tsx
│   │       ├── AnalyticsDashboard.tsx
│   │       ├── analytics.scss
│   │       └── components/
│   └── api/community/
│       ├── stats/route.ts
│       ├── export/route.ts
│       ├── reply/route.ts
│       ├── sync/route.ts
│       ├── generate-reply/route.ts
│       └── analytics/[...]/route.ts
├── lib/
│   ├── integrations/
│   │   ├── youtube/
│   │   │   ├── YouTubeClient.ts
│   │   │   └── CommentsSyncService.ts
│   │   └── claude/
│   │       ├── ClaudeAnalysisService.ts
│   │       └── ClaudeReplyService.ts
│   └── jobs/
│       ├── JobLogger.ts
│       └── syncAllComments.ts
├── collections/
│   ├── SocialPlatforms.ts
│   ├── SocialAccounts.ts
│   ├── CommunityInteractions.ts
│   ├── CommunityTemplates.ts
│   └── CommunityRules.ts
└── types/
    └── youtube.ts

Datenbank-Schema (CommunityInteractions)

{
  platform: Relation<SocialPlatforms>        // youtube, instagram, tiktok
  socialAccount: Relation<SocialAccounts>
  linkedContent?: Relation<YouTubeContent | InstagramContent | TikTokContent>
  type: 'comment' | 'reply' | 'dm' | 'mention' | 'review' | 'question'
  externalId: string                         // Plattform-spezifische ID
  author: {
    externalId: string
    name: string
    handle: string
    avatarUrl?: string
    isVerified: boolean
    isSubscriber: boolean
    followerCount?: number
  }
  message: string
  analysis: {
    sentiment: 'positive' | 'neutral' | 'negative' | 'question' | 'gratitude' | 'frustration'
    sentimentScore: number
    confidence: number
    topics: Array<{ topic: string }>
    suggestedReply?: string
  }
  flags: {
    isMedicalQuestion: boolean
    requiresEscalation: boolean
    isSpam: boolean
    isFromInfluencer: boolean
  }
  status: 'new' | 'in_review' | 'waiting' | 'replied' | 'resolved' | 'archived' | 'spam'
  priority: 'urgent' | 'high' | 'normal' | 'low'
  response?: {
    text: string
    usedTemplate?: Relation<CommunityTemplates>
    sentAt: Date
    sentBy: Relation<Users>
    externalId?: string
  }
}

SocialAccounts Schema

{
  platform: Relation<SocialPlatforms>
  accountName: string
  accountHandle: string
  channelType: 'corporate' | 'lifestyle' | 'business'
  credentials: {
    accessToken: string
    refreshToken: string
    expiresAt: Date
    scope: string
  }
  syncSettings: {
    enabled: boolean
    lastSyncAt: Date
    syncInterval: number  // Minuten
  }
  stats: {
    followers: number
    totalInteractions: number
    lastUpdated: Date
  }
}

---

Phase 2.3: Instagram Integration

Ziel

Instagram-Kommentare und DMs synchronisieren, analysieren und beantworten – analog zur YouTube-Integration.

Voraussetzungen

• Instagram Business Account (verbunden mit Facebook Page)
• Meta Business Suite Zugang
• Instagram Graph API Zugang

API-Referenz

• Instagram Graph API: https://developers.facebook.com/docs/instagram-api
• Webhooks: https://developers.facebook.com/docs/instagram-api/guides/webhooks

Deliverables

1. OAuth Flow für Instagram

src/app/(payload)/api/auth/instagram/
├── route.ts           # OAuth initiate
└── callback/route.ts  # OAuth callback

Scopes benötigt:

• instagram_basic
• instagram_manage_comments
• instagram_manage_messages (für DMs, falls verfügbar)
• pages_show_list
• pages_read_engagement

2. Instagram Client

src/lib/integrations/instagram/
├── InstagramClient.ts
├── CommentsSyncService.ts
└── types.ts

InstagramClient Methoden:

class InstagramClient {
  // Auth
  async refreshAccessToken(): Promise<void>
  
  // Media (Posts, Reels, Stories)
  async getMedia(accountId: string, limit?: number): Promise<InstagramMedia[]>
  async getMediaComments(mediaId: string): Promise<InstagramComment[]>
  
  // Comments
  async replyToComment(commentId: string, message: string): Promise<string>
  async deleteComment(commentId: string): Promise<void>
  async hideComment(commentId: string): Promise<void>
  
  // Mentions
  async getMentions(accountId: string): Promise<InstagramMention[]>
  
  // DMs (wenn verfügbar)
  async getConversations(accountId: string): Promise<InstagramConversation[]>
  async sendMessage(conversationId: string, message: string): Promise<void>
}

3. Sync Service

// CommentsSyncService.ts
class InstagramCommentsSyncService {
  async syncAccount(account: SocialAccount): Promise<SyncResult>
  async syncAllAccounts(): Promise<SyncResult[]>
}

Sync-Logik:

1. Alle Media-Items der letzten 30 Tage abrufen
2. Kommentare pro Media-Item abrufen
3. Neue Kommentare in DB speichern
4. Claude-Analyse triggern
5. Mentions separat abrufen und speichern

4. Cron Job erweitern

// src/app/(payload)/api/cron/social-sync/route.ts
// Erweitere bestehenden YouTube-Sync um Instagram

export async function GET(request: Request) {
  // Auth check...
  
  const results = {
    youtube: await syncYouTubeComments(),
    instagram: await syncInstagramComments(),
  }
  
  return Response.json({ success: true, results })
}

5. Collection Updates

SocialPlatforms - Neuer Eintrag:

{
  name: 'Instagram',
  slug: 'instagram',
  icon: 'instagram',
  features: ['comments', 'mentions', 'dms', 'stories'],
  apiVersion: 'v18.0'
}

InstagramContent Collection (neu):

// src/collections/InstagramContent.ts
{
  slug: 'instagram-content',
  fields: [
    { name: 'externalId', type: 'text', required: true, unique: true },
    { name: 'socialAccount', type: 'relationship', relationTo: 'social-accounts' },
    { name: 'mediaType', type: 'select', options: ['image', 'video', 'carousel', 'reel', 'story'] },
    { name: 'caption', type: 'textarea' },
    { name: 'permalink', type: 'text' },
    { name: 'thumbnailUrl', type: 'text' },
    { name: 'postedAt', type: 'date' },
    { name: 'stats', type: 'group', fields: [
      { name: 'likes', type: 'number' },
      { name: 'comments', type: 'number' },
      { name: 'shares', type: 'number' },
      { name: 'saves', type: 'number' },
      { name: 'reach', type: 'number' },
    ]},
  ]
}

6. UI Updates

CommunityInbox.tsx:

• Platform-Filter um "Instagram" erweitern
• Instagram-spezifische Icons und Badges
• "Hide Comment" Action für Instagram
• Story-Mentions separat anzeigen

ChannelComparison.tsx:

• Instagram-Accounts in Vergleichstabelle

Acceptance Criteria

• OAuth-Flow für Instagram Business Accounts funktioniert
• Kommentare werden alle 15 Minuten synchronisiert
• Mentions werden erkannt und importiert
• Antworten werden über API gepostet
• "Hide Comment" Funktion verfügbar
• Analytics Dashboard zeigt Instagram-Daten
• Keine TypeScript-Fehler
• Error Handling für API-Rate-Limits

Wichtige Hinweise

1. Long-lived Tokens: Instagram-Tokens laufen nach 60 Tagen ab → Refresh implementieren
2. Rate Limits: 200 Calls/Stunde pro User → Batching implementieren
3. Webhooks (optional): Für Echtzeit-Updates statt Polling
4. Story-Mentions: Verfallen nach 24h → schnell syncen

---

Phase 2.4: TikTok Integration

Ziel

TikTok-Kommentare synchronisieren und beantworten.

Voraussetzungen

• TikTok Business Account
• TikTok for Developers Zugang
• App-Genehmigung für Comment API

API-Referenz

• TikTok Content Posting API: https://developers.tiktok.com/doc/content-posting-api-get-started
• TikTok Login Kit: https://developers.tiktok.com/doc/login-kit-web

Deliverables

1. OAuth Flow für TikTok

src/app/(payload)/api/auth/tiktok/
├── route.ts
└── callback/route.ts

Scopes:

• user.info.basic
• video.list
• comment.list
• comment.list.manage

2. TikTok Client

src/lib/integrations/tiktok/
├── TikTokClient.ts
├── CommentsSyncService.ts
└── types.ts

TikTokClient Methoden:

class TikTokClient {
  async refreshAccessToken(): Promise<void>
  async getVideos(openId: string, cursor?: string): Promise<TikTokVideo[]>
  async getVideoComments(videoId: string, cursor?: string): Promise<TikTokComment[]>
  async replyToComment(videoId: string, commentId: string, text: string): Promise<string>
}

3. TikTokContent Collection

// src/collections/TikTokContent.ts
{
  slug: 'tiktok-content',
  fields: [
    { name: 'externalId', type: 'text', required: true, unique: true },
    { name: 'socialAccount', type: 'relationship', relationTo: 'social-accounts' },
    { name: 'title', type: 'text' },
    { name: 'description', type: 'textarea' },
    { name: 'shareUrl', type: 'text' },
    { name: 'coverImageUrl', type: 'text' },
    { name: 'duration', type: 'number' },
    { name: 'postedAt', type: 'date' },
    { name: 'stats', type: 'group', fields: [
      { name: 'views', type: 'number' },
      { name: 'likes', type: 'number' },
      { name: 'comments', type: 'number' },
      { name: 'shares', type: 'number' },
    ]},
  ]
}

4. Cron Job erweitern

// Erweitere social-sync um TikTok
const results = {
  youtube: await syncYouTubeComments(),
  instagram: await syncInstagramComments(),
  tiktok: await syncTikTokComments(),
}

Acceptance Criteria

• OAuth-Flow für TikTok Business Accounts
• Videos werden synchronisiert
• Kommentare werden importiert und analysiert
• Antworten können gepostet werden
• Analytics Dashboard integriert TikTok
• Rate Limiting beachtet (100 Requests/Minute)

Wichtige Hinweise

1. API-Zugang: TikTok Comment API erfordert App-Review → frühzeitig beantragen
2. Sandbox Mode: Erst in Sandbox testen, dann Production beantragen
3. Cursor-based Pagination: TikTok nutzt Cursor statt Offset
4. Kein DM-Zugang: TikTok API erlaubt keine DM-Integration

---

Phase 2.5: Auto-Reply System

Ziel

Vollautomatische Antworten für bestimmte Kommentar-Typen basierend auf konfigurierbaren Regeln.

Architektur

┌─────────────────────────────────────────────────────────────────┐
│                     AUTO-REPLY FLOW                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  New Comment ──▶ Analysis ──▶ Rule Matching ──▶ Decision       │
│                                      │                          │
│                           ┌──────────┴──────────┐              │
│                           ▼                     ▼              │
│                    [Auto-Reply]          [Manual Queue]        │
│                           │                                    │
│                           ▼                                    │
│                    Generate Reply ──▶ Post ──▶ Log             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Deliverables

1. AutoReplyRules Collection

// src/collections/AutoReplyRules.ts
{
  slug: 'auto-reply-rules',
  admin: {
    useAsTitle: 'name',
    group: 'Community',
  },
  fields: [
    { name: 'name', type: 'text', required: true },
    { name: 'description', type: 'textarea' },
    { name: 'enabled', type: 'checkbox', defaultValue: true },
    { name: 'priority', type: 'number', defaultValue: 0 },  // Höher = wird zuerst geprüft
    
    // Conditions
    { name: 'conditions', type: 'group', fields: [
      { name: 'platforms', type: 'relationship', relationTo: 'social-platforms', hasMany: true },
      { name: 'accounts', type: 'relationship', relationTo: 'social-accounts', hasMany: true },
      { name: 'sentiments', type: 'select', hasMany: true, options: [
        'positive', 'neutral', 'negative', 'question', 'gratitude', 'frustration'
      ]},
      { name: 'topicsInclude', type: 'array', fields: [{ name: 'topic', type: 'text' }] },
      { name: 'topicsExclude', type: 'array', fields: [{ name: 'topic', type: 'text' }] },
      { name: 'keywordsInclude', type: 'array', fields: [{ name: 'keyword', type: 'text' }] },
      { name: 'keywordsExclude', type: 'array', fields: [{ name: 'keyword', type: 'text' }] },
      { name: 'authorMinFollowers', type: 'number' },
      { name: 'authorMaxFollowers', type: 'number' },
      { name: 'excludeVerified', type: 'checkbox', defaultValue: false },
      { name: 'excludeInfluencers', type: 'checkbox', defaultValue: true },
    ]},
    
    // Exclusions (WICHTIG für Sicherheit)
    { name: 'exclusions', type: 'group', fields: [
      { name: 'excludeMedicalQuestions', type: 'checkbox', defaultValue: true },
      { name: 'excludeEscalations', type: 'checkbox', defaultValue: true },
      { name: 'excludeNegativeSentiment', type: 'checkbox', defaultValue: true },
      { name: 'excludeLongMessages', type: 'checkbox', defaultValue: true },
      { name: 'maxMessageLength', type: 'number', defaultValue: 500 },
      { name: 'confidenceThreshold', type: 'number', defaultValue: 80 },  // Mindest-Confidence für Auto-Reply
    ]},
    
    // Action
    { name: 'action', type: 'group', fields: [
      { name: 'type', type: 'select', options: [
        { label: 'Template verwenden', value: 'template' },
        { label: 'AI generieren', value: 'ai_generate' },
        { label: 'Template + AI personalisieren', value: 'template_ai' },
      ]},
      { name: 'template', type: 'relationship', relationTo: 'community-templates' },
      { name: 'aiTone', type: 'select', options: ['freundlich', 'professionell', 'empathisch'] },
      { name: 'delay', type: 'number', defaultValue: 0 },  // Minuten bis Auto-Reply
      { name: 'addSignature', type: 'checkbox', defaultValue: true },
    ]},
    
    // Limits
    { name: 'limits', type: 'group', fields: [
      { name: 'maxPerDay', type: 'number', defaultValue: 50 },
      { name: 'maxPerHour', type: 'number', defaultValue: 10 },
      { name: 'cooldownMinutes', type: 'number', defaultValue: 5 },  // Cooldown pro Autor
    ]},
    
    // Stats
    { name: 'stats', type: 'group', fields: [
      { name: 'totalFired', type: 'number', defaultValue: 0 },
      { name: 'lastFiredAt', type: 'date' },
    ]},
  ]
}

2. AutoReplyService

// src/lib/services/AutoReplyService.ts

interface AutoReplyDecision {
  shouldAutoReply: boolean
  rule?: AutoReplyRule
  reason: string
  generatedReply?: string
}

class AutoReplyService {
  /**
   * Prüft ob ein Kommentar auto-replied werden soll
   */
  async evaluate(interaction: CommunityInteraction): Promise<AutoReplyDecision>
  
  /**
   * Führt Auto-Reply aus
   */
  async execute(interaction: CommunityInteraction, rule: AutoReplyRule): Promise<void>
  
  /**
   * Prüft Rate Limits für eine Regel
   */
  private async checkLimits(rule: AutoReplyRule): Promise<boolean>
  
  /**
   * Generiert Reply basierend auf Action-Type
   */
  private async generateReply(
    interaction: CommunityInteraction, 
    rule: AutoReplyRule
  ): Promise<string>
  
  /**
   * Postet Reply auf Plattform
   */
  private async postReply(
    interaction: CommunityInteraction, 
    replyText: string
  ): Promise<string>
}

3. Integration in Sync-Flow

// Erweitere CommentsSyncService (alle Plattformen)

async syncComment(comment: RawComment): Promise<void> {
  // 1. In DB speichern
  const interaction = await this.saveInteraction(comment)
  
  // 2. Claude-Analyse
  await this.analyzeInteraction(interaction)
  
  // 3. Auto-Reply Check (NEU)
  const autoReplyService = new AutoReplyService()
  const decision = await autoReplyService.evaluate(interaction)
  
  if (decision.shouldAutoReply && decision.rule) {
    await autoReplyService.execute(interaction, decision.rule)
  }
}

4. Auto-Reply Log Collection

// src/collections/AutoReplyLogs.ts
{
  slug: 'auto-reply-logs',
  fields: [
    { name: 'interaction', type: 'relationship', relationTo: 'community-interactions' },
    { name: 'rule', type: 'relationship', relationTo: 'auto-reply-rules' },
    { name: 'generatedReply', type: 'textarea' },
    { name: 'postedAt', type: 'date' },
    { name: 'success', type: 'checkbox' },
    { name: 'error', type: 'text' },
    { name: 'responseTime', type: 'number' },  // ms bis Antwort gepostet
  ]
}

5. Admin UI für Auto-Reply Rules

Neue View: /admin/views/community/auto-reply

src/app/(payload)/admin/views/community/auto-reply/
├── page.tsx
├── AutoReplyManager.tsx
└── auto-reply.scss

Features:

• Liste aller Regeln mit Enable/Disable Toggle
• Regel-Editor mit Condition Builder
• Test-Modus: Kommentar eingeben und prüfen welche Regel matcht
• Stats: Fired Count, Success Rate, Avg Response Time
• Logs: Letzte 100 Auto-Replies mit Details

6. Analytics Integration

Neue Metriken:

• Auto-Reply Rate (% der Kommentare die auto-replied wurden)
• Auto-Reply Success Rate
• Durchschnittliche Auto-Reply Zeit
• Top Auto-Reply Rules
• Manual Override Rate (wie oft wurde Auto-Reply überschrieben)

Acceptance Criteria

• Regel-Editor im Admin-Panel
• Conditions werden korrekt ausgewertet
• Exclusions verhindern Auto-Reply bei sensiblen Inhalten
• Rate Limits funktionieren
• Logs werden geschrieben
• Test-Modus funktioniert
• Analytics zeigen Auto-Reply Metriken
• Medizinische Fragen werden NIEMALS auto-replied
• Negative Kommentare werden NIEMALS auto-replied (außer explizit konfiguriert)

Sicherheitsregeln (KRITISCH)

⚠️ NIEMALS AUTO-REPLY BEI:
1. Medizinischen Fragen (isMedicalQuestion = true)
2. Eskalationen (requiresEscalation = true)
3. Negativem Sentiment (außer explizit aktiviert)
4. Kommentaren von verifizierten Accounts (außer explizit aktiviert)
5. Langen, komplexen Nachrichten (> 500 Zeichen default)
6. Niedriger Analyse-Confidence (< 80% default)
7. Kommentaren die bereits beantwortet wurden

---

Phase 3.0: Scheduled Reports & Real-time Updates

Ziel

Automatische Reports per E-Mail und Echtzeit-Updates im Dashboard.

Deliverables

1. Scheduled Reports

ReportSchedules Collection:

// src/collections/ReportSchedules.ts
{
  slug: 'report-schedules',
  fields: [
    { name: 'name', type: 'text', required: true },
    { name: 'enabled', type: 'checkbox', defaultValue: true },
    { name: 'frequency', type: 'select', options: ['daily', 'weekly', 'monthly'] },
    { name: 'dayOfWeek', type: 'select', options: ['monday', 'tuesday', ...] },  // für weekly
    { name: 'dayOfMonth', type: 'number', min: 1, max: 28 },  // für monthly
    { name: 'time', type: 'text' },  // HH:MM Format
    { name: 'timezone', type: 'text', defaultValue: 'Europe/Berlin' },
    { name: 'recipients', type: 'array', fields: [{ name: 'email', type: 'email' }] },
    { name: 'reportType', type: 'select', options: [
      'overview',           // KPI Summary
      'sentiment_analysis', // Sentiment Deep-Dive
      'response_metrics',   // Team Performance
      'content_performance', // Top Content
      'full_report',        // Alle oben kombiniert
    ]},
    { name: 'channels', type: 'relationship', relationTo: 'social-accounts', hasMany: true },
    { name: 'format', type: 'select', options: ['pdf', 'excel', 'html_email'] },
    { name: 'lastSentAt', type: 'date' },
    { name: 'nextScheduledAt', type: 'date' },
  ]
}

ReportGeneratorService:

// src/lib/services/ReportGeneratorService.ts

class ReportGeneratorService {
  async generateReport(schedule: ReportSchedule): Promise<Buffer>
  async sendReport(schedule: ReportSchedule, report: Buffer): Promise<void>
}

Cron Job:

// src/app/(payload)/api/cron/send-reports/route.ts
// Läuft stündlich, prüft welche Reports fällig sind

2. Real-time Updates (WebSocket)

Option A: Vercel Serverless (Polling-Fallback)

// Da Vercel keine WebSockets unterstützt, Server-Sent Events (SSE) nutzen
// src/app/(payload)/api/community/stream/route.ts

export async function GET(request: Request) {
  const encoder = new TextEncoder()
  const stream = new ReadableStream({
    async start(controller) {
      // Polling-Loop mit 5s Intervall
      while (true) {
        const updates = await getRecentUpdates()
        controller.enqueue(encoder.encode(`data: ${JSON.stringify(updates)}\n\n`))
        await sleep(5000)
      }
    }
  })
  
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    }
  })
}

Option B: Externe WebSocket-Lösung

• Pusher, Ably, oder Socket.io mit separatem Server
• Trigger bei DB-Änderungen via Payload Hooks

Dashboard Integration:

// useRealtimeUpdates.ts Hook
function useRealtimeUpdates() {
  const [updates, setUpdates] = useState<Update[]>([])
  
  useEffect(() => {
    const eventSource = new EventSource('/api/community/stream')
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data)
      setUpdates(prev => [...data, ...prev].slice(0, 100))
    }
    return () => eventSource.close()
  }, [])
  
  return updates
}

UI Updates:

• Live-Counter für neue Kommentare
• Toast-Notifications bei wichtigen Events
• Auto-Refresh der Inbox bei neuen Items
• Pulsierender Badge wenn neue ungelesene Items

Acceptance Criteria

Scheduled Reports:

• Report-Editor im Admin-Panel
• Daily/Weekly/Monthly Scheduling funktioniert
• PDF-Reports werden generiert
• E-Mail-Versand funktioniert
• Timezone-Support

Real-time Updates:

• SSE-Endpoint funktioniert
• Dashboard zeigt Live-Updates
• Toast-Notifications bei neuen Kommentaren
• Kein Performance-Impact bei vielen Clients

---

Priorisierung

Phase	Priorität	Geschätzter Aufwand	Abhängigkeiten
2.3 Instagram	Hoch	3-4 Tage	Meta Business Suite Zugang
2.4 TikTok	Mittel	2-3 Tage	TikTok API Approval
2.5 Auto-Reply	Mittel	3-4 Tage	Phase 2.3 (mehr Testdaten)
3.0 Reports	Niedrig	2-3 Tage	E-Mail-Service (Resend/SendGrid)
3.0 Real-time	Niedrig	2-3 Tage	Optional: Pusher Account

---

Code-Konventionen (Referenz)

TypeScript

• Strict Mode aktiviert
• Interfaces für alle API-Responses
• Zod für Runtime-Validation

SCSS

• BEM-Konvention: .block__element--modifier
• Payload CSS-Variablen nutzen: --theme-elevation-X
• Mobile-first mit Breakpoints: 480px, 768px, 1024px, 1200px

API Routes

• Payload Auth via getPayload({ config })
• Konsistente Error-Responses: { error: string, details?: any }
• Success-Responses: { success: true, data: any }

Testing

• Manueller Test nach jeder Komponente
• API-Tests via curl/Postman dokumentieren
• Edge Cases: Leere Daten, API-Fehler, Rate Limits

---

Checkliste vor Merge

• Keine TypeScript-Fehler (npm run typecheck)
• Build erfolgreich (npm run build)
• Alle neuen Collections in payload.config.ts registriert
• Environment Variables dokumentiert
• API-Endpoints getestet
• UI responsiv auf Mobile
• Error States implementiert
• Loading States implementiert

---

Erstellt: 16. Januar 2026 Für: Dev-KI (Claude Code) Von: Konzept-KI (Claude Opus 4.5)