### Install Dependencies and Run Development Server

Source: https://github.com/classroomio/classroomio/blob/main/packages/course-app/README.md

Navigate to your project directory, install dependencies using pnpm, and start the development server.

```bash
cd your-project
pnpm install
pnpm run dev
```

--------------------------------

### Install CourseApp CLI

Source: https://github.com/classroomio/classroomio/blob/main/packages/course-app/README.md

Run this command to install the latest version of CourseApp and start a new project.

```bash
pnpx @classroomio/course-app@latest
```

--------------------------------

### Install Widget with Script Tag

Source: https://github.com/classroomio/classroomio/blob/main/prd/walkthrough-widget/README.md

How to install the ClassroomIO Walkthrough widget using a script tag in HTML.

```html
<script
  async
  src="https://assets.classroomio.com/embeds/walkthrough/walkthrough.js"
  data-cio-org="org_123">
</script>
```

--------------------------------

### Start Storybook Development Server

Source: https://github.com/classroomio/classroomio/blob/main/packages/storybook/README.md

Use this command to start the Storybook development server.

```bash
pnpm dev
```

--------------------------------

### Route File Example: Community Page Setup

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/ai/ROUTE_PAGE_SETUP.md

A route file acting as a minimal wrapper for a feature page. It handles page metadata and imports the feature page component.

```svelte
<script>
  import { CommunityPage } from '$features/community/pages';
  import { AskCommunityButton } from '$features/community/components';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
</script>

<svelte:head>
  <title>Community - ClassroomIO</title>
</svelte:head>

<Page.Root class="w-full">
  <Page.Header>
    <Page.HeaderContent>
      <Page.Title>{$t('community.title')}</Page.Title>
    </Page.HeaderContent>
    <Page.Action>
      <AskCommunityButton />
    </Page.Action>
  </Page.Header>
  <Page.Body>
    {#snippet child()}
      <CommunityPage />
    {/snippet}
  </Page.Body>
</Page.Root>
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/README.md

Install all the necessary Node.js packages for the project. This command should be run after cloning the repository and setting up the Node.js version.

```bash
npm i
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/classroomio/classroomio/blob/main/README.md

Install all project dependencies using pnpm.

```bash
pnpm i
```

--------------------------------

### Local Development Server Command

Source: https://github.com/classroomio/classroomio/blob/main/apps/embeds/README.md

This bash command builds the embeds and starts a local development server using 'serve'. Open the specified URL in your browser to test example embeds.

```bash
pnpm build && npx serve . -p 5190
# open http://localhost:5190/example-embed.html
```

--------------------------------

### Instructor Profile Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/storybook/README.md

Example of how to format instructor profile information using HTML elements and CSS classes.

```svelte
<h4 class="text-sm font-semibold">Sarah Johnson</h4>
<p class="text-sm">Senior Full-Stack Developer & Instructor</p>
<span class="text-muted-foreground text-xs">Teaching since January 2020</span>
```

--------------------------------

### Copy Environment File

Source: https://github.com/classroomio/classroomio/blob/main/apps/docs/content/docs/quickstart/self-hosting.mdx

Copy the example environment file to create your own configuration file.

```zsh
cp .env.example .env
```

--------------------------------

### Run Development Server

Source: https://github.com/classroomio/classroomio/blob/main/apps/docs/README.md

Commands to start the development server using different package managers.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

--------------------------------

### Clone ClassroomIO and Start Full Stack

Source: https://github.com/classroomio/classroomio/blob/main/docker/docs/SELF_HOST.md

Clone the ClassroomIO repository and run the script to build and start all necessary Docker services, including database, cache, object storage, API, and dashboard. Ensure you edit the .env file with your specific configurations.

```bash
git clone https://github.com/classroomio/classroomio.git
cd classroomio
cp .env.example .env
# Edit .env — set your domain, secrets, and ALLOWED_EXTERNAL_DOMAINS
./run-docker-full-stack.sh
```

--------------------------------

### Run ClassroomIO in Development Mode

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/README.md

Start the ClassroomIO application in development mode. This command allows you to see changes live as you make them. Ensure all dependencies are installed and the .env file is configured.

```bash
npm run dev
```

--------------------------------

### Course Information Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/storybook/README.md

Example of how to format course information, including title and description, using HTML elements and CSS classes.

```svelte
<h4 class="text-sm font-semibold">Advanced React Patterns</h4>
<p class="text-muted-foreground text-sm">
  Master advanced React concepts including hooks, context, performance optimization...
</p>
```

--------------------------------

### Start Full Stack Docker

Source: https://github.com/classroomio/classroomio/blob/main/apps/docs/content/docs/quickstart/self-hosting.mdx

