LearnHouse Headless Examples

Reference frontends that talk to a single LearnHouse instance through its public API. Each example is a distinct user-facing theme sharing the same courses, chapters, and activities — showing how a headless LearnHouse can power very different experiences without changing the backend.

Included themes:

Theme	Vibe
kids	Playful, colorful learning portal for younger audiences.
mobile	Phone-shell mock demonstrating a compact mobile layout.
retro	80s terminal / vaporwave treatment.
luxe	High-end editorial look.
vr	Apple Vision Pro-inspired spatial UI: a cozy living room rendered in Three.js with the site projected onto a floating glass pane.

Getting started

Requires Node.js 20+ and Bun (or npm/pnpm/yarn).

# 1. Install deps
bun install

# 2. Configure environment
cp .env.example .env.local
# then edit .env.local with your LearnHouse API URL, token, and org info

# 3. Run the dev server
bun dev

Open http://localhost:3000. The landing page is a portal listing every theme; each theme route (e.g. /vr, /mobile) pulls the same course data from your LearnHouse API.

Environment variables

See .env.example for the full list. At minimum you need:

• LEARNHOUSE_API_URL — your LearnHouse backend
• LEARNHOUSE_API_TOKEN — API token for server-side calls
• LEARNHOUSE_ORG_SLUG / LEARNHOUSE_ORG_UUID — the org whose content is displayed
• NEXT_PUBLIC_EMBED_URL — frontend origin used for activity embeds

Project layout

src/
  app/
    page.tsx              Landing portal linking to every theme
    [theme]/              Dynamic theme route (courses list, course detail, activity)
    themes/               Per-theme CSS (kids.css, vr.css, ...)
  components/
    theme-shell.tsx       Chrome that wraps every themed page
    courses-grid.tsx      Catalog view
    course-detail.tsx     Course detail view
    activity-view.tsx     Activity/lesson view
    vr-scene.tsx          Three.js + CSS3DRenderer scene for the VR theme
  lib/
    api.ts                LearnHouse API client
    themes.ts             Theme metadata (name, tagline, colors, ...)

Notes on the VR theme

vr-scene.tsx uses THREE.WebGLRenderer to paint a cozy living room and CSS3DRenderer to project the actual site DOM onto a floating glass pane at eye level. Drag the empty room to look around, scroll over it to zoom, and interact with the pane (scroll courses, follow links) as you would in a normal browser.

License

MIT.