Student Experience

The student experience covers 18 screens for the complete learning journey. All pages share a common layout with AppHeader (search, notifications, user menu) and AppSidebar (navigation).

Dashboard

Route: /dashboard

The student dashboard features:

• Welcome banner — personalized greeting with learning streak
• Stats cards — courses enrolled, hours learned, certificates earned, current streak
• Activity chart — weekly learning activity (Recharts)
• Continue learning — in-progress courses with progress bars
• Recommended courses — AI-suggested courses based on interests
• Recent achievements — latest badges earned
• Upcoming deadlines — assignments and quiz due dates

Course Catalog

Route: /courses

A responsive course grid with filtering:

• Filters — category, level, price range, rating
• Sort — popular, newest, highest rated, price
• Course cards — thumbnail, title, instructor, rating, price, student count

Course Detail

Route: /courses/[slug]

Comprehensive course information with tabs:

• Overview — description, what you'll learn, requirements, target audience
• Curriculum — accordion-style module/lesson list with completion status
• Reviews — student reviews with star ratings
• Instructor — instructor bio, stats, and other courses

Sidebar includes pricing, enrollment button, wishlist/share toggles, and course includes.

Lesson Player

Route: /lessons/[id]

Video lesson player with:

• Video area — embedded video player with playback controls
• Sidebar navigation — module structure with lesson list and completion checkmarks
• Bookmark and like — toggle buttons with state persistence
• Previous/Next — navigate between lessons
• Lesson details — description, resources, and notes

Quiz Engine

Route: /quiz/[id]

Interactive quiz interface:

• Countdown timer — visual timer with progress
• Question display — one question at a time with answer options
• Navigation — previous/next question controls
• Question grid — overview of answered/unanswered questions

Quiz Results

Route: /quiz/[id]/results

Score breakdown with:

• Overall score — percentage and pass/fail status
• Per-question review — correct/incorrect indicators
• Time taken — total quiz duration
• Retry option — button to retake the quiz

Progress Tracking

Route: /progress

Learning progress overview:

• Overall stats — total courses, completion rate, hours learned
• Course progress — individual course completion bars
• Learning path — structured learning roadmap

Certificates

Route: /certificates

Certificate management:

• Certificate cards — course name, completion date, certificate ID
• Actions — download, share, and verify buttons with toast feedback

Achievements

Route: /achievements

Gamification badges:

• Badge grid — earned and locked achievement badges
• Progress indicators — how close to unlocking each badge
• Categories — learning, social, streak achievements

Discussions

Route: /discussions

Forum listing:

• Thread list — title, author, reply count, last activity
• New thread — create discussion button with toast

Thread Detail

Route: /discussions/[id]

Discussion thread with:

• Thread content — original post with upvote, bookmark, share
• Replies — threaded replies with per-reply upvotes
• Reply form — text area for new replies

Live Sessions

Route: /live-sessions

Upcoming and past live sessions:

• Session cards — title, instructor, date/time, status
• Actions — join now, register, watch recording

Study Groups

Route: /study-groups

Collaborative learning:

• Group cards — name, member count, topic, activity
• Actions — join group, create group

Other Pages

Route	Description
/notifications	Notification center with read/unread states
/profile	Student profile with bio and stats
/settings	Account settings with delete confirmation dialog
/billing	Payment methods and invoice history