@academy-sdk/nova

A fully customized dark-themed learner template for the Academy platform, built with the @academy-sdk/sdk.

Installation

npm install @academy-sdk/nova

Or use as a starting point by cloning:

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

Usage

As an npm dependency

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

// 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/
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 Customized

| Page | Description | |---|---| | My Learning | Custom course grid with progress indicators | | Catalog Courses | Hero search, courses & bundles tabs, deals section | | Catalog Bundles | Bundle card grid with pricing | | Course Detail | Full course overview with curriculum | | Course Player | Video player with lesson sidebar | | Messages | Chat interface with conversation list | | Learner Settings | Settings page | | Account | Profile and preferences |

Custom Components

• CustomSidebar — Dark-themed navigation sidebar
• CustomNavbar — Top navigation bar
• CatalogSearchHero — Hero banner with search
• CatalogRecommendedSection — Course recommendations
• CatalogDealsSection — Featured deals
• CatalogPlatformCTA — Platform call-to-action

How It Works

• All data comes through props — no API calls needed
• Built on top of @academy-sdk/sdk components and contracts
• Only the view layer is customized — the platform handles routing, data, and logic
• Uses CSS custom properties for theming (dark Nova theme by default)

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