Back to Projects

Course Renderer

Work Projects

JavaScriptVue 2Bootstrap

Summary

Developed the primary LMS course interface serving students and instructors, featuring a drag-and-resize widget-based course home page, route-based role restrictions, lazy-loaded content rendering with skeleton placeholders, guided tours powered by shepherd.js, and a last-accessed-page system with iterative refinements. Conducted a comprehensive accessibility audit spanning the full application and built supporting features including section management, Online Excel integration via WOPI, video transcripts, and first-time user onboarding.

Description

The LMS needed a comprehensive frontend application to deliver course content, assignments, gradebooks, and administrative tools to both students and instructors. As the primary interface students and educators interact with daily, it required careful attention to usability, accessibility, and performance across a wide range of features.

I served as a primary contributor to this Vue 2 application, building foundational features and iterating on them over multiple years. My earliest work established the widget-based course home page, a drag-and-resize grid system where instructors can customize their dashboard layout with widgets for announcements, upcoming assignments, grades, and welcome content, complete with a management modal for configuring visibility, sizing, and layout resets. I also built the last-accessed-page system, which evolved through multiple refactors from an auto-redirect approach to a non-intrusive banner, with route-specific meta properties and masquerading detection.

Key features I developed include a guided tour system using Shepherd.js with multi-step progression, route-aware navigation waiting, and first-time access detection for both instructor and student perspectives. Steps supported a conditional display mechanism that skipped targets not present in the DOM, and completion state was tracked through a dedicated backend API I built in PHP/Symfony. I implemented lazy loading with skeleton placeholders for course layouts, route-based role restrictions that control navigation visibility by user role, and integrated Online Excel via WOPI to enable embedded spreadsheet exercises with auto-fullscreen behavior. I conducted a comprehensive accessibility audit spanning the full application, including student home, performance reports, section management, modals, and navigation, and built a reusable accessible BaseModal component to replace the existing modal library.

The project reflects sustained ownership of a production LMS frontend, combining feature development, performance optimization, and accessibility across a complex educational application.

Key Highlights

  • Widget-based course home page with a drag-and-resize grid system and management modal
  • Guided tour system using Shepherd.js with multi-step progression and route-aware navigation
  • Lazy loading with skeleton placeholders and route-based role restrictions for navigation visibility
  • Comprehensive accessibility audit spanning student home, reports, section management, and navigation
  • Last-accessed-page system evolved through multiple refactors from auto-redirect to non-intrusive banner
Back to Projects