68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
# 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
|
||
- `/onboarding` wizard
|
||
- `/settings` settings 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
|