Starts all services, including building Docker images and MinIO for file uploads. Use `--no-build` to skip image rebuilding or `--no-minio` to exclude MinIO.

```zsh
./run-docker-full-stack.sh

```

```zsh
./run-docker-full-stack.sh --no-build

```

```zsh
./run-docker-full-stack.sh --no-minio

```

--------------------------------

### Basic Editor Initialization

Source: https://github.com/classroomio/classroomio/blob/main/packages/ui/src/custom/editor/USAGE.md

Demonstrates the basic setup for the Editor component, initializing it with default content.

```svelte
<script lang="ts">
  import { Editor } from '@cio/ui/custom/editor';
  import type { Content } from '@tiptap/core';

  let content: Content = {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [{ type: 'text', text: 'Hello, world!' }]
      }
    ]
  };
</script>

<Editor bind:content />
```

--------------------------------

### Initialize Widget with npm Package

Source: https://github.com/classroomio/classroomio/blob/main/prd/walkthrough-widget/README.md

Example of initializing the ClassroomIO Walkthrough widget after importing it via npm.

```typescript
import { ClassroomIOWalkthrough } from "@classroomio/walkthrough";

ClassroomIOWalkthrough.init({
  organizationId: "org_123",
  userId: currentUser.id,
  traits: currentUser.traits
});
```

--------------------------------

### Student Information Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/storybook/README.md

Example of how to format student information, including name and enrollment details, using HTML elements and CSS classes.

```svelte
<h4 class="text-sm font-semibold">Alex Martinez</h4>
<p class="text-muted-foreground text-xs">5 courses enrolled</p>
<p class="text-muted-foreground text-xs">Active since March 2024</p>
```

--------------------------------

### Storybook File Structure Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/storybook/README.md

Example of directory organization for a molecule component, including its story file and fields file.

```bash
src/molecules/hover-card/
  ├── hover-card.stories.svelte
  └── fields.ts
```

--------------------------------

### Agent Mode Progress Tracking Example

Source: https://github.com/classroomio/classroomio/blob/main/prd/ai-course-assistant [DONE]/README.md

This example illustrates the structured progress events emitted by the agent during plan execution, rendered as a checklist in the UI. It shows the status of sections and lessons, including content creation and exercise generation.

```text
[x] Section 1: Cell Biology (created)
[x]   Lesson 1: Cell Structure and Function (created)
[x]   Lesson 1: Content written (2,400 words)
[ ]   Lesson 1: Exercise (5 questions) — in progress...
[ ]   Lesson 2: Cell Division
[ ] Section 2: Genetics
```

--------------------------------

### Start Local MinIO for Object Storage

Source: https://github.com/classroomio/classroomio/blob/main/README.md

Optionally start MinIO for object storage (media/documents) using Docker Compose. This includes the MinIO service and an initialization container.

```bash
docker compose -f docker/docker-compose.yaml --profile minio up -d minio minio-init
```

--------------------------------

### Basic Editor Usage Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/ui/src/custom/editor/USAGE.md

This example demonstrates how to use the Editor component with basic content binding and event handling for content changes and editor readiness.

```APIDOC
```svelte
<Editor
  content={myContent}
  onContentChange={(content) => {
    console.log('New content:', content);
    // Save to database, update state, etc.
  }}
  onEditorReady={(editor) => {
    console.log('Editor is ready, you can focus it:', editor);
    editor.commands.focus();
  }}
/>
```
```

--------------------------------

### Start Local Infrastructure with Docker Compose

Source: https://github.com/classroomio/classroomio/blob/main/README.md

Start Postgres, Redis, and the database initialization container in detached mode. The db-init container runs migrations and seeds the database.

```bash
docker compose -f docker/docker-compose.yaml up -d postgres redis db-init
```

--------------------------------

### Start MinIO Service Manually

Source: https://github.com/classroomio/classroomio/blob/main/docker/docs/SELF_HOST.md

Manually start the MinIO object storage service using Docker Compose, particularly useful if it was excluded during the initial full stack setup. This command uses a specific Docker Compose file and profile.

```bash
docker compose -f docker/docker-compose.yaml --profile minio up -d
```

--------------------------------

### Define Onboarding Steps

Source: https://github.com/classroomio/classroomio/blob/main/prd/onboarding-platform-showcase/README.md

Defines the two initial steps in the user onboarding process: organization setup and user metadata collection.

```typescript
const ONBOARDING_STEPS = {
  ORG_SETUP: 1,
  USER_METADATA: 2
};
```

--------------------------------

### Start Full Docker Stack

