Issue #18: Student Dashboard & Profile (Post-Registration/Login)

[ManuelJG1999]

Issue #18: Student Dashboard & Profile (Post-Registration/Login)

Task Description

Build the student Dashboard and Profile experience that users access after they have already registered and logged in. Authentication (login/register) is out of scope and considered complete.

From the Dashboard, learners can:

• Access course areas, lessons, and assessments.
• See key metrics (points, streak, completion).
• Continue where they left off.
• Navigate to Profile to manage account and learning preferences.

Deliverables

• Routes: /dashboard and /profile.
• Global header (logged-in state): avatar + user menu (Profile, Dashboard, Logout).
• Dashboard:
  • Course areas grid with progress, lock states, and CTA (“Continue”/“Start”).
  • KPI cards: total points, streak, overall completion % (and optional badges).
  • “Continue where you left off” deep link to next lesson.
  • Recent activity list (lessons/assessments) with result and timestamp.
  • Recommendations (areas to practice based on recent performance).
• Profile:
  • Editable fields: display name, avatar, current level, learning goal, timezone.
  • Pronunciation preferences (default voice URI, auto-match voice by gender).
  • Save/Cancel with validation and confirmation UI.

Functional Requirements

• Navigation
  • Authenticated users can open /dashboard and /profile.
  • Header avatar menu provides quick links to Profile, Dashboard, and Logout.
• Dashboard
  • “Continue where you left off” opens the next unlocked lesson across course areas.
  • Areas grid displays progress bar, % complete, and lock/unlock status (respect lesson gating).
  • KPIs read from existing progress/points state.
  • Recent activity shows the latest 5 items (lesson/assessment) with date and score/result.
  • Recommendations surface the weakest area (e.g., lowest average score in recent attempts).
• Profile
  • Edit and persist name, goal, level, avatar, timezone (MVP).
  • Manage pronunciation preferences for learning pages.
  • Validate required fields; show errors and success toasts/messages.
• States
  • Empty state (no progress yet) with helpful copy and CTA “Explore our courses”.
  • Loading/skeleton states for KPIs and lists.

Routes & Navigation

• /dashboard — main student home.
• /profile — profile and preferences.
• Header behavior in logged-in state:
  • Avatar dropdown: Profile, Dashboard, Logout.
  • If not logged in (out of scope here).

Dependencies & Integrations

(Progress Tracking): display progress bars and completion.
(Locked Lesson Progression): reflect lock/unlock status and enforce progression.
(Points & Rewards): show points and reward updates.
(There's an analytics section,

Data Model (MVP, Local Persistence)

Persist via localStorage for MVP; plan migration to a database in a future issue.

• User
  • id, email, name, avatarUrl?
  • level (Beginner/A1/A2)
  • goal (Travel/Work/Study/Conversation)
  • timezone?
  • preferences: { defaultVoiceUri?: string; autoVoiceByGender?: boolean }
• Progress
  • Per area/lesson: { areaId, lessonId, completed: boolean, score?: number, lastAttemptAt: ISO }
  • Area summary: { areaId, percentComplete, lastLessonId? }
• Gamification
  • { pointsTotal: number, streakCount: number, lastActiveAt: ISO, badges?: string[] }
• Activity
  • [ { id, type: 'lesson'|'assessment', areaId, title, score?: number, date: ISO } ]

Metrics to Display

• Total points, streak, overall completion %.
• Per-area progress (% and next lesson).
• Recent activity (last 5 items).
• Recommendations based on weakest recent performance.

Accessibility

• Semantic layout: main landmarks, headings.
• Forms with labels, error descriptions, and proper focus management.
• Keyboard navigation for cards and menu.
• Contrast and visible focus states.
• Avatar images with alt text; icons marked aria-hidden when appropriate.

UI/UX Notes

• Consistent AURORA card styles and spacing.
• Skeleton loaders for KPIs and lists.
• Clear CTAs: “Continue” on active area, “Start” on new areas.
• Tooltip/helper text for lock explanations.

Acceptance Criteria

• Users can open /dashboard and see points, streak, and per-area progress.
• “Continue where you left off” navigates to the correct next unlocked lesson.
• Recent activity and recommendations render from stored data.
• Users can edit Profile fields and pronunciation preferences on /profile and see changes persisted after reload.
• Empty state appears for new users with a CTA to explore courses.

Definition of Done

• /dashboard implemented with KPIs, areas grid, recent activity, recommendations.
• /profile implemented with editable fields and pronunciation preferences.
• Local persistence wired; updates reflect immediately without reload.
• Lock logic respected in “Continue” links (Issue #22).
• Metrics correctly reflect Issue Enhancement-Starkla-update-style #19 and points from Issue feat: create the details for the learning module #23.
• Accessible forms and navigation verified (labels, focus, keyboard).
• Loading/skeleton and empty states implemented.
• QA plan executed successfully across mobile/desktop.

Image reference:

[davedumto]

Hi, my name is David, and I am a frontend developer skilled in React, Next.js, TypeScript, and Tailwind CSS. For this task, I will:

• Build a progress dashboard showing course completion across all 4 learning areas.
• Add lesson-level checkmarks, progress bars, and overall completion percentage.
• Implement a daily streak tracker and basic achievement badge system.
• Track and display user scores (percentage correct) per lesson.
• Ensure data persistence and responsiveness across devices.

ETA: 8 hours

Recommended by OnlyDust for high-quality and dependable contributions.

[maryojo]

Hi @ManuelJG1999, i'm interested in working on this and I would like to be assigned this.

I’m a frontend engineer and UX designer with experience building responsive, accessible web apps using JavaScript, React, Next.js, TailwindCSS, and modern state management (Redux Toolkit, React Query). I can take ownership of implementing the Dashboard and Profile pages along with their respective UI and functionality as described. I would also ensure that the layout is responsive, and there's proper state handling.

Thank you

[ManuelJG1999]

@maryojo

Thank you for applying to contribute to Aurora! 🌟
We truly appreciate your interest in helping us build a purpose-driven learning platform.

Whether you're joining us for the first time or returning to contribute again, we're excited to have you on board.

Let’s build something meaningful together.
Welcome to Aurora! 💫

👉 Join our Telegram community, if you haven't: https://t.me/+kU23GZ7H1bhmY2Yx

[maryojo]

Thank you! @ManuelJG1999
Excited to contribute to Aurora and build such a meaningful learning platform. I’ll join the Telegram community, looking forward to collaborating and building!

[ChrisFernandezVivas]

hi, any update?

[maryojo]

Hi @ChrisFernandezVivas, I'm still working on it, I would make a PR by the end of this week

[maryojo]

H @ManuelJG1999 is there a design reference for the profile page too?