Tutorials
Fortgeschritten
Das werden Sie lernen
- Komplexe App-Anforderungen
- Multi-Tenant-Architektur
- Abonnement & Abrechnung
- Funktionen zur Teamzusammenarbeit
- Analyse-Dashboard
- Cloudflare-Deployment
Eine SaaS-Webanwendung erstellen
Erstellen Sie ein produktionsreifes Multi-Tenant-SaaS in 30 Minuten
Bereit, etwas Komplexeres zu bauen? In diesem Tutorial erstellen Sie eine vollständige SaaS-Anwendung – ein Projektmanagement-Tool mit Teams, Abonnements und Analysen. Erleben Sie, wie Conductor plant und Virtuoso Ihre gesamte Anwendung in echten Docker-Containern erstellt.
Was wir bauen werden
Ein produktionsreifes Projektmanagement-SaaS mit: Team-Workspaces, rollenbasierten Berechtigungen, Stripe-Abonnements, Echtzeit-Zusammenarbeit, Analyse-Dashboard und Multi-Tenant-Datenisolierung – alles im globalen Edge bereitgestellt.
Voraussetzungen
- Das 'Erste Schritte'-Tutorial abgeschlossen
- Nxcode Pro-Konto ($20/mo) für komplexe Apps empfohlen
- Grundlegendes Verständnis von SaaS-Konzepten (optional)
Beschreibung einer komplexen Anwendung
Bei SaaS-Anwendungen führt die Angabe detaillierter Anforderungen an Conductor zu besseren Ergebnissen. So beschreiben Sie unser Projektmanagement-App-Projekt:
Erstelle eine SaaS-Projektmanagement-Anwendung:
Kernfunktionen:
- Team-Workspaces mit Einladungssystem
- Projekte mit Aufgaben, Unteraufgaben und Fristen
- Kanban-Board und Listenansichten
- Echtzeit-Updates, wenn Teammitglieder Änderungen vornehmen
- Dateianhänge und Kommentare
- Aktivitäts-Feed und Benachrichtigungen
Benutzer- & Teamverwaltung:
- Benutzerregistrierung mit E-Mail-Verifizierung
- Teamerstellung und Mitgliedereinladungen
- Rollenbasierter Zugriff: Owner, Admin, Member, Viewer
- Persönliche und Team-Workspaces
Abonnement-System:
- Kostenlose Stufe: 1 Projekt, 3 Teammitglieder
- Pro-Stufe ($10/mo): Unbegrenzte Projekte, 10 Mitglieder
- Business-Stufe ($25/mo): Alles unbegrenzt + Prioritäts-Support
- Stripe-Integration für die Abrechnung
Analysen:
- Verfolgung des Projektfortschritts
- Team-Produktivitätsmetriken
- Zeiterfassung pro Aufgabe
- Berichte als PDF/CSV exportieren
Design: Saubere, moderne Benutzeroberfläche mit Dark-Mode-UnterstützungWie Conductor komplexe Anforderungen handhabt
Für eine SaaS-Anwendung erstellt Conductor einen umfassenden Plan mit mehreren Phasen:
Phase 1: Fundament
- 1Next.js mit TypeScript einrichten
- 2Datenbankschema für Multi-Tenancy konfigurieren
- 3Authentifizierung mit JWT implementieren
- 4Datenisolierung für Workspaces/Teams erstellen
Phase 2: Kernfunktionen
- 1Projekt-CRUD mit Berechtigungen erstellen
- 2Aufgabenverwaltungssystem erstellen
- 3Kanban-Board-UI implementieren
- 4Echtzeit-Updates mit WebSocket hinzufügen
Phase 3: Zusammenarbeit
- 1Teameinladungen und Mitgliederverwaltung
- 2Kommentare und Aktivitäts-Feed
- 3Datei-Upload und Anhänge
- 4Benachrichtigungssystem
Phase 4: Monetarisierung
- 1Stripe-Integrations-Setup
- 2Abonnement-Verwaltung
- 3Durchsetzung von Nutzungslimits
- 4Abrechnungsportal
Phase 5: Analysen & Feinschliff
- 1Analyse-Dashboard
- 2Berichtserstellung
- 3Dark-Mode-Implementierung
- 4Cloudflare-Deployment-Konfiguration
Conductor
Ich plane Ihre SaaS-Projektmanagement-App. Ein paar Fragen: 1. Sollen bei Echtzeit-Updates alle Teammitglieder Änderungen sofort sehen oder nur bei Bedarf aktualisieren? 2. Dateispeicherlimit pro Stufe? 3. Sollte die kostenlose Stufe Zugriff auf Basisanalysen haben? 4. Gibt es spezifische Anforderungen an die Stripe-Webhook-Verarbeitung?
User
Echtzeit für alle. Kostenlose Stufe: 100MB, Pro: 5GB, Business: unbegrenzt. Basisanalysen für alle. Standard-Stripe-Webhooks sind in Ordnung.
Conductor
Verstanden! Ich habe 24 Aufgaben in 5 Phasen mit klaren Akzeptanzkriterien erstellt. Jede Aufgabe wird in Docker mit echten Builds und Tests ausgeführt. Dies ist ein größeres Projekt, daher wird die Ausführung etwa 15-20 Minuten dauern. Ich beginne jetzt!
Multi-Tenant-Architektur verstehen
Virtuoso wird eine ordnungsgemäße Multi-Tenant-Isolierung implementieren. Folgendes wird erstellt:
Workspace-Isolierung
Jedes Team erhält einen einzigartigen Workspace. Alle Abfragen sind so begrenzt, dass Datenlecks zwischen Mandanten verhindert werden.
Rollenbasierter Zugriff
Berechtigungen werden sowohl auf API- als auch auf UI-Ebene geprüft. Owner können alles tun, Viewer haben nur Lesezugriff.
Abonnement-Durchsetzung
Die Middleware prüft die Abonnement-Stufe, bevor Aktionen zugelassen werden. Nutzer der kostenlosen Stufe erhalten freundliche Upgrade-Hinweise.
Datenübertragbarkeit
Nutzer können ihre Daten jederzeit exportieren. Dies schafft Vertrauen und ist in vielen Regionen vorgeschrieben.
Komplexe Builds in Docker beobachten
Für eine SaaS-App führt Virtuoso viel mehr Build-Schritte aus:
Schema in isoliertem Container erstellt und migriert
Webhooks mit Stripe CLI in Docker getestet
Echtzeit-Funktionalität mit Mock-Clients getestet
Alle Rollen/Aktions-Kombinationen werden automatisch getestet
Grundlegende Performance-Tests stellen sicher, dass die App skaliert
Im Gegensatz zu einfachen Code-Generatoren führt Nxcode tatsächlich den Stripe-Testmodus aus, erstellt Mock-Teams und verifiziert, dass Echtzeit-Updates funktionieren. Wenn etwas fehlschlägt, repariert Virtuoso es automatisch.
Abonnement & Abrechnung
Virtuoso baut eine vollständige Stripe-Integration auf:
- Checkout-Flow mit Preisauswahl
- Kundenportal für Self-Service-Verwaltung
- Webhook-Verarbeitung für Abonnementänderungen
- Nutzungsmessung für die Abrechnung von Mehrverbrauch
- Rechnungserstellung und -verlauf
- Anteilige Berechnung für Upgrades während des Abrechnungszeitraums
Conductor fragt Stripe-Anforderungen im Voraus ab, da Abrechnungscode kritisch ist. Jeder Zahlungspfad wird in Docker getestet, bevor die Aufgabe als bestanden gilt.
Analyse-Dashboard
Ihr SaaS enthält ein integriertes Analyse-Dashboard:
Projektfortschritt
Abgeschlossene Aufgaben vs. Gesamtanzahl, Burndown-Charts
Team-Aktivität
Wer trägt bei, Aktivitäts-Heatmaps
Zeiterfassung
Zeitaufwand pro Aufgabe, Projektsummen
Abonnement-Metriken
MRR, Churn-Rate, Upgrade-Rate (für Admins)
Ihr SaaS bereitstellen
Ein-Klick-Deployment im globalen Edge von Cloudflare:
- Klicken Sie auf „Deploy“, wenn alle Aufgaben bestanden sind
- App wird für die Produktion erstellt (minifiziert, optimiert)
- Bereitstellung an über 300 Cloudflare-Edge-Standorten
- Erhalten Sie Ihre öffentliche URL mit automatischem HTTPS
Produktionsreife Funktionen
- Globales CDN für schnelle Ladezeiten überall
- Automatisches SSL-Zertifikat
- DDoS-Schutz inklusive
- Jederzeit eigene Domain verbinden
- Umgebungsvariablen für API-Keys
Monetarisieren mit der Creator Economy
Verwandeln Sie Ihr SaaS in wiederkehrende Einnahmen:
Veröffentlichen
Im Nxcode-Marktplatz mit Ihrer Preisgestaltung listen
Stufen festlegen
Kostenlose Testversion und kostenpflichtige Abonnementstufen konfigurieren
70 % verdienen
Behalten Sie 70 % aller Abonnementeinnahmen
Beispiel: 200 Nutzer in der Pro-Stufe für $10/mo = $1,400/mo passives Einkommen (nach 70 % Anteil)
Ihr SaaS wird mit integriertem Stripe geliefert – Nutzer zahlen über Ihr Stripe-Konto, Sie behalten 100 % abzüglich der Stripe-Gebühren. Oder nutzen Sie die Creator Economy für die verwaltete Abrechnung.
Was Sie gebaut haben
- Multi-Tenant-SaaS-Architektur
- Team-Workspaces mit rollenbasiertem Zugriff
- Stripe-Abonnement-Abrechnung
- Echtzeit-Kollaborationsfunktionen
- Analyse-Dashboard mit Berichten
- Produktions-Deployment im globalen Edge
Ihr SaaS wurde nicht aus Vorlagen zusammengestellt – jede Komponente wurde in echten Docker-Containern erstellt, getestet und verifiziert. Das ist Qualität auf Enterprise-Niveau ohne den Enterprise-Zeitaufwand.
Nächste Schritte
Bereit, Ihr SaaS zu bauen?
Beginnen Sie jetzt mit der Erstellung Ihrer produktionsreifen SaaS-Anwendung.