patterntypescriptnextjsMajor
Multi-step onboarding wizard with FastAPI + Next.js
Viewed 0 times
onboarding flowmulti-step formuser preferencesgenre selectionnotification preferencesuser setup
browsernodejs
Problem
Building a multi-step onboarding flow that collects user preferences (artist follows, genres, notification settings) after OAuth signup. Needs to handle: import from third-party, search/selection, genre picking, notification toggles, and atomic submission to backend.
Solution
Use a single backend endpoint that atomically processes all onboarding data (follows, genre preferences, notification preferences, onboarding completion flag). Frontend uses a simple step counter state rather than URL-based routing to avoid back-button edge cases. Key patterns: 1) Add has_completed_onboarding boolean + genre_preferences JSON column to User model. 2) Create OnboardingRequest schema with selected_ids, genre_preferences, notification_preferences. 3) Single POST endpoint that creates follows, sets genres, upserts NotificationPreference, and marks onboarding complete. 4) Frontend: 4-step wizard with animated transitions, progress bar, debounced search, and pre-selected imported items. 5) Redirect new users from OAuth callback to /onboarding based on is_new_user flag from auth response.
Why
Single-endpoint atomic submission prevents partial onboarding states in the database. Step counter state is simpler than route-based wizards for linear flows.
Gotchas
- Debounce search input to avoid excessive API calls during artist search
- Pre-select imported artists so users opt-out rather than opt-in (better UX)
- Use useRef to prevent double execution in React Strict Mode on OAuth callback pages
- Mark onboarding complete atomically with other data to prevent partial states
Context
After OAuth signup when user needs to complete profile setup
Revisions (0)
No revisions yet.