Seminar Payload CMS – Intensivseminar Entwicklung, APIs und Frontend

Das Intensivformat vermittelt die fachlichen und technischen Kompetenzen für eine planbare, wartbare und überprüfbare Umsetzung. Der Schwerpunkt liegt auf dem vollständigen Entwicklungsweg von Architektur und TypeScript-Setup über APIs, Hooks, Plugins und Admin-Komponenten bis zum Next.js-Frontend. Die Inhalte werden an einem durchgängigen Beispielprojekt erarbeitet und in nachvollziehbaren Arbeitsschritten umgesetzt.

Das fünftägige Intensivformat bündelt die entwicklungsorientierten Fachseminare zu einem vertikalen Projekt. Eine typisierte Anwendung wird geplant, konfiguriert, über mehrere APIs erschlossen, mit Geschäftslogik und wiederverwendbaren Erweiterungen ergänzt sowie in ein Next.js-Frontend mit Vorschau, Caching und Releaseprüfung integriert.

Inhaltsübersicht

• Einordnung und Zielbild
• Kompetenzziele
• Zielgruppe und Voraussetzungen
• Schrittweise Seminarinhalte
• Praxisübungen
• Lernkontrolle und Dokumentation

Einordnung und Zielbild

Die gewählte Dauer von 5 Tagen ermöglicht eine belastbare Verbindung aus Konzeptklärung, Demonstration, angeleiteter Umsetzung, eigenständiger Übung und strukturierter Qualitätskontrolle.

Zu Beginn werden Zielarchitektur, Verantwortlichkeiten und Abgrenzungen geklärt. Darauf folgen die fachliche Modellierung, die technische Umsetzung, die Überprüfung typischer Fehlerbilder und die Überführung in eine dokumentierte Projektkonvention.

Kompetenzziele

• Architektur- und Integrationsentscheidungen für ein Payload-Projekt transparent treffen.
• Typisierte Konfiguration, APIs und Geschäftslogik modular entwickeln.
• Plugins und Admin-Komponenten als wartbare Erweiterungen umsetzen.
• Next.js-Frontend mit Routing, Rendering, Cache und Vorschau integrieren.
• Vertikalen Funktionspfad automatisiert testen und releasefähig dokumentieren.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend-, Backend- und Full-Stack-Entwicklung, Solution Architecture, technische Projektleitung und Plattformteams.

Voraussetzungen: Sichere Kenntnisse in TypeScript, JavaScript-Webanwendungen und Versionsverwaltung sowie Grundkenntnisse in React und HTTP.

Schrittweise Seminarinhalte

1. Architektur, Ziele und vertikaler Schnitt

Das Entwicklungsprojekt erhält einen klaren fachlichen Umfang, Systemkontext und messbare Fertigstellungskriterien.

Kapitelinhaltsverzeichnis

• Schritt 1: Nutzeraufgabe, Inhaltsdomäne und Frontendziel definieren.
• Schritt 2: Systeme, Datenflüsse und Vertrauensgrenzen skizzieren.
• Schritt 3: Gemeinsame oder getrennte Deploymentvariante bewerten.
• Schritt 4: Vertikalen Minimalpfad mit Nicht-Zielen festlegen.
• Schritt 5: Architekturentscheidungen und Risiken dokumentieren.
• Praxisauftrag

1. Schritt 1: Nutzeraufgabe, Inhaltsdomäne und Frontendziel definieren.
2. Schritt 2: Systeme, Datenflüsse und Vertrauensgrenzen skizzieren.
3. Schritt 3: Gemeinsame oder getrennte Deploymentvariante bewerten.
4. Schritt 4: Vertikalen Minimalpfad mit Nicht-Zielen festlegen.
5. Schritt 5: Architekturentscheidungen und Risiken dokumentieren.

Praxisauftrag: Ein umsetzbarer vertikaler Projektschnitt mit Architekturprotokoll wird erstellt.

2. Projekt-Setup und typisierte Konfiguration

Lokale Umgebung, Modulstruktur und generierte Typen bilden die reproduzierbare Entwicklungsbasis.

