Build User Profile and Settings Pages — Avatar Upload, Stats, Editable Preferences

[portableDD]

Labels

Frontend

Description

ByteChain Academy has no user profile or settings page. The account dropdown links to /profile and /settings but both routes return 404. Users have no way to view their own profile, update their display name, upload a profile photo, or manage notification preferences. The user-context.tsx has mock defaults for all these values. This issue builds both the profile page and settings page, wired to the backend user profile endpoints from Issue 14.

Background & Context

• frontend/app/profile/ and frontend/app/settings/ directories have no page.tsx files
• frontend/contexts/user-context.tsx exposes user, stats, updateProfile, updateNotificationPreferences — these need to call real backend endpoints
• Backend endpoints (Issue 14): GET /api/v1/users/me, PATCH /api/v1/users/me, POST /api/v1/users/me/avatar, GET /api/v1/users/me/stats
• The MyCertificatesPage component exists as a standalone file (frontend/components/MyCertificatesPage/page.tsx) but is not mounted at any route — it should be integrated into the profile page as a tab

Requirements

• Create frontend/app/profile/page.tsx — user profile page with:
  • Avatar display with upload button (click to upload, preview before save, calls POST /api/v1/users/me/avatar)
  • Username and email display
  • Stats summary: XP, streak, badges count, certificates count, courses completed
  • Tabs: "My Certificates", "My Badges", "Activity" — with the existing MyCertificatesPage content integrated into the certificates tab
  • Wired to GET /api/v1/users/me and GET /api/v1/users/me/stats
• Create frontend/app/settings/page.tsx — settings page with:
  • Edit username form (calls PATCH /api/v1/users/me)
  • Edit bio textarea
  • Notification preferences toggles (course updates, new lessons, achievement alerts) — persisted to backend
  • Danger zone: logout button and account info
• Update user-context.tsx to remove hardcoded mock defaults and fetch from real API

Suggested Execution

Branch: git checkout -b feat/profile-and-settings-pages

Files to create:

• frontend/app/profile/page.tsx
• frontend/app/settings/page.tsx
• frontend/components/profile/avatar-upload.tsx
• frontend/components/profile/stats-summary.tsx
• frontend/components/profile/profile-tabs.tsx

Files to update:

• frontend/contexts/user-context.tsx
• frontend/components/MyCertificatesPage/page.tsx (refactor into a component)

Implement:

• Profile page: fetch user and stats via useQuery, display in structured layout
• AvatarUpload — file input triggered by clicking avatar, preview with URL.createObjectURL, upload on confirm, invalidate user query on success
• StatsSummary — card grid showing XP, streak flame, badge count, cert count
• ProfileTabs — three tabs using simple state toggle, render appropriate content per tab
• Settings page: controlled form for username and bio, useMutation for save, success toast on update
• Notification toggles: read from and write to PATCH /api/v1/users/me
• Remove defaultStats hardcoded values from user-context.tsx

Test & Validate:

• /profile loads with real user data from the backend
• Uploading an avatar updates the display immediately after save
• /settings form pre-fills with current username and bio
• Saving settings shows a success toast and reflects changes on the profile page
• Notification toggles persist across page refreshes

Acceptance Criteria

• /profile page loads with real data from GET /api/v1/users/me and GET /api/v1/users/me/stats
• Avatar upload works and updates the user profile
• Profile tabs show certificates, badges, and activity sections
• /settings pre-fills with current user data
• Username and bio update via PATCH /api/v1/users/me
• Notification preferences are persisted to the backend
• No hardcoded mock stats remain in user-context.tsx

Example Commit Message

feat: build user profile page with stats and tabs, and settings page with editable preferences

Guidelines

• Assignment required before starting
• PR description must include Closes #[issue_id]
• Join our Telegram: https://t.me/ByteChainAcademy
• Complexity: High (200 pts)