Kurzfassung
Ein echtes Produkt ist mehr als eine Website. Es braucht Nutzer, die sich einloggen können, Daten, die bestehen und sich aktualisieren, und einen Weg, Zahlungen entgegenzunehmen. Die gute Nachricht ist, dass du diese harten Teile nicht mehr von Grund auf baust: dedizierte Dienste handhaben jeden davon sicher. Dieser Leitfaden gibt dir die Landkarte - wie die Teile zusammenpassen, welcher Dienst was tut und in welcher Reihenfolge du sie zusammensetzt - damit du ein produktives SaaS baust, ohne die gefährlichen Teile neu zu erfinden.
Wie die Teile zusammenpassen
Eine moderne App teilt sich in eine schnelle, indexierbare Marketing-Oberfläche und die interaktive App hinter dem Login. Ein Framework wie Next.js, Astro oder TanStack liefert Struktur, Routing und Rendering. Darauf ergänzt du drei Dienste: Authentifizierung, eine Datenbank und Payments. Marketing- und App-Oberfläche sauber zu trennen lässt jede für ihren Zweck optimieren, was sowohl Performance als auch SEO hilft.
Authentifizierung mit Clerk
Passwörter zu speichern, Sessions zu verwalten und Angriffen korrekt zu widerstehen ist ein tiefes Spezialgebiet, also solltest du es nicht selbst basteln. Clerk handhabt Sign-up, Login, Sessions und Social Login wie Google OAuth, was eine ganze Kategorie an Sicherheitsrisiko entfernt. Du integrierst seine Komponenten und lässt es die Identität verwalten, während deine App alles andere verwaltet. Der Wechsel von Entwicklung zu Produktion ist ein sorgfältiger Key-Tausch, kein Neubau.
Reaktive Daten mit Convex
Convex speichert deine Daten und führt deine Backend-Logik als TypeScript-Funktionen aus. Du deklarierst ein Schema, liest mit Queries und änderst mit Mutations, und die UI aktualisiert sich automatisch, wenn sich etwas ändert, von dem sie abhängt. Starke Typisierung fliesst aus der Datenbank in deine Komponenten und entfernt eine ganze Klasse von Bugs. Für echte Produkte bevorzuge Soft Deletes, die eine Zeile als gelöscht markieren, sie aber behalten, sodass Daten wiederherstellbar bleiben und die Historie intakt bleibt.
Payments mit Stripe
Stripe ist der Standard, um Zahlungen entgegenzunehmen, und es heisst, dass du nie rohe Kartendaten anfasst. Checkout hostet eine sichere Zahlungsseite, Subscriptions handhaben wiederkehrende Umsätze, und Webhooks sagen deiner App, was passiert ist, damit sie mit der Abrechnungsrealität synchron bleibt. Eine strikte Trennung von Test- und Produktions-Keys lässt dich alles bauen und prüfen, ohne echtes Geld zu bewegen. Die harten Details - Proration, Gutscheine und Embedded Checkout - bauen auf diesem Fundament auf.
Secrets halten alles zusammen
Jeder Dienst, den du ergänzt, kommt mit geheimen Keys, und einen zu leaken kann katastrophal sein. Halt sie aus dem Code heraus in env-Dateien, die immer gitignored sind, nutze getrennte Keys für Entwicklung und Produktion, damit ein Fehler in Dev keine Live-Daten berühren kann, und verschlüssele sensible Daten im Ruhezustand. Diese Disziplin ist das Bindegewebe des ganzen Stacks, und sie muss mit jeder neuen Integration mitwachsen.
Live gehen
Launch heisst, jeden Dienst von Entwicklungs- auf Produktions-Keys und -Daten umzustellen, einen nach dem anderen, und jeden zu prüfen, bevor der nächste kommt. Mach dann das Live-Produkt auffindbar, indem du dich bei der Search Console registrierst und eine Sitemap einreichst, und schnell, indem du Core Web Vitals als Teil des Launches behandelst. Eine sorgfältige Reihenfolge verhindert das klassische Launch-Tag-Versagen, bei dem ein vergessener Key Logins oder Abrechnung lahmlegt.
Häufige Fragen
Passende Lektionen & Ressourcen
Eine klare mentale Karte von Frontend, Backend und Datenbank bauen, den Marketing-versus-App-Split verstehen und wissen, wann sich ein Monorepo lohnt
Echte Authentifizierung mit Clerk ergänzen, Google OAuth verdrahten und von einer Dev-Instanz zu einer Produktions-Instanz auf deiner eigenen Domain bringen
Daten in Convex mit durchgängiger Typsicherheit und Live-Updates modellieren und abfragen und Indexes und Soft Deletes nutzen, wie es echte Produkte tun
Clerk Auth-Leitfaden: ein praktischer, wiederverwendbarer Baustein, um echte KI-Workflows in deinem Business zu shippen.
Convex Backend-Leitfaden: ein praktischer, wiederverwendbarer Baustein, um echte KI-Workflows in deinem Business zu shippen.