Kapitelinhaltsverzeichnis

• Schritt 1: Projekt und Datenbankverbindung reproduzierbar einrichten.
• Schritt 2: Konfiguration in Collections, Globals und gemeinsame Bausteine modularisieren.
• Schritt 3: Generierte Typen in Services und Frontend verwenden.
• Schritt 4: Umgebungswerte und Server-Client-Grenzen absichern.
• Schritt 5: Lokale Typ-, Build- und Startprüfung automatisieren.
• Praxisauftrag

1. Schritt 1: Projekt und Datenbankverbindung reproduzierbar einrichten.
2. Schritt 2: Konfiguration in Collections, Globals und gemeinsame Bausteine modularisieren.
3. Schritt 3: Generierte Typen in Services und Frontend verwenden.
4. Schritt 4: Umgebungswerte und Server-Client-Grenzen absichern.
5. Schritt 5: Lokale Typ-, Build- und Startprüfung automatisieren.

Praxisauftrag: Ein teamfähiges Grundprojekt wird aufgebaut und mit Setup-Anleitung übergeben.

3. Content-Modell und Zugriffsbasis

Der vertikale Anwendungsfall erhält ein kleines, aber vollständiges Modell mit Beziehungen, Validierung und Rollen.

Kapitelinhaltsverzeichnis

• Schritt 1: Collections, Global, Felder und Beziehungen aus dem Use Case ableiten.
• Schritt 2: Slugs, Pflichtwerte und fachliche Validierung ergänzen.
• Schritt 3: Auth-Collection und zwei Rollen einrichten.
• Schritt 4: Grundlegende Lese- und Änderungsregeln implementieren.
• Schritt 5: Beispieldaten und Negativfälle prüfen.
• Praxisauftrag

1. Schritt 1: Collections, Global, Felder und Beziehungen aus dem Use Case ableiten.
2. Schritt 2: Slugs, Pflichtwerte und fachliche Validierung ergänzen.
3. Schritt 3: Auth-Collection und zwei Rollen einrichten.
4. Schritt 4: Grundlegende Lese- und Änderungsregeln implementieren.
5. Schritt 5: Beispieldaten und Negativfälle prüfen.

Praxisauftrag: Das Minimalmodell wird mit Authentifizierung und kontrollierten Beispielinhalten umgesetzt.

4. REST, GraphQL und Local API

Datenzugriffe werden nach Clientkontext gewählt und mit gezielter Projektion sowie eindeutigen Fehlern aufgebaut.

Kapitelinhaltsverzeichnis

• Schritt 1: Clientkontexte und primären Zugriffspfad zuordnen.
• Schritt 2: REST- und GraphQL-Abfrage mit Filtern und Beziehungen erstellen.
• Schritt 3: Serverseitige Operation über die Local API implementieren.
• Schritt 4: Benutzerkontext und Zugriffskontrolle konsistent anwenden.
• Schritt 5: Antwortgröße und Abfragezahl messen.
• Praxisauftrag

1. Schritt 1: Clientkontexte und primären Zugriffspfad zuordnen.
2. Schritt 2: REST- und GraphQL-Abfrage mit Filtern und Beziehungen erstellen.
3. Schritt 3: Serverseitige Operation über die Local API implementieren.
4. Schritt 4: Benutzerkontext und Zugriffskontrolle konsistent anwenden.
5. Schritt 5: Antwortgröße und Abfragezahl messen.

Praxisauftrag: Ein Lese- und Änderungsfall wird über drei API-Wege implementiert und verglichen.

5. Hooks, Validierung und Transaktionen

Fachlogik wird an stabilen Grenzen platziert und gegen Rekursion, Teilausfälle und doppelte Nebenwirkungen abgesichert.

Kapitelinhaltsverzeichnis

• Schritt 1: Regeln zwischen Validierung, Hook, Service und Job aufteilen.
• Schritt 2: Lebenszyklus-Hooks mit klaren Vor- und Nachbedingungen umsetzen.
• Schritt 3: Kontext für Folgeoperationen und Rekursionsschutz verwenden.
• Schritt 4: Transaktion und externe Nebenwirkung trennen.
• Schritt 5: Normal-, Fehler- und Wiederholungsfälle automatisiert testen.
• Praxisauftrag