Source: https://github.com/classroomio/classroomio/blob/main/apps/docs/content/docs/quickstart/self-hosting.mdx

Build and launch all necessary services for ClassroomIO, including the database, cache, object storage, API, and dashboard.

```zsh
./run-docker-full-stack.sh
```

--------------------------------

### Public Runtime API Methods

Source: https://github.com/classroomio/classroomio/blob/main/prd/walkthrough-widget/README.md

Examples of using the public API to control walkthroughs at runtime, including starting, ending, and identifying users.

```typescript
window.ClassroomIOWalkthrough.start("walkthrough_key");
window.ClassroomIOWalkthrough.end();
window.ClassroomIOWalkthrough.identify(userId, traits);
```

--------------------------------

### Self-Hosting ClassroomIO with Docker Compose

Source: https://github.com/classroomio/classroomio/blob/main/apps/website/src/blog/self-host.md

Use this docker-compose.yaml file to get started with self-hosting ClassroomIO using Docker. This file defines the necessary services and configurations for running the application.

```yaml
version: "3.8"
services:
  db:
    image: postgres:14
    volumes: 
      - postgres_data:/var/lib/postgresql/data/
    environment:
      - POSTGRES_DB=classroomio
      - POSTGRES_USER=classroomio
      - POSTGRES_PASSWORD=classroomio
  api:
    build: ./api
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      - DATABASE_URL=postgres://classroomio:classroomio@db:5432/classroomio
  dashboard:
    build: ./dashboard
    ports:
      - "80:80"
volumes:
  postgres_data:
```

--------------------------------

### Setup Database for Application

Source: https://github.com/classroomio/classroomio/blob/main/packages/db/README.md

Run this command to prepare a new or existing PostgreSQL database for application use. It synchronizes the schema, creates necessary roles for RLS, and inserts essential seed data.

```bash
pnpm db:setup
```

--------------------------------

### Install Helix CLI

Source: https://github.com/classroomio/classroomio/blob/main/prototypes/org-landing-page/terminal.html

Install the Helix CLI using curl. This command downloads and executes the installation script.

```bash
curl -fsSL https://helix.dev/install.sh | bash
```

--------------------------------

### Create a New Course Site

Source: https://github.com/classroomio/classroomio/blob/main/apps/course-app/README.md

Use this command to scaffold a new course site project with the specified name.

```bash
pnpm dlx @cio/course-app mysaas-university
```

--------------------------------

### cURL Authentication Example

Source: https://github.com/classroomio/classroomio/blob/main/apps/docs/content/docs/api.mdx

Example of how to authenticate with the ClassroomIO public API using a bearer token in a cURL request.

```bash
curl https://api.classroomio.com/public-api/v1/audience \
  -H "Authorization: Bearer <cio_api_key>"
```

--------------------------------

### Base Components Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/ui/README.md

Illustrates the organization of base components, which are primarily sourced from shadcn-svelte. Each component is typically in its own folder with an export file.

```bash
- base/button/ - Button component from shadcn-svelte
- base/dialog/ - Dialog component from shadcn-svelte
- base/tooltip/ - Tooltip component from shadcn-svelte
```

--------------------------------

### Old Project Structure Example

Source: https://github.com/classroomio/classroomio/blob/main/apps/website/FOLDER_STRUCTURE.md

This illustrates the previous folder structure before refactoring, showing a less organized approach with direct file imports and PascalCase naming.

```treeview
src/lib/
├── Blog/BlogListItem.svelte
├── Contact/FeedbackForm.svelte, HelpForm.svelte, Sucess.svelte
├── Footer/Footer.svelte
├── Home/*.svelte, faqs.ts
├── Navigation/Navigation.svelte
├── Modal/Modal.svelte
├── PageHeader/PageHeader.svelte
├── PageSignupCTA/index.svelte
├── Senja/Embed.svelte
├── Timeline/Timeline.svelte
├── ToolsHeader/ToolsHeader.svelte
├── UploadWidget/UploadWidget.svelte
├── NotFound/NotFound.svelte
├── custom/img.svelte, index.ts
└── types.ts
```

--------------------------------

### Translation File Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/utils/src/validation/README.md

Example JSON structure for storing validation translations, following the `validations.{fieldName}.{errorCode}` convention for mapping.

```json
{
  "validations": {
    "to": {
      "invalid_email": "Invalid email address",
      "invalid_type": "Email is required"
    },
    "subject": {
      "too_small": "Subject is required"
    },
    "username": {
      "too_small": "Username must be at least 3 characters",
      "too_big": "Username cannot exceed 20 characters"
    },
    "generic": {
      "required": "This field is required",
      "invalid_email": "Invalid email address",
      "too_small_string": "Must be at least {min} characters"
    }
  }
}
```

