1.5 KiB
1.5 KiB
Lovable App 3 — Onboarding + Settings Wizard (Micro-App)
Before you start: read and follow DESIGN_SYSTEM_BRIEF.md.
Goal
Build a best-in-class onboarding + settings wizard micro-app demonstrating premium UX patterns we can reuse across products.
Constraints
- Only modify files in this repository.
- No backend calls; localStorage only
- No
console.log - No hardcoded colors (CSS variables)
Experience requirements (high polish)
Onboarding flow
- Multi-step wizard (5–7 steps)
- Progress indicator + step labels
- Back/Next with validation
- Optional “Skip for now” with confirm dialog
- Autosave progress to localStorage
Steps to include (example)
- Profile basics (name, timezone)
- Preferences (theme, density)
- Notifications (toggles)
- Integrations (fake list, connect buttons)
- Privacy level selector
- Final review summary
Settings area
After onboarding completes, show a settings dashboard with:
- profile card
- preferences section
- notification settings
- danger zone (delete local profile) with confirm
UX/accessibility
- Great empty/error/validation states
- Keyboard accessible
- Mobile-first responsive
Routes
/start/resume onboarding/onboardingwizard/settingssettings dashboard
Deliverables
- Next.js 16 App Router
- Tailwind v4
- TypeScript strict
- Scripts:
dev,check,build(next build --webpack)
Success criteria
- Feels like a premium consumer app onboarding
- Components reusable in other products
- Safe and self-contained