feat: learner onboarding profile form after wallet connection

[EmeditWeb]

Problem

After connecting their Stellar wallet, learners land directly on the home dashboard with no profile setup. There is no onboarding form to collect their name, bio, skills, goals, or background. This makes the experience feel cold and prevents personalized loan decisions.

Context

Similar to Upwork's onboarding flow — after signup you complete a detailed profile that matches you to relevant opportunities. StepFi needs the same: after wallet connection, learners complete a multi-step profile form before reaching the dashboard. This data is sent to POST /api/v1/learners/profile and used for credit scoring and vendor matching.

Before Starting

Read these context files first:

• context/architecture-context.md
• context/code-standards.md
• context/ui-context.md
• context/progress-tracker.md
• services/auth.service.ts
• stores/user.store.ts

What To Build

Multi-step onboarding form — 4 screens sliding left to right
after wallet connection, before reaching the home dashboard.

Screen 1 — Personal Info

Title: 'Tell us about yourself'
Fields:

• Full name (text input, required)
• Bio (multiline text, optional, max 500 chars,
  placeholder: 'I am a frontend developer learning
  Stellar blockchain...')
• Country (dropdown/picker, required)
• City (text input, optional)

Screen 2 — Your Background

Title: 'Your background'
Fields:

• Current role (single select pills):
  Student · Intern · Early-career Dev ·
  Freelancer · Employed
• Institution/School (text input, optional)
• Program/Course (text input, optional)
• Expected graduation year (number picker, optional)
• Monthly income range (single select pills):
  No Income · Under $200 · $200-$500 ·
  $500-$1000 · Above $1000

Screen 3 — Your Skills & Goals

Title: 'Skills & what you want to finance'
Fields:

• Skills (multi-select chips, max 15):
  JavaScript · TypeScript · Rust · Python · Go ·
  React · React Native · NestJS · Solidity · Soroban ·
  Design · DevOps · Testing · Technical Writing · Other
• What do you want to finance? (multi-select chips, min 1):
  Laptop · Course · Bootcamp · Dev Tools ·
  Subscriptions · Books · Other

Screen 4 — Online Presence (optional)

Title: 'Your online presence'
Subtitle: 'Optional — helps build trust with sponsors'
Fields:

• GitHub profile URL (text input with GitHub icon)
• LinkedIn URL (text input with LinkedIn icon)
  Both optional, validate URL format

CTA on last screen: 'Complete Profile →'
→ Calls PATCH /api/v1/learners/profile
→ On success → navigate to home dashboard

Navigation & UX Rules

• Progress bar at top showing step 1/4, 2/4, 3/4, 4/4
• Back button on steps 2-4
• 'Skip for now' link on Screen 4 only (optional screen)
• Cannot go to dashboard until Screen 3 is completed
• All screens use FlatList with pagingEnabled for smooth sliding
• Keyboard aware scroll on text input screens

Files To Touch

• app/(auth)/onboarding.tsx (new — multi-step form)
• app/_layout.tsx (add onboarding to auth flow)
• services/learners.service.ts (update profile call)
• stores/user.store.ts (add onboardingComplete flag)
• hooks/useOnboarding.ts (new)
• components/onboarding/ (new folder for step components)

Acceptance Criteria

• 4 screens slide smoothly left to right
• Progress bar updates on each step
• Required fields validated before proceeding
• Skills chips max 15 enforced with visual feedback
• Finance goals min 1 enforced
• URL validation on GitHub and LinkedIn fields
• Profile saved to API on completion
• User redirected to dashboard after completion
• Skip works on Screen 4 without saving optional fields
• No hardcoded hex colors — constants/colors.ts only
• All icons from Lucide React Native only

Mandatory Checks Before PR

• No hardcoded hex colors — use constants/colors.ts only
• No API calls in screen files — use services/ only
• Loading, error, AND empty states handled
• Lucide React Native for ALL icons
• npx expo export --platform web passes
• context/progress-tracker.md updated

[Adeyemi-cmd]

I would love to work on this

[Iwayemi-Kehinde]

I would like to work on this issue as I have reviewed the scope, I should have a PR Ready in 50 minutes.

[grantfox-oss]

🦊 GrantFox — @Iwayemi-Kehinde has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #11)
2. Your PR will be reviewed by the StepFi-app maintainers

Good luck! Track your progress on GrantFox.