--------------------------------

### Install Helix SDK via npm

Source: https://github.com/classroomio/classroomio/blob/main/prototypes/org-landing-page/terminal.html

Install the Helix SDK package using npm. This command is typically used in onboarding scripts.

```bash
npm i @helix/sdk && npx helix bootstrap
```

--------------------------------

### Runtime Initialization with Traits

Source: https://github.com/classroomio/classroomio/blob/main/prd/walkthrough-widget/README.md

Example of initializing the ClassroomIO Walkthrough widget with organization ID, user ID, and custom traits.

```typescript
ClassroomIOWalkthrough.init({
  organizationId: "org_123",
  userId: currentUser.id,
  traits: {
    role: currentUser.role,
    plan: currentUser.plan,
    firstTimeUser: currentUser.firstTimeUser,
    coursesCreated: currentUser.coursesCreated
  }
});
```

--------------------------------

### Metadata Examples for Notification Types

Source: https://github.com/classroomio/classroomio/blob/main/prd/notification-system/README.md

Provides examples of the 'metadata' JSONB structure for various notification types, including deep linking information.

```typescript
// NEWSFEED_POST
{ feedId: "uuid-123", link: "/courses/abc/newsfeed?feedId=uuid-123" }

// COMMUNITY_QUESTION
{ questionSlug: "how-to-use-hooks", courseId: "abc", link: "/courses/abc/community/how-to-use-hooks" }

// EXERCISE_DUE_REMINDER
{ exerciseId: "ex-123", dueBy: "2026-03-01T23:59:00Z", link: "/courses/abc/exercises/ex-123" }

// LIVE_CLASS_REMINDER
{ lessonId: "lesson-456", lessonAt: "2026-03-02T14:00:00Z", link: "/courses/abc/lessons/lesson-456" }

// COURSE_COMPLETED
{ studentName: "Jane Doe", studentProfileId: "profile-789", link: "/courses/abc/people" }
```

--------------------------------

### Utility Imports Example

Source: https://github.com/classroomio/classroomio/blob/main/apps/website/FOLDER_STRUCTURE.md

Demonstrates importing various utilities, including functions, types, and constants, from the `$lib/utils` directory. This ensures consistent access to shared application logic and data.

```svelte
<script>
  import { formatDate } from '$lib/utils/format-date';
  import { isFormValid } from '$lib/utils/is-form-valid';
  import { submitForm } from '$lib/utils/submit-form';
  import type { BlogPost } from '$lib/utils/types';
  import { tools } from '$lib/utils/constants/tools';
</script>
```

--------------------------------

### Minimal Route File Example (+page.svelte)

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/ai/ROUTE_PAGE_SETUP.md

Demonstrates a minimal Svelte route file that sets up the page structure and renders the main feature component. It should only contain page structure and imports.

```svelte
<script>
  import { FeaturePage } from '$features/[feature]/pages';
  import { FeatureActionButton } from '$features/[feature]/components';
  import { t } from '$lib/utils/functions/translations';
  import * as Page from '@cio/ui/base/page';
</script>

<svelte:head>
  <title>Feature Name - ClassroomIO</title>
</svelte:head>

<Page.Root class="w-full">
  <Page.Header>
    <Page.HeaderContent>
      <Page.Title>{$t('feature.title')}</Page.Title>
    </Page.HeaderContent>
    <Page.Action>
      <FeatureActionButton />
    </Page.Action>
  </Page.Header>
  <Page.Body>
    {#snippet child()}
      <FeaturePage />
    {/snippet}
  </Page.Body>
</Page.Root>
```

--------------------------------

### Seed Demo Data for ClassroomIO

Source: https://github.com/classroomio/classroomio/blob/main/docker/docs/SELF_HOST.md

Run a command to seed the database with demo data using the db-init service. This command requires the Docker Compose configuration and the .env file to be set up.

```bash
docker compose --env-file .env -p classroomio -f docker/docker-compose.yaml \
  run --rm db-init sh -c "pnpm --filter @cio/db db:setup -- --seed"
```

--------------------------------

### Basic API Requests (GET and POST)

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/src/lib/utils/services/api/README.md

Demonstrates how to make GET and POST requests using the apiClient and safeRequest utilities. Ensure apiClient and safeRequest are imported.

