Onboarding
Multi-step questionnaire flows that collect user information after signup. Clients complete 4 steps, trainers complete 5 steps. A first-time tour introduces the platform after onboarding completes.
Route Information
Route: /onboarding
File: src/routes/_authed/onboarding/index.tsx
Layout: Full-screen centered, no sidebar (_authed layout)
Max Width: max-w-lg (role picker) / max-w-2xl (step forms via OnboardingLayout)
Flow: No role → Role Picker → Role-specific steps → Dashboard
Role Selection
When no role is set in user metadata, a role picker is shown. Selection triggers useSetUserRole mutation then reloads onboarding for the chosen flow.
Welcome to My Trainer Connect
How will you be using the platform?
Step Progress Indicator
Visual step progress bar shown at the top of every onboarding step. Completed steps show a checkmark, the current step has a ring highlight, and future steps are muted.
Step 2 of 4 — Experience & Challenges
Client Onboarding (4 Steps)
Steps: Fitness Goals → Experience & Challenges → Training Preferences → Profile Completion. Step data persisted via useUpsertClientProfile on each transition.
What's your #1 goal?
Select your primary goal. You can add secondary goals below.
Your fitness background
Help us understand where you are in your fitness journey
We'll prioritize trainers with injury rehab experience and tailor program recommendations to your needs.
How do you want to train?
Tell us about your training style and availability
Almost done!
A few more details to personalize your experience
Body Metrics
Trainer Onboarding (5 Steps)
Steps: Profile → Credentials → Intro Video → Services & Pricing → Review & Complete. Data persisted via useUpsertTrainerProfile.
Tell us about yourself
Set up your trainer profile so clients can find you
A short tagline that appears on your profile card
Your Credentials
Add your certifications and degrees to build trust with clients
NASM-CPT
National Academy of Sports Medicine · 2020
ACE-CPT
American Council on Exercise · 2018
B.S. Exercise Science
University of Florida · 2019
Introduce yourself
Record or link a short video introducing yourself to potential clients
Video preview will appear here
Services & Pricing
Set your rates and the services you offer
per session
per session
per month
Review Your Profile
Make sure everything looks good before completing your profile
Profile
Credentials
Intro Video
Not provided
Services & Pricing
First-Time Tour
After onboarding completes and the user lands on the dashboard for the first time, a guided tour introduces key platform areas. The tour uses a spotlight overlay with tooltip cards. This feature is not yet built — these are design specs.
Welcome to My Trainer Connect!
Let's take a quick tour to help you get the most out of the platform.
3
Active Programs
2
Upcoming Sessions
5
Unread Messages
12
Day Streak
Your Dashboard
Track your active programs, upcoming sessions, messages, and workout streak at a glance.
Explore
Find your perfect trainer or program using our smart matching system. Browse curated collections, trending programs, and top trainers.
Programs
Client: Browse and enroll in programs from the marketplace, or view programs assigned by your trainer.
Trainer: Build, manage, and publish workout programs. Sell them on the marketplace.
AI Coach
Get instant workout tips, nutrition advice, and program recommendations from our AI coach. It can also help you find the perfect trainer match.
[Step Title]
[Description text explaining the feature and its purpose]
Arrow direction and position adapts to the target element location
Onboarding Footer
A sticky footer bar fixed to the bottom of the viewport during onboarding steps. Uses a glass-effect with backdrop blur.
Component Inventory
| Component | Source | Usage |
|---|---|---|
| OnboardingLayout | @/components/onboarding/onboarding-layout | Step indicator, back/next, layout wrapper, progress tracking |
| Logo | @/components/app/logo | Role picker header branding |
| Button | @/components/ui/button | Continue, Back, Complete Profile navigation |
| Input / Select / Textarea | @/components/ui/* | Form fields across all steps |
| TagsInput | @/components/ui/tags-input | Specialties, goals, focus areas, obstacles multi-select |
| DatePicker | @/components/ui/date-picker | Date of birth in client profile completion |
| Slider | @/components/ui/slider | Weekly frequency selector in training preferences |
| Geo Hooks | @/api/geo/hooks | Country/State/City dropdowns, timezone auto-detect |
| motion | motion/react | Role card press animation, step transitions, chip toggles |
| TourOverlay | @/components/tour/tour-overlay | First-time tour spotlight + tooltip (not yet built) |
| TourTooltip | @/components/tour/tour-tooltip | Step card with title, description, dots, navigation (not yet built) |
Data Requirements
Queries (Loader)
trainerProfileQueryOptionsorclientProfileQueryOptions(based on role)geoLocationQueryOptions(auto-detect country/city)lookupValuesQueryOptions(goals, specialties, obstacles, add-ons)
Mutations
useSetUserRole()— sets role in user_metadatauseUpsertClientProfile()— saves step data + onboarding_stepuseUpsertTrainerProfile()— saves trainer step data
Responsive Behavior
Desktop (1024px+)
- Centered content at
max-w-2xl - Step indicator shows labels next to numbers
- Role picker shows 2-column grid
- Goal cards in 4-column grid
- Pricing fields in 3-column grid
- Tour tooltip positioned adjacent to spotlighted element
Tablet (768px)
- Same centered layout, step labels visible
- Goal cards collapse to 2-column grid
- Some form grids collapse to single column
- Tour tooltip may reposition below/above target
Mobile (<640px)
- Step indicator shows numbers only (labels hidden via
hidden sm:inline) - Role picker stacks to single column
- All form grids stack to single column
- Full-width buttons
- Sticky footer spans full width
- Tour tooltip shows as bottom sheet or centered modal