EduCloud — Enterprise Learning Management System

EduCloud is a modern, responsive learning management platform built with React 18, Vite, and TypeScript that combines a high-impact public marketing site with three role-specific dashboards — admin, instructor, and student — designed to scale from a single team to a multi-tenant enterprise deployment. The landing experience features a fixed glassmorphism navbar, a Framer Motion hero with ambient gradient blur and enterprise stats, a 12-card features grid, a 4-step 'How It Works' walkthrough with dashed connectors, a featured courses grid with category badges and ratings, testimonials, a 3-tier pricing table with a 'Most Popular' highlight, a conversion CTA, and a comprehensive 4-column footer. Instructors get a full-featured course builder with sections and lessons, drag-and-drop reordering powered by dnd-kit, a TipTap-style rich text editor for lesson content and course descriptions, a FileUploadZone for videos, thumbnails, and PDF documents, and a bulk lesson import flow that accepts ZIP or CSV uploads to spin up many lessons at once. A dedicated Certificates module ships with a visual certificate builder supporting text, dynamic merge fields ({{studentName}}, {{courseName}}, {{certId}}), font, color, alignment, and X/Y percent positioning, four professional default templates (Classic Elegant, Modern Professional, Bold & Dark, Minimal Clean), an Issued tracker, and a Verify tool that validates authenticity by Certificate ID; instructors can toggle 'Certificate on Completion' on any course and pick a template from a selector grid. A three-tier RBAC system (Admin, Instructor, Student) drives the DashboardRouter and a collapsible sidebar that swaps between Main/Learning/System sections for admins and tailored menus for instructors and students. Admins get global modules for Courses, Categories, Students, Instructors, Organizations, Learning Paths, Assessments, Certificates, Gamification, Reviews, Discussions, Analytics, Payments, Coupons, Notifications, CMS, Support, and Settings. Navigation is fully eager-loaded with deduped React instances in vite.config to eliminate blank/loading flashes between routes. The UI is built on Shadcn + Radix with a fully tokenized HSL design system, gradient hero backgrounds, primary-glow shadows, Framer Motion micro-interactions, and Lucide icons. Routing uses React Router, forms use React Hook Form + Zod, feedback is delivered through Sonner and Radix toasts, and the codebase is tested with Vitest.