Onboarding

Overview

The onboarding module guides new users through a two-step setup process that determines their dashboard layout and initial platform experience.

Module path: src/lib/modules/onboarding/ Route: /onboarding

Onboarding Flow

Step 1: Goal Selection

Users select their primary purpose on the platform:

Goal	Dashboard Template	Description
Buyer	buyer_default	Discover, support, and purchase from creators
Seller	seller_default	Build a site and sell products/services
Refer and Earn	referral_default	Share Mindhyv and earn commissions
Project Management	pm_default	Organize and collaborate on projects

The selected goal determines which dashboard template is initialized.

Step 2: Profile Completion

Two-panel layout: form on the left, live preview on the right.

Required fields:

• Display Name
• Username (max 15 characters, unique)
• Location (country selector)
• Timezone
• Language
• Birth Date (must be 18+)

Optional fields:

• Avatar (with crop dialog)
• Profile Tagline (max 30 characters)
• About Me (max 500 characters)

Components

Component	File	Purpose
onboarding-goals.svelte	src/lib/components/onboarding/	Goal selection cards
onboarding-form.svelte	src/lib/components/onboarding/	Profile form with validation
onboarding-layout.svelte	src/lib/components/onboarding/	Two-column layout
onboarding-preview.svelte	src/lib/components/onboarding/	Live profile preview
avatar-crop-dialog.svelte	src/lib/components/onboarding/	Avatar cropping tool
avatar-with-crop.svelte	src/lib/components/onboarding/	Cropped avatar display
goal-card.svelte	src/lib/components/ongoals/	Reusable goal card

Validation Schema

File: src/lib/modules/onboarding/schemas/onboarding.ts

onboardingSchema = {
  displayName: string     // required, non-empty
  userName: string        // required, 1-15 chars
  location: string        // required
  timeZone: string        // required
  language: string        // required
  birthDate: Date         // required, 18+ years old
  photoURL?: string       // optional, image URL
  tagline?: string        // optional, max 30 chars
  aboutMe?: string        // optional, max 500 chars
  onboardingGoal?: string // optional, selected goal
  avatarCrop*?: number    // optional, crop parameters
}

On Submit

1. Username uniqueness validated
2. Data saved to Firestore: users/{uid} and profiles/{uid}
3. onboardingCompleted flag set to true
4. Dashboard created with template matching selected goal
5. User redirected to /

Guard Integration

The checkOnboardingCompleted() guard in the app layout ensures users who haven’t completed onboarding are redirected back to /onboarding.