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

[portableDD]

Labels

Frontend

Description

ByteChain Academy's lesson viewer at /courses/[id]/lessons/[lessonId] exists but is very basic — it shows a title and description from mock data, has no real video embedding, no markdown content rendering, and no structured lesson layout. A bite-sized learning platform lives or dies by the quality of its lesson experience. This issue upgrades the lesson viewer into a proper interactive learning interface with video playback, rich content rendering, and a smooth completion flow.

Background & Context

• frontend/app/courses/[id]/lessons/[lessonId]/page.tsx exists but reads from mock data via useLearning() context
• The Lesson entity on the backend has: title, content (markdown text), videoUrl (YouTube embed URL), videoStartTimestamp, duration, type (text/video/interactive)
• Lessons can be type text (markdown only), video (YouTube embed + optional notes), or interactive (future)
• After Issues 9 and 10 the lesson data comes from the real backend — this issue improves how that data is presented
• The quiz widget should appear inline at the bottom of the lesson if the lesson has an associated quiz

Requirements

• Upgrade frontend/app/courses/[id]/lessons/[lessonId]/page.tsx:
  • For video type lessons: embed the YouTube URL using a responsive <iframe> with the videoStartTimestamp applied as ?start=N parameter. Show a "Notes" section below the video if content is populated
  • For text type lessons: render content as markdown using react-markdown with remark-gfm for tables, code blocks, and lists. Apply syntax highlighting using rehype-highlight
  • Duration badge in the lesson header (e.g. "~5 min read" or "8 min video")
  • Previous / Next lesson navigation buttons at the bottom, navigating within the same course in order
  • If the lesson has an associated quiz (hasQuiz: true), show a "Take Quiz" card below the content that links to /courses/[id]/quizzes/[quizId]
  • Mark complete button calls the backend (from Issue 10) with a loading state and success animation
• Install react-markdown, remark-gfm, and rehype-highlight if not already present

Suggested Execution

Branch: git checkout -b feat/interactive-lesson-viewer

Files to touch:

• frontend/app/courses/[id]/lessons/[lessonId]/page.tsx
• frontend/components/lessons/video-player.tsx ← create this
• frontend/components/lessons/markdown-content.tsx ← create this
• frontend/components/lessons/lesson-navigation.tsx ← create this
• frontend/components/lessons/quiz-prompt-card.tsx ← create this

Implement:

• npm install react-markdown remark-gfm rehype-highlight
• VideoPlayer — responsive iframe wrapper with aspect-ratio: 16/9, start timestamp param, title overlay
• MarkdownContent — ReactMarkdown with remarkGfm and rehypeHighlight plugins, custom component overrides for code blocks (add copy button), links (open in new tab), and images (max-width)
• LessonNavigation — prev/next buttons computed from the sorted lesson list, disabled at first/last lesson
• QuizPromptCard — card with quiz title, question count, and CTA button — shown only when hasQuiz: true
• Duration badge: Math.ceil(duration) minutes with a clock icon

Test & Validate:

• A video lesson renders the YouTube embed with correct start timestamp
• A text lesson renders markdown with proper heading styles, code blocks with syntax highlighting, and tables
• Previous and next navigation correctly moves between lessons in order
• The quiz prompt card appears for lessons with an associated quiz
• Mark complete button shows a loading state and success checkmark animation
• Lesson renders correctly on mobile viewports

Acceptance Criteria

• Video lessons render a responsive YouTube embed with videoStartTimestamp applied
• Text lessons render markdown with react-markdown including code highlighting
• Duration badge displayed in lesson header
• Previous / Next navigation works correctly within the course
• Quiz prompt card shown when hasQuiz is true
• Mark complete button has loading state and success animation
• Lesson viewer is mobile responsive

Example Commit Message

feat: upgrade lesson viewer with video embed, markdown renderer, and lesson navigation

Guidelines

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