portal

Public-facing albertonline.org site hosting games, a store, a blog, video courses, and coding playgrounds.

Overview

Portal is the public-facing site for albertonline.org. It is a single TanStack Start application that hosts every product served from the shared Effect v4 runtime: board games at /games (chess vs. computer or online with WebRTC video, and local International draughts), a 3D drone simulator, a store, a blog, video courses (CVM), and in-browser coding playgrounds. A Cloudflare Worker wraps the generated handler to add agent-discovery Link headers and serve a Markdown homepage via content negotiation.

Stack

TanStack Start + TanStack Router (file-based routes, code-gen route tree)
React 19 + Vite (@vitejs/plugin-react-swc)
Effect v4 (effect, @effect/atom-react, @repo/react-effect)
three.js / @react-three/fiber + drei (drone sim, 3D)
Monaco Editor + Sucrase (in-browser playground)
Remotion / @remotion/player (CVM video rendering)
react-hook-form, react-markdown + remark-gfm, gray-matter
@repo/* workspace packages (auth, design-system, chess, cvm, juice, drone, intl-runtime, form-builder, browser-persistence)
Cloudflare Workers (Wrangler), deployed via Alchemy

Develop

pnpm -F portal dev              # Vite dev server on http://localhost:3000
pnpm -F portal generate-routes  # regenerate src/routeTree.gen.ts

Test

pnpm -F portal test         # Vitest (jsdom)
pnpm -F portal test:ci      # Vitest run with JUnit output
pnpm -F portal test:e2e     # Playwright E2E (tests/e2e)
pnpm -F portal test:e2e:ui  # Playwright UI mode

Build & deploy

pnpm -F portal build   # vite build → dist/{client,server}
pnpm -F portal start   # vite preview on :3000
pnpm -F portal deploy  # build + wrangler deploy (Cloudflare Workers)
pnpm -F portal alchemy # Alchemy deployment orchestration

Deploys to Cloudflare Workers (worker.ts entry, static assets from dist/client); see wrangler.jsonc.

The Cloudflare Worker entry (worker.ts) adds agent-discovery Link headers and serves a Markdown version of the homepage via content negotiation, on top of the generated TanStack Start handler.

Structure

src/
  app/              file-based route modules (TanStack Start)
  routes/           per-product route trees (chess, drone, store, cvm, …)
  components/       landing + site-shell components
  server/           server-side proxy
  intl/messages/    localized message catalogs
  lib/              make-runtime.ts (Effect runtime wiring)
  router.tsx        router factory
  routeTree.gen.ts  generated route tree (do not edit)
scripts/            generate-routes.mjs
worker.ts           Cloudflare Worker entry (agent Link headers, MD homepage)
tests/e2e/          Playwright specs

See the apps overview and the monorepo overview.