1. Schritt 1: Regeln zwischen Validierung, Hook, Service und Job aufteilen.
2. Schritt 2: Lebenszyklus-Hooks mit klaren Vor- und Nachbedingungen umsetzen.
3. Schritt 3: Kontext für Folgeoperationen und Rekursionsschutz verwenden.
4. Schritt 4: Transaktion und externe Nebenwirkung trennen.
5. Schritt 5: Normal-, Fehler- und Wiederholungsfälle automatisiert testen.

Praxisauftrag: Ein Freigabeprozess mit Validierung, Hookfolge, Transaktion und entkoppelter Benachrichtigung wird aufgebaut.

6. Eigener Endpunkt und API-Vertrag

Eine fachliche Operation wird als stabiler, geschützter und testbarer Vertrag bereitgestellt.

Kapitelinhaltsverzeichnis

• Schritt 1: Eingabe, Vorbedingungen und Nachbedingungen beschreiben.
• Schritt 2: Schema- und fachliche Validierung implementieren.
• Schritt 3: Authentifizierung und Berechtigung prüfen.
• Schritt 4: Idempotenz und Konfliktfälle behandeln.
• Schritt 5: Vertragstests und Migrationshinweis vorbereiten.
• Praxisauftrag

1. Schritt 1: Eingabe, Vorbedingungen und Nachbedingungen beschreiben.
2. Schritt 2: Schema- und fachliche Validierung implementieren.
3. Schritt 3: Authentifizierung und Berechtigung prüfen.
4. Schritt 4: Idempotenz und Konfliktfälle behandeln.
5. Schritt 5: Vertragstests und Migrationshinweis vorbereiten.

Praxisauftrag: Ein idempotenter Freigabe-Endpunkt wird implementiert und durch Vertragstests abgesichert.

7. Plugin und wiederverwendbare Bausteine

Wiederkehrende Konfiguration und Logik werden in eine kleine, konfliktarme Erweiterung überführt.

Kapitelinhaltsverzeichnis

• Schritt 1: Plugin-Schnitt und Nicht-Ziele festlegen.
• Schritt 2: Konfigurationstransformation und Optionsschnittstelle typisieren.
• Schritt 3: Feldgruppe, Hook oder Endpunkt modular kapseln.
• Schritt 4: Namensräume und Mehrfachregistrierung prüfen.
• Schritt 5: Referenzanwendung und Installationsprüfung einrichten.
• Praxisauftrag

1. Schritt 1: Plugin-Schnitt und Nicht-Ziele festlegen.
2. Schritt 2: Konfigurationstransformation und Optionsschnittstelle typisieren.
3. Schritt 3: Feldgruppe, Hook oder Endpunkt modular kapseln.
4. Schritt 4: Namensräume und Mehrfachregistrierung prüfen.
5. Schritt 5: Referenzanwendung und Installationsprüfung einrichten.

Praxisauftrag: Ein Projektbaustein wird als versionierbares Plugin mit Referenzanwendung extrahiert.

8. Admin-Komponenten

Eine projektspezifische Oberfläche unterstützt den Fachprozess, ohne serverseitige Regeln zu ersetzen.

Kapitelinhaltsverzeichnis

• Schritt 1: Geeigneten Erweiterungspunkt auswählen.
• Schritt 2: Komponente registrieren und Props typisieren.
• Schritt 3: Formzustand, Lade- und Fehlerzustände verarbeiten.
• Schritt 4: Berechtigungsabhängige Darstellung ergänzen.
• Schritt 5: Barrierefreiheit und Performance prüfen.
• Praxisauftrag

1. Schritt 1: Geeigneten Erweiterungspunkt auswählen.
2. Schritt 2: Komponente registrieren und Props typisieren.
3. Schritt 3: Formzustand, Lade- und Fehlerzustände verarbeiten.
4. Schritt 4: Berechtigungsabhängige Darstellung ergänzen.
5. Schritt 5: Barrierefreiheit und Performance prüfen.

