[FE-41] Member onboarding wizard (profile completion flow)

[yusuftomilola]

Overview

New members land on the dashboard with no guidance. An onboarding wizard walks them through key setup steps (profile photo, bio, phone verification) immediately after registration, improving profile completeness and member engagement.

Context

• frontend/app/dashboard/page.tsx — show wizard here on first visit
• frontend/app/settings/page.tsx — existing profile settings (for context on available fields)
• frontend/lib/store/authStore.ts — for checking if this is a first login
• Depends on BE-52 for GET /onboarding/status

Tasks

• Create frontend/components/onboarding/OnboardingWizard.tsx — modal overlay with 4 steps:
  • Step 1 — Profile Photo: Cloudinary upload widget; skip option
  • Step 2 — About You: firstName/lastName confirm, short bio textarea (max 200 chars), interest tags multi-select (e.g. Tech, Design, Finance, Health, Education — predefined list)
  • Step 3 — Phone Number: phone input + OTP verification (calls existing auth phone endpoints)
  • Step 4 — Done: summary of completion %, link to notification preferences
  • Progress bar across top of modal; "Skip this step" on each step; "Complete Later" closes modal entirely
• Mount OnboardingWizard in frontend/app/dashboard/page.tsx — show only when GET /onboarding/status returns completionPercent < 100 AND localStorage.getItem('onboarding_dismissed') is not set
• Add a "Complete your profile" card to the dashboard sidebar or summary area:
  • Circular progress ring showing completionPercent
  • "Continue Setup" button re-opens the wizard
  • Hidden once completionPercent === 100

Files to Modify / Create

• New: frontend/components/onboarding/OnboardingWizard.tsx
• New: frontend/lib/react-query/hooks/users/useOnboardingStatus.ts
• frontend/app/dashboard/page.tsx

[OluwapelumiElisha]

Hello,

I would like to work on this issue.

[wadexybiodun]

Hi admin, can you please kindly assign this task to me. I'll like to work on this.
Thank you