@academy-sdk/starter

A minimal starter template for building custom Academy learner templates with the @academy-sdk/sdk.

Installation

npm install @academy-sdk/starter

Or clone and customize:

git clone <repo-url>
cd template-starter
npm install

Usage

As an npm dependency

import template from '@academy-sdk/starter';

// Register the template with the Academy platform
registerTemplate(template);

As a standalone template

1. Edit src/manifest.json with your template name
2. Customize pages in src/pages/ (copy from SDK defaults as starting point)
3. Update src/index.tsx to register your custom pages
4. Build and package:

npm run build    # Compile to dist/bundle.js
npm run zip      # Create deployable .zip package
npm run preview  # Local preview at http://localhost:3000
npm run dev      # Watch mode for development

5. Upload the .zip file in Academy Creator Dashboard → Settings → Learner Template

What's Included

This is a minimal starter — it customizes only a few pages and uses SDK defaults for the rest:

| Page | Source | |---|---| | Course Detail | Custom (src/pages/CourseDetailPage.tsx) | | Course Player | Custom (src/pages/CoursePlayerPage.tsx) | | All other pages | SDK defaults |

Custom Components

• CustomSidebar — Navigation sidebar
• CustomNavbar — Top navigation bar
• DefaultLayout — Layout wrapper

Customizing a Page

1. Copy the SDK default page or start from the examples in src/pages/
2. Modify the JSX — change layout, colors, components
3. Import your page in src/index.tsx:

import { CustomMyLearningPage } from './pages/MyLearningPage';

const template: TemplateManifest = {
  ...defaults,
  pages: {
    ...defaults.pages,
    MyLearningPage: CustomMyLearningPage,
  },
};

How It Works

• All data comes through props — no API calls needed
• Use @academy-sdk/sdk components as building blocks, or build from scratch
• Only customize the view layer — the platform handles routing, data, and logic

Available SDK Components

| Category | Components | |---|---| | Atoms | Button, Input, Card, Badge, Avatar, ProgressBar, Tabs | | Molecules | CourseCard, Pagination, PageHeader, SearchInput, EmptyState, LoadingSpinner | | Organisms | LearnerNavbar, LearnerSidebar, CourseSidebar, LessonNotes, LessonBookmarks | | Pages | MyLearningPage, CatalogCoursesPage, CourseDetailPage, CoursePlayerPage, MessagesPage, ... |

Preview Mode

Preview locally with mock data:

npm run preview            # starts at http://localhost:3000
PORT=4000 npm run preview  # custom port

The preview toolbar lets you switch between all pages. Edit preview/mock-data.ts to customize test data.

Files in preview/ are never included in the production bundle.

License

MIT