Implement lesson viewer, course browse, and admin dashboard features

[Xaxxoo]

Summary

Implement lesson viewer, course browse, and admin dashboard features

What was solved

#220 — Upgrade Lesson Viewer — Video Player, Markdown Renderer, Lesson Navigation, and Quiz Prompt

Upgrade the lesson viewer page at frontend/app/courses/[id]/lessons/[lessonId]/page.tsx to render video lessons via a responsive YouTube iframe (with start timestamp), text lessons via react-markdown with remark-gfm and rehype-highlight, add a duration badge, previous/next lesson navigation, a quiz prompt card when hasQuiz is true, and a mark-complete button with loading/success states. Create four supporting components under frontend/components/lessons/.

Addressed:

• Changed: frontend/app/courses/[id]/lessons/[lessonId]/page.tsx, frontend/components/lessons/video-player.tsx, frontend/components/lessons/markdown-content.tsx, frontend/components/lessons/lesson-navigation.tsx
• Video lessons: embed YouTube URL in a responsive 16:9 iframe with videoStartTimestamp applied as ?start=N; show a Notes section below the video when content is populated
• Text lessons: render content as markdown using react-markdown with remark-gfm (tables, code blocks, lists) and rehype-highlight for syntax highlighting
• Show a duration badge in the lesson header (e.g. '~5 min read' or '8 min video')

#221 — Build Course Browse Page — Real API Data, Search, Difficulty Filter, Tag Chips, and Pagination

Replace the hardcoded course array on /courses with a real API-driven browse experience: TanStack Query infinite fetching from GET /api/v1/courses, debounced search, difficulty pills, multi-select tag chips from GET /api/v1/courses/tags, sort selector, Load More pagination, loading skeleton grid, empty state, and CourseCard updates for enrollmentCount/isEnrolled.

Addressed:

• Changed: frontend/app/courses/page.tsx, frontend/components/course-card.tsx, frontend/components/courses/course-filters.tsx, frontend/hooks/use-courses.ts
• Remove the hardcoded const courses array from frontend/app/courses/page.tsx and fetch from GET /api/v1/courses via TanStack Query
• Add a 300ms debounced search input passing ?search= to the backend query
• Add difficulty filter pill buttons: All, Beginner, Intermediate, Advanced

#222 — Upgrade Admin Dashboard — Analytics Stats, Activity Chart, and Full Course Management Table

Upgrade the admin panel into a functional dashboard: add an admin layout with sidebar nav and role-based auth guard, rebuild /admin as an analytics dashboard (stat cards, learner activity AreaChart, top courses), and add a full course management table page with create/edit/delete, search, and status filter. Wire to the backend admin analytics API and existing course endpoints via lib/api.ts helpers.

Addressed:

• Changed: frontend/app/admin/page.tsx, frontend/app/admin/layout.tsx, frontend/hooks/use-admin-analytics.ts
• Create frontend/app/admin/layout.tsx with sidebar nav (Dashboard, Courses, Users placeholder, Analytics) and auth guard redirecting non-admins to /dashboard with an 'Access denied' toast
• Upgrade frontend/app/admin/page.tsx to show four overview stat cards (Total Users, Total Courses, Total Enrollments, Certificates Issued) from GET /api/v1/admin/analytics/overview
• Add learner activity chart (last 30 days daily active users) using recharts AreaChart from GET /api/v1/admin/analytics/learner-activity

Changes

• frontend/app/courses/[id]/lessons/[lessonId]/page.tsx (modify)
• frontend/components/lessons/lesson-navigation.tsx (create)
• frontend/components/courses/course-filters.tsx (create)
• frontend/app/admin/layout.tsx (modify)
• frontend/components/lessons/video-player.tsx (create)
• frontend/app/courses/page.tsx (modify)
• frontend/hooks/use-courses.ts (create)
• frontend/hooks/use-admin-analytics.ts (create)
• frontend/components/lessons/markdown-content.tsx (create)
• frontend/components/course-card.tsx (modify)
• frontend/app/admin/page.tsx (modify)

Approach

1. Upgrade Lesson Viewer — Video Player, Markdown Renderer, Lesson Navigation, and Quiz Prompt #220 — Upgrade Lesson Viewer — Video Player, Markdown Renderer, Lesson Navigation, and Quiz Prompt (Changed: frontend/app/courses/[id]/lessons/[lessonId]/page.tsx, frontend/components/lessons/video-player.tsx, frontend/components/lessons/markdown-content.tsx, frontend/components/lessons/lesson-navigation.tsx)
2. Build Course Browse Page — Real API Data, Search, Difficulty Filter, Tag Chips, and Pagination #221 — Build Course Browse Page — Real API Data, Search, Difficulty Filter, Tag Chips, and Pagination (Changed: frontend/app/courses/page.tsx, frontend/components/course-card.tsx, frontend/components/courses/course-filters.tsx, frontend/hooks/use-courses.ts)
3. Upgrade Admin Dashboard — Analytics Stats, Activity Chart, and Full Course Management Table #222 — Upgrade Admin Dashboard — Analytics Stats, Activity Chart, and Full Course Management Table (Changed: frontend/app/admin/page.tsx, frontend/app/admin/layout.tsx, frontend/hooks/use-admin-analytics.ts)

Issues

Closes #220
Closes #221
Closes #222