The LMS Starter Kit uses Next.js App Router with route groups to separate the student experience, instructor dashboard, admin portal, and authentication.
Directory Overview
lms-kit/
├── app/
│ ├── (student)/ # Student learning pages
│ │ ├── layout.tsx # AppHeader + AppSidebar
│ │ ├── dashboard/page.tsx # Student dashboard
│ │ ├── courses/
│ │ │ ├── page.tsx # Course catalog
│ │ │ └── [slug]/page.tsx # Course detail
│ │ ├── my-learning/page.tsx
│ │ ├── lessons/
│ │ │ └── [id]/page.tsx # Lesson player
│ │ ├── quiz/
│ │ │ └── [id]/
│ │ │ ├── page.tsx # Quiz interface
│ │ │ └── results/page.tsx
│ │ ├── progress/page.tsx
│ │ ├── certificates/page.tsx
│ │ ├── achievements/page.tsx
│ │ ├── discussions/
│ │ │ ├── page.tsx # Forum list
│ │ │ └── [id]/page.tsx # Thread detail
│ │ ├── live-sessions/page.tsx
│ │ ├── study-groups/page.tsx
│ │ ├── notifications/page.tsx
│ │ ├── profile/page.tsx
│ │ ├── settings/page.tsx
│ │ └── billing/page.tsx
│ ├── (instructor)/ # Instructor tools
│ │ ├── layout.tsx # AppHeader + InstructorSidebar
│ │ └── instructor/
│ │ ├── dashboard/page.tsx
│ │ ├── courses/
│ │ │ ├── page.tsx # Course management
│ │ │ └── [id]/curriculum/page.tsx
│ │ ├── analytics/page.tsx
│ │ ├── students/page.tsx
│ │ ├── qa/page.tsx
│ │ └── profile/page.tsx
│ ├── (admin)/ # Admin portal
│ │ ├── layout.tsx # AppHeader + AdminSidebar
│ │ └── admin/
│ │ ├── dashboard/page.tsx
│ │ ├── users/page.tsx
│ │ ├── approvals/page.tsx
│ │ ├── categories/page.tsx
│ │ ├── tickets/page.tsx
│ │ ├── reports/page.tsx
│ │ ├── settings/page.tsx
│ │ └── audit-log/page.tsx
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── (public)/ # Public pages
│ │ ├── layout.tsx
│ │ ├── pricing/page.tsx
│ │ └── checkout/page.tsx
│ ├── globals.css # Design tokens
│ ├── layout.tsx # Root layout
│ └── not-found.tsx # 404 page
├── components/
│ ├── ui/ # shadcn/ui primitives
│ ├── courses/ # Course composites
│ ├── dashboard/ # Dashboard composites
│ ├── layout/ # Layout components
│ └── shared/ # Shared composites
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ └── use-mobile.ts # Mobile viewport detection
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(student) |
AppHeader + AppSidebar |
Student learning experience |
(instructor) |
AppHeader + InstructorSidebar |
Course creation and management |
(admin) |
AppHeader + AdminSidebar |
Platform administration |
(auth) |
Centered card |
Login, register, forgot password |
(public) |
Minimal |
Pricing, checkout |
Component Organization
Primitives (components/ui/)
shadcn/ui components: Button, Input, Card, Table, Tabs, Dialog, Sheet, Accordion, Badge, Select, Progress, Avatar, Tooltip, and more.
Course Composites (components/courses/)
| Component |
Used In |
course-card |
Catalog, dashboard, recommendations |
course-filters |
Catalog sidebar |
Dashboard Composites (components/dashboard/)
| Component |
Used In |
stat-card |
Student, instructor, admin dashboards |
welcome-banner |
Student dashboard |
activity-chart |
Student dashboard |
continue-learning |
Student dashboard |
recommended-courses |
Student dashboard |
recent-achievements |
Student dashboard |
upcoming-deadlines |
Student dashboard |
Shared Composites (components/shared/)
| Component |
Used In |
page-header |
All pages (title + breadcrumbs) |
status-badge |
Tables across all sections |
empty-state |
Empty lists and tables |
icon-map |
Category icons |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, user menu |
app-sidebar |
Navigation sidebar (collapses to Sheet on mobile) |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (courses, users, modules, reviews, etc.) |
types/index.ts |
TypeScript interfaces for all domain objects |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors, spacing, typography) |