Skip to content

feat: implement LMS core features (progress tracking, markdown notes, quizzes) & layout enhancements - #7

Open
sila911 wants to merge 3 commits into
masterfrom
fix/details-cards
Open

feat: implement LMS core features (progress tracking, markdown notes, quizzes) & layout enhancements#7
sila911 wants to merge 3 commits into
masterfrom
fix/details-cards

Conversation

@sila911

@sila911 sila911 commented Jul 13, 2026

Copy link
Copy Markdown
Owner

📝 Description

This PR transforms Learnify into a fully functional Learning Management System (LMS) with client-side state persistence and interactive learning tools. It also integrates custom responsive design passes and logo marquee carousels.

🚀 Key Features Introduced

1. 📊 Progress Tracking & Lesson Checkpoints

  • State Persistence: Uses localStorage to save completed/watched video lesson IDs across reloads.
  • Curriculum Checkboxes: Replaced lesson index numbers in the video page playlist sidebar with interactive checkpoints to toggle watch status.
  • Visual Progress Bars: Renders responsive progress percentage bars (0% - 100%) dynamically on Course Cards and the Course Details sidebar.

2. 📝 Auto-Saving Markdown Notes

  • Interactive Notes Tab: Created an auto-saving notes block below the video player mapped to individual video lessons.
  • Live Markdown Parser: Integrated a toggleable regex-based Markdown renderer supporting # Headers, **bold**, *italics*, `code` blocks, and - bullet lists.

3. ❓ Knowledge Quizzes & Course Checks

  • Quiz Stepper: Embedded relevant multiple-choice question sheets inside each course.
  • Score Summaries: Shows a score summary card with a circular score ring and retake options upon completion.

4. 🎨 Layout & Polish

  • Glassmorphic Floating Navbar: Hide-on-scroll navigation bar matching the personal portfolio style.
  • Infinite Logos Marquee: Replaced static brand grids with a mathematically seamless scrolling logo carousel.
  • Responsive Tabs: Fixed mobile squishing of video tabs using horizontal overflow swiping and custom scrollbar hiding.
  • Back-History Safety: Wired logical popstate navigation so that back buttons return the user to the previous state rather than resetting to Home.

🛠️ Files Modified

  • src/components/VideoPage.jsx - Main player layout, sub-tabs, notes auto-save, markdown, and quiz module.
  • src/components/CourseDetails.jsx - Progress bars and responsive stack order.
  • src/components/CourseCard.jsx - Catalog cards progress overlays.
  • src/components/Logos.jsx - Marquee slider container.
  • src/data/trendingCourses.js - Mock database quiz datasets.
  • src/App.jsx - State engines for completed lessons, popstate checks, and theme toggling.
  • src/input.css - Custom marquee keyframe translations and scrollbar-none utility selectors.

🧪 Verification & Builds

  • Ran npm run build locally; compiled client files successfully with zero warnings:
    • dist/assets/index-BgU_tPRY.css (81.85 kB)
    • dist/assets/index-ByTgz4cb.js (278.52 kB)

sila911 added 2 commits July 13, 2026 14:50
…orphism, optimize mobile responsiveness, and refine routing
… markdown notes, knowledge quizzes, and responsive tab layout fixes
@vercel

vercel Bot commented Jul 13, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
learnify Ready Ready Preview, Comment Jul 13, 2026 8:45am
learnify-d6nv Ready Ready Preview, Comment Jul 13, 2026 8:45am
learnify-lnkw Ready Ready Preview, Comment Jul 13, 2026 8:45am
learnify-o9kv Ready Ready Preview, Comment Jul 13, 2026 8:45am

…editor syntax highlighting, and VS Code-style autocomplete suggestions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant