Du kannst 2026 ein echtes SaaS bauen und ausliefern, indem du einen AI-Coding-Agent über einen kleinen, bewährten Stack steuerst, und dieser Pillar-Guide ist die Karte, um das von Anfang bis Ende zu tun: von der Idee zum Scaffold, zur Authentifizierung, zur Datenbank, zu Payments, zum Livegang. Die Arbeit ist nicht mehr, jede Zeile zu tippen; sie ist, die richtigen Teile zu wählen, sie sauber zu verdrahten und zu verifizieren, was der Agent baut. Der Stack, den wir lehren, ist der, den ein Solo-Founder tatsächlich ausliefern und warten kann: ein modernes Framework für die App, Clerk für Auth, Convex für die Datenbank, Stripe für Payments und ein Agent wie Claude Code, der den Build steuert. Dieser Guide gibt dir die ganze Sequenz und verlinkt die Deep Dives, die Vergleiche hinter jeder Wahl und den Kurs, der jede Stufe im Detail durchgeht. Alles hier ist Stand Juni 2026.
Der Modern SaaS Stack in einem Bild
Ein SaaS sind dieselben drei Schichten wie jede App (ein Frontend, das der User sieht, ein Backend, das Logik und Secrets hält, und eine Datenbank, die Daten speichert) plus die wenigen Services, die aus einer App ein Business machen: Authentifizierung, damit User Accounts haben, eine Datenbank, die in Echtzeit synchronisiert, und Payments, damit du abrechnen kannst. Der 2026-Default für einen Solo-Founder oder ein kleines Team ist ein Framework für die App, Clerk für Auth, Convex für die reaktive Datenbank und Stripe für Payments, alles von einem Coding-Agent zusammengeklebt, den du steuerst. Du musst nicht genau diese Tools nutzen, aber du brauchst eine gute Wahl in jedem Slot. Unser Cornerstone-Artikel, Modern App Stack erklärt, legt das ganze Bild dar; dieser Guide ist der Build-Pfad hindurch.
- App-Framework: rendert die UI und liefert die App aus (Next.js, TanStack Start, Astro und andere).
- Auth: User-Accounts, Login und OAuth, von einem Provider übernommen, damit du nie selbst Passwörter speicherst.
- Datenbank: wo deine Daten leben und synchronisieren; Convex ist reaktiv, sodass die UI live aktualisiert.
- Payments: Stripe für Checkout, Subscriptions und Webhooks. Siehe den Artikel Modern App Stack erklärt für die ganze Karte.
Schritt 1: von der Idee zum Scaffold
Beginne damit, die Idee auf einen Job einzuengen, den dein Produkt gut macht, und lass dann deinen Agent das Projekt scaffolden. Die Disziplin, die hier zählt, ist Scope: Ein SaaS, das eine Sache klar macht, schlägt eines, das zehn Dinge vage macht, genau wie der favicon-maker-Build gelernt hat. Lass deinen Coding-Agent das Framework, die Versionskontrolle und einen Dev-Server aufsetzen und bring eine leere App lokal zum Laufen, bevor du irgendetwas hinzufügst. Schreib eine CLAUDE.md mit deinem Stack und deinen Konventionen, damit der Agent vom ersten Commit an auf deinen Regeln baut. Das Ziel dieser Stufe ist ein laufendes Skelett, das du deployen kannst, kein Feature, denn die leere Hülle früh auszuliefern entschärft alles, was folgt.
- Eng auf einen Kern-Job einengen; widersteh Feature-Creep, bevor du irgendetwas ausgeliefert hast.
- Lass den Agent Framework, Git und einen Dev-Server scaffolden und lokal laufen.
- Füge eine CLAUDE.md hinzu, damit der Agent von Anfang an deinem Stack und deinen Konventionen folgt.
- Course 3 Lektion: Architecture 101 erklärt, wie die Teile zusammenpassen, bevor du sie verdrahtest.
Schritt 2: Authentifizierung mit Clerk hinzufügen
Fast jedes SaaS braucht Accounts, und du solltest Login nie von Grund auf bauen: Eigene Auth zu rollen ist, wie Secrets leaken und Sessions brechen. Ein Auth-Provider übernimmt Signup, Login, OAuth (mit Google und anderen anmelden), Sessions und Sicherheit für dich, also verdrahtest du ein paar Komponenten und schützt deine Routes. Clerk ist der Default, den wir lehren, weil es schnell zu integrieren ist und sauber mit diesem Stack zusammenpasst, aber Auth0 und Supabase Auth sind je nach Bedarf valide Wahlen. Wir schlüsseln diese Entscheidung im Vergleich Clerk vs Auth0 vs Supabase Auth auf; was du auch wählst, das Prinzip ist dasselbe: Delegiere den sicherheitskritischen Teil an Spezialisten. Der Modern App Stack Kurs geht die komplette Clerk-Integration durch, inklusive Google OAuth und dem Dev-zu-Production-Schritt.
- Roll nie deine eigene Auth; ein Provider übernimmt Login, OAuth, Sessions und Sicherheit.
- Clerk ist hier der Default; wäge es in unserem Vergleich gegen Auth0 und Supabase Auth ab.
- Verdrahte die Auth-Komponenten, dann schütze die Routes und Daten, die einen eingeloggten User brauchen.
- Course 3 Lektion: Clerk-Authentifizierung und OAuth von Dev bis Production.
Schritt 3: deine Daten in Convex modellieren
Dein SaaS braucht einen Ort, um Daten zu speichern, die einen Refresh überleben und über User geteilt werden, und die moderne Wahl für diesen Stack ist Convex: eine reaktive Datenbank, bei der deine Queries die UI automatisch aktualisieren, wenn sich die zugrunde liegenden Daten ändern, sodass du weit weniger Synchronisations-Code schreibst. Du definierst dein Schema, schreibst Funktionen, die Daten lesen und schreiben, und das Frontend abonniert live Ergebnisse. Convex ist nicht die einzige Option (Supabase und Firebase sind starke Alternativen mit anderen Trade-offs), und wir legen diese Entscheidung im Vergleich Convex vs Supabase vs Firebase dar. Der Grund, warum reaktive Daten für einen Solo-Founder zählen, ist Hebelwirkung: Die Datenbank, die die Live-Updates für dich macht, ist ein System weniger, das du bauen und debuggen musst. Der Modern App Stack Kurs behandelt das Modellieren von Daten und das Schreiben von Convex-Funktionen vollständig.
- Eine Datenbank speichert Daten dauerhaft und teilt sie über User und Sessions.
- Convex ist reaktiv: Queries aktualisieren die UI live, also schreibst du weniger Sync-Code.
- Vergleiche es gegen Supabase und Firebase in unserem Backend-Vergleich, bevor du dich festlegst.
- Course 3 Lektion: Convex, deine reaktive Datenbank. Entwirf die API und das Schema vor der UI, wie der BizCollect-Build gelernt hat.
Schritt 4: Kunden mit Stripe abrechnen
Ein SaaS ist ein Business, also braucht es Payments, und Stripe ist der Standard für Checkout, Subscriptions und die Webhooks, die deine App mit dem synchron halten, was ein Kunde tatsächlich bezahlt hat. Der Ablauf hat zwei Hälften. Erst Checkout und Subscriptions: Du erstellst Products und Prices, schickst den Kunden zu Stripe zum Zahlen und bringst ihn zurück. Dann die Webhooks: Stripe sagt deinem Backend, wenn eine Zahlung erfolgreich ist, eine Subscription erneuert oder eine Karte fehlschlägt, und dein Code aktualisiert den User-Datensatz entsprechend. Die Falle, in die Einsteiger tappen, ist, den Redirect als Source of Truth zu behandeln; der Webhook ist es. Geh immer sicher mit Secrets um und halte deine Stripe-Keys aus dem Frontend-Code und aus Git heraus. Der Modern App Stack Kurs behandelt Stripe in zwei Lektionen: Checkout und Subscriptions, dann Webhooks, Proration und Coupons.
- Stripe übernimmt Checkout, Subscriptions und die Billing-Edge-Cases, die du nicht selbst bauen solltest.
- Webhooks, nicht der Redirect, sind die Source of Truth dafür, was ein Kunde bezahlt hat.
- Halte Stripe-Secret-Keys im Backend und aus der Versionskontrolle heraus.
- Course 3 Lektionen: Stripe Teil 1 (Checkout, Subscriptions) und Stripe Teil 2 (Webhooks, Proration, Coupons).
Schritt 5: liefere es aus
Die letzte Stufe ist die, die Einsteiger aufschieben und früh machen sollten: die App von deiner Maschine ins öffentliche Internet zu bringen, in Production, mit echten Keys. Das heisst, jeden Service (Auth, Datenbank, Payments) von seinem Entwicklungsmodus in Production zu bewegen, Umgebungsvariablen und Secrets korrekt zu behandeln, deine Domain aufzusetzen und die Seite bei der Search Console einzureichen, damit sie gefunden werden kann. Ausliefern ist kein einmaliges Ereignis am Ende; es ist ein Loop, den du vom leeren Scaffold an laufen lassen solltest, damit der Livegang langweilig statt furchteinflössend ist. Der Modern App Stack Kurs schliesst mit genau dem: der Dev-zu-Production-Migration, Search Console und Performance. Sobald es live ist, steuerst du den Agent, um Features genauso hinzuzufügen, wie du das Skelett gebaut hast, und verifizierst jede Änderung, bevor sie ausgeliefert wird.
- Bewege Auth, Datenbank und Payments vom Entwicklungs- in den Production-Modus mit echten Keys.
- Behandle Secrets und Umgebungsvariablen korrekt; committe nie Keys.
- Setze deine Domain auf und reiche die Seite bei der Search Console ein, damit sie gefunden wird.
- Course 3 Lektion: Livegang, die Dev-zu-Prod-Migration, Search Console und Performance.
Steuere den Agent, vibe ihn nicht nur
Ein SaaS mit KI zu bauen ist der klarste Fall für Agentic Engineering statt Vibe Coding. Ein Wochenend-Prototyp kann gevibet werden, aber ein Produkt mit echten Usern, ihren Daten und ihrem Geld kann es nicht: Ein stiller Bug in deinem Stripe-Webhook oder eine ungeschützte Convex-Query ist die Art Fehler, die Vertrauen oder Geld kostet. Also steuerst du den Agent und verifizierst seine Arbeit: plane, bevor er editiert, lies die Diffs bei allem, was Auth, Daten oder Payments berührt, und halte ein Quality Gate (Lint, Types, Tests) grün. Dieselben Agenten, die einen fragilen Haufen produzieren, wenn du alles ungeprüft annimmst, produzieren ein wartbares SaaS, wenn du der Engineer of Record bleibst. Echte Produkte werden so gebaut; der CallAssistant-Build ist ein funktionierendes SaaS, ausgeliefert auf genau dieser Disziplin, und der Pillar Was ist Agentic Engineering erklärt die Denkweise vollständig.
- Vibe einen Prototyp; steuere und verifiziere alles mit echten Usern, Daten oder Payments.
- Plane vor dem Editieren und lies jeden Diff, der Auth, Daten oder Geld berührt.
- Halte ein Quality Gate grün, damit keine Regression in Production rutschen kann.
- Siehe den CallAssistant-Build für ein ausgeliefertes SaaS und den Pillar Was ist Agentic Engineering für die Disziplin.
Schritt für Schritt
Das Projekt scaffolden
Enge die Idee auf einen Kern-Job ein, dann lass deinen Coding-Agent Framework, Git und einen Dev-Server aufsetzen. Füge eine CLAUDE.md mit deinem Stack und deinen Konventionen hinzu und bring eine leere App lokal zum Laufen.
Authentifizierung hinzufügen
Verdrahte einen Auth-Provider (Clerk per Default) für Signup, Login und OAuth und schütze die Routes und Daten, die einen eingeloggten User brauchen. Bau Login nie von Grund auf.
Deine Daten modellieren
Definiere dein Schema und schreib Lese- und Schreibfunktionen in einer reaktiven Datenbank wie Convex, sodass das Frontend live Ergebnisse abonniert. Entwirf die Datenform vor der UI.
Payments hinzufügen
Setze Stripe-Products und -Prices auf, füge Checkout und Subscriptions hinzu und behandle Webhooks als Source of Truth dafür, was ein Kunde bezahlt hat. Halte Secret-Keys im Backend.
In Production ausliefern
Bewege Auth, Datenbank und Payments in den Production-Modus mit echten Keys, behandle Secrets korrekt, verbinde deine Domain und reiche die Seite bei der Search Console ein.
Iteriere, indem du den Agent steuerst
Füge Features so hinzu, wie du das Skelett gebaut hast: plane vor dem Editieren, lies die Diffs bei allem, was Auth, Daten oder Payments berührt, und halte dein Quality Gate vor jedem Ausliefern grün.