User Onboarding

The onboarding process guides new users through setting up their account in three main steps: profile setup, workspace creation, and team collaboration.

Onboarding Flow

The onboarding process follows this sequence:

  1. User signs in
  2. Profile setup
  3. Workspace creation
  4. Team collaboration

Implementation Details

Onboarding Status Tracking

The system tracks onboarding progress using two main fields in the user settings:

{
  onboardingStatus: "pending" | "completed"
  onboardingStep: "profile" | "workspace" | "collaborate"
}

Flow Control

The onboarding flow includes automatic redirects based on the user's progress:

  • Users must be authenticated to access onboarding
  • Completed users are redirected to the main application
  • Users are directed to their last incomplete step

Onboarding Steps

1. Profile Setup

Initial user profile configuration

2. Workspace Setup

Creating and configuring workspace settings

3. Team Collaboration

Inviting team members and setting up permissions

Route Structure

app/
  onboarding/
    (index)/
      page.tsx      # Main onboarding controller
    profile/        # Step 1: Profile setup
    workspace/      # Step 2: Workspace setup
    collaborate/    # Step 3: Team collaboration

Usage Example

To check the user's onboarding status:

const [settings] = await db
  .select({
    onboardingStatus: userSettings.onboardingStatus,
    onboardingStep: userSettings.onboardingStep,
  })
  .from(userSettings)
  .where(eq(userSettings.userId, user.id))
  .limit(1)