Praxisauftrag: Eine rollenabhängige Feld- oder Aktionskomponente wird entwickelt und getestet.

9. Next.js-Routing, Rendering und Cache

Das Frontend löst Inhalte typisiert auf und kombiniert passende Rendering- sowie Invalidierungsstrategien.

Kapitelinhaltsverzeichnis

• Schritt 1: Projektstruktur und Server-only-Datenzugriff festlegen.
• Schritt 2: Dynamische Routen und Nicht-gefunden-Fälle implementieren.
• Schritt 3: Seitentypen statisch, dynamisch oder gestreamt ausliefern.
• Schritt 4: Cache-Schlüssel und abhängige Invalidierung definieren.
• Schritt 5: Medien und Metadaten performant integrieren.
• Praxisauftrag

1. Schritt 1: Projektstruktur und Server-only-Datenzugriff festlegen.
2. Schritt 2: Dynamische Routen und Nicht-gefunden-Fälle implementieren.
3. Schritt 3: Seitentypen statisch, dynamisch oder gestreamt ausliefern.
4. Schritt 4: Cache-Schlüssel und abhängige Invalidierung definieren.
5. Schritt 5: Medien und Metadaten performant integrieren.

Praxisauftrag: Ein mehrseitiges Frontend wird mit Routingmatrix und gezielter Cache-Invalidierung aufgebaut.

10. Vorschau, Live Preview und Release

Der vertikale Pfad wird redaktionell prüfbar und durch End-to-End-Tests sowie Releasegates abgesichert.

Kapitelinhaltsverzeichnis

• Schritt 1: Sicheren Vorschaukontext mit Entwurfsdaten einrichten.
• Schritt 2: Live Preview für partielle Formularzustände integrieren.
• Schritt 3: End-to-End-Fall von Bearbeitung bis Veröffentlichung automatisieren.
• Schritt 4: Build, Migration, Smoke-Test und Rollbackfolge dokumentieren.
• Schritt 5: Architektur-, API- und Betriebsdokumentation vervollständigen.
• Praxisauftrag

1. Schritt 1: Sicheren Vorschaukontext mit Entwurfsdaten einrichten.
2. Schritt 2: Live Preview für partielle Formularzustände integrieren.
3. Schritt 3: End-to-End-Fall von Bearbeitung bis Veröffentlichung automatisieren.
4. Schritt 4: Build, Migration, Smoke-Test und Rollbackfolge dokumentieren.
5. Schritt 5: Architektur-, API- und Betriebsdokumentation vervollständigen.

Praxisauftrag: Das Projekt wird mit Vorschau, Live Preview, E2E-Test und vollständiger Releasecheckliste abgenommen.

Praxisübungen

• Vertikale Zielarchitektur
• Typisiertes Projekt-Setup
• REST-, GraphQL- und Local-API-Fall
• Hooks, Transaktion und eigener Endpunkt
• Plugin und Admin-Komponente
• Next.js-Frontend mit Cache
• Vorschau, E2E-Test und Release

Die Übungen werden mit klaren Eingangsdaten, Prüfkriterien und dokumentierten Soll-Ergebnissen durchgeführt. Fehler werden nicht nur korrigiert, sondern anhand ihrer Ursache, Auswirkung und geeigneten Präventionsmaßnahme eingeordnet.

Lernkontrolle und Dokumentation

Die Lernkontrolle verbindet kurze Verständnisfragen, Konfigurationsprüfungen, Code- oder Modellreviews und eine abschließende Transferaufgabe. Entscheidend ist die nachvollziehbare Begründung der gewählten Lösung.

• Abgleich der Umsetzung mit den fachlichen Akzeptanzkriterien
• Prüfung von Berechtigungen, Validierung, Fehlerbehandlung und Wartbarkeit
• Dokumentation der zentralen Entscheidungen und Betriebsannahmen
• Festhalten offener Risiken und der nächsten Umsetzungsschritte
• Erstellung einer wiederverwendbaren Checkliste für das eigene Projekt