An interactive, commercial web app for UK construction training providers. Delegates choose one of five project scenarios and work through a realistic site set-up lifecycle, making safety decisions that shape the visible site layout, the project risk profile, a generated Construction Phase Plan (CPP) and a final score benchmarked against ideal CDM 2015 controls.
Built with Next.js (App Router) + TypeScript, Supabase (Postgres + Auth + RLS), Stripe (subscriptions) and Tailwind CSS.
- User login (Supabase Auth).
- Roles: delegate, trainer, admin (enforced by RLS).
- Five selectable project scenarios.
- Stage-by-stage decision engine.
- Each decision carries choice text, safety impact, legal/compliance impact, score effect, explanation and a layout effect.
- Auto-generated Construction Phase Plan draft.
- Final score report comparing the delegate's choices against ideal controls.
- Downloadable PDF report (score + CPP).
- Trainer dashboard of delegate scores.
- Admin area to edit scenarios, stages, decisions and scoring.
npm install
npm run dev # http://localhost:3000 — works in DEMO MODE with no keysDemo mode: with no Supabase env vars set, the app serves the five seed
scenarios from content/scenarios.json, the game is fully playable, the report
and PDF work, but auth/persistence/admin/billing are disabled.
- Create a Supabase project. In the SQL editor run, in order:
supabase/migrations/0001_init.sqlsupabase/migrations/0002_policies.sqlsupabase/seed.sql
- Copy
.env.example→.env.localand fill in:NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_ANON_KEY,SUPABASE_SERVICE_ROLE_KEYSTRIPE_SECRET_KEY,STRIPE_WEBHOOK_SECRET,NEXT_PUBLIC_STRIPE_PRICE_ID,NEXT_PUBLIC_SITE_URL
- Point a Stripe webhook at
/api/stripe/webhook(events:checkout.session.completed,customer.subscription.updated|deleted). npm run dev.
Seed content is authored in scripts/build-content.mjs (single source of truth).
After editing, regenerate both the app fallback and the DB seed:
npm run build:content # → content/scenarios.json + supabase/seed.sqlAdmins can also edit scenarios/stages/decisions/scoring live in the Admin area.
| script | purpose |
|---|---|
npm run dev |
start dev server |
npm run build / start |
production build / serve |
npm run typecheck |
TypeScript check |
npm run build:content |
regenerate seed content |
See docs/: architecture, database schema, user journeys, file
structure and the MVP build plan.
For training purposes only — not a substitute for professional safety advice or a project-specific Construction Phase Plan.
