Onboarding-Ablauf

Bevor Sie beginnen

Öffnen Sie Ihr heruntergeladenes Supastack-Projekt in Visual Studio Code über Datei → Ordner öffnen und wählen Sie dann Terminal → Neues Terminal. Das Repository-Stammverzeichnis ist der Ordner, der package.json, Apps und Pakete enthält. Führen Sie dort den Befehl unten aus und lassen Sie das Terminal geöffnet. Wenn ein Befehl nicht erkannt wird, lesen Sie die Installationsanleitung für das Tool durch, bevor Sie fortfahren.

Lesen Sie zuerst das Plattform-Tutorial. Ein Server ist der App-Prozess, der Browser- oder Telefonanfragen beantwortet. Web liest apps/web-tanstack/.env.local, Expo liest apps/mobile/.env.local und Datenbankmigrationsbefehle lesen root .env. Die Demonstration ohne Datenbank /Dashboard ist getrennt von echten /Auth-Konten, die migriert werden müssen Postgres. Für eine reine Telefon- oder Desktop-Kaufabwicklung ist ein separat ausgeführtes Web-Backend erforderlich.

• Installieren Sie die Tools und erhalten Sie den Code
• Befehle, Dateien und Konfiguration lernen
• Schließen Sie das Web-Tutorial zur ersten Ausführung ab

corepack pnpm --filter @supastack/web-tanstack dev

Einrichtung und Konfiguration

Nach der Registrierung führen Onboarding-Gates den Nutzer durch die Workspace-Einrichtung, bevor Produktarbeit beginnt: /onboarding, /new-organization, /select-organization und /choose-plan. Das organization-onboarding-Modul entscheidet aus dem aktuellen Mitgliedsstatus, welcher Schritt ansteht.

Der Ablauf ist fortsetzbar — jedes Gate leitet den korrekten Schritt serverseitig neu ab, sodass ein Nutzer, der mittendrin abbricht, bei der Rückkehr auf dem richtigen Screen landet.

/onboarding            entry gate
/new-organization     create a team workspace
/select-organization  pick an existing one
/choose-plan          plan selection before billing
/invite/[token]       invited members join here

Implementierungsablauf

Behandle jeden Schritt als Gate, nicht als Wizard-Seite — der Server evaluiert den Zustand und leitet zum nächsten nötigen Schritt weiter. Eingeladene Mitglieder überspringen das Erstellen und landen auf accept-invite.

Wenn du ein Produkt-Gate hinzufügst — ein Pflichtfeld im Profil, eine AGB-Bestätigung — erweitere die Onboarding-Evaluierung, statt Redirects über Layouts zu verstreuen.

Überprüfung und Fehlerbehebung

Teste einen frischen Account durch jeden Schritt, einen Nutzer mitten im Flow, ein eingeladenes Mitglied und ein Mitglied mehrerer Organisationen. Verifiziere, dass kein Schritt die App-Shell rendert, bevor sein Gate bestanden ist.