Installation

Last updated on 2026-05-31

This guide walks you through setting up the LMS Starter Kit from scratch.

System Requirements

  • Node.js 18.17 or later
  • pnpm (recommended), npm, or yarn
  • Git for cloning the repository

Step 1 — Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> lms-kit
cd lms-kit

Step 2 — Install Dependencies

pnpm install

This installs Next.js 16, React 19, Tailwind CSS v4, shadcn/ui components, Recharts, and all utility libraries.

Key Dependencies

Package Purpose
next 16.x React framework
react 19.x UI library
tailwindcss 4.x CSS framework with oklch tokens
@base-ui/react Accessible UI primitives
recharts Dashboard and analytics charts
embla-carousel-react Course carousels
lucide-react Icons
next-themes Dark mode
sonner Toast notifications
date-fns Date utilities

Step 3 — Start the Dev Server

pnpm dev

Visit http://localhost:3000 to see the student dashboard.

Step 4 — Verify the Setup

Navigate through key pages:

  • /dashboard — Student dashboard with progress stats
  • /courses — Course catalog with filters
  • /courses/nextjs-complete — Course detail page
  • /lessons/lesson-001 — Video lesson player
  • /quiz/quiz-001 — Quiz interface
  • /instructor/dashboard — Instructor dashboard
  • /admin/dashboard — Admin dashboard
  • /login — Authentication

Available Scripts

Command Description
pnpm dev Start dev server
pnpm build Create production build
pnpm start Run production server
pnpm lint Run ESLint checks

Integrating into an Existing Project

  1. Copy components/ into your project (ui, courses, dashboard, layout directories)
  2. Copy data/seed.ts and types/index.ts
  3. Copy design tokens from app/globals.css
  4. Install the required dependencies from package.json
  5. Wire up seed data to your actual database or API

Note: All pages use seed data from data/seed.ts. Replace with your own data source (API, database, CMS) when integrating.

Troubleshooting

Port 3000 already in use:

pnpm dev --port 3001

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.