```typescript
import { apiClient, safeRequest, classroomio } from '$lib/utils/services/api';

// GET request
const result = await safeRequest(async () => {
  return apiClient.request('/api/users', { method: 'GET' });
});

// POST request
const result = await safeRequest(async () => {
  return apiClient.request('/api/users', {
    method: 'POST',
    body: { name: 'John', email: 'john@example.com' }
  });
});

// Handle response
if (result.success) {
  console.log('Data:', result.data);
} else {
  console.error('Error:', result.error.message);
}
```

--------------------------------

### Directory Structure Example

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/ai/ROUTE_PAGE_SETUP.md

Illustrates the recommended directory structure for organizing routes, feature components, utilities, and API calls within the dashboard application.

```bash
apps/dashboard/src/
├── routes/
│   └── org/
│       └── [slug]/
│           └── [feature]/
│               └── +page.svelte          # Minimal route wrapper
└── lib/
    └── features/
        └── [feature]/
            ├── components/
            │   ├── [component].svelte
            │   └── index.ts               # Export all components
            ├── pages/
            │   ├── [feature].svelte      # Main feature page with all logic
            │   └── index.ts               # Export page component
            ├── utils/                     # Feature-specific utilities
            └── api/                       # Feature-specific API calls
```

--------------------------------

### Custom Components Example

Source: https://github.com/classroomio/classroomio/blob/main/packages/ui/README.md

Highlights custom components that are either from external sources like shadcn-svelte-extras or built by extending base components.

```bash
- custom/code/ - From shadcn-svelte-extras (syntax-highlighted code block with copy and overflow)
- custom/underline-tabs/ - From shadcn-svelte-extras
- custom/editor/ - Rich text editor based on Edra/Tiptap
- custom/image-cropper/ - Custom image cropping component
- custom/checkbox-field/ - Field component built on top of base Checkbox
- custom/newsfeed-reactions/ - Newsfeed reaction picker and summary used by course and program feeds
- custom/course-creator/ - ChatGPT-style course creation input with level and type selects
```

--------------------------------

### Start API-only Smoke Test

Source: https://github.com/classroomio/classroomio/blob/main/docker/docs/SELF_HOST.md

Initiates a smoke test by starting only the necessary services for the API: postgres, redis, db-init, and api. This is useful for quickly testing API functionality.

```bash
dc up --build -d postgres redis db-init api
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/classroomio/classroomio/blob/main/README.md

Duplicate .env.example to .env in apps/dashboard and apps/api directories and populate with required values. For self-hosted Enterprise features, set LICENSE_KEY in apps/api/.env.

```bash
apps/api/.env: DATABASE_URL, REDIS_URL, AUTH_BEARER_TOKEN, BETTER_AUTH_SECRET
apps/dashboard/.env: PUBLIC_SERVER_URL, PRIVATE_SERVER_KEY, PUBLIC_IS_SELFHOSTED
apps/api/.env: LICENSE_KEY
```

--------------------------------

### Email Template Example: Community Question

Source: https://github.com/classroomio/classroomio/blob/main/prd/notification-system/README.md

Defines an email template for when a new community question is posted. This example demonstrates schema definition and rendering logic for the 'communityQuestion' email.

```typescript
import * as z from 'zod';
import { defineEmail } from '../send';
import { getDefaultTemplate } from '../templates';

export const communityQuestionEmail = defineEmail({
  id: 'communityQuestion',
  subject: 'New question in your course',
  schema: z.object({
    studentName: z.string().min(1),
    questionTitle: z.string().min(1),
    courseName: z.string().min(1),
    questionLink: z.url(),
    orgName: z.string().min(1)
  }),
  render: (fields) => {
    const content = `
      <p>${fields.studentName} posted a question in ${fields.courseName}:</p>
      <p style="font-weight: bold; font-size: 16px;">${fields.questionTitle}</p>
      <div>
        <a class="button" href="${fields.questionLink}">View Question</a>
      </div>
    `;
    return getDefaultTemplate(content);
  }
});

```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/classroomio/classroomio/blob/main/apps/dashboard/README.md

Change your current directory to the root of the cloned ClassroomIO project. This is necessary before running any installation or development commands.

```bash
cd classroomio
```

--------------------------------

### Get program detail

Source: https://github.com/classroomio/classroomio/blob/main/prd/programs [DONE]/README.md

Retrieves detailed information about a specific program.

```APIDOC
## GET /program/:programId

### Description
Fetches the details of a specific program identified by its ID.

### Method
GET

### Endpoint
/program/:programId

### Parameters
#### Path Parameters
- **programId** (string) - Required - The unique identifier of the program.

### Request Example
None

### Response
#### Success Response (200)
- **program** (object) - An object containing the program's details.

#### Response Example
{
  "program": {
    "id": "program-id-1",
    "name": "Example Program 1",
    "description": "This is the first example program."
  }
}
```