An independent React, TypeScript, and Vite app for interactive architecture tutorials. All runtime code and assets are contained in this repository; no sibling project is required to install, build, run, or test it.
Use Node.js 22.19 or later in the 22.x series, or 24+, and npm 10.9.3+.
npm ci
npm run devVite’s development URL is http://localhost:5173. Open the tutorial directly at #/chapters/core-architecture/1.
To serve a production build on the preview/test port:
npm run build
npm run preview -- --host 127.0.0.1 --port 4174 --strictPortThe preview URL is http://127.0.0.1:4174. This separate port avoids conflicts with the earlier tutorial app.
Install the Chromium browser once for Playwright:
npx playwright install chromiumRun the project checks:
npm run lint
npm run typecheck
npm run build
npm test
npm run format:checkPlaywright starts or reuses the app at 127.0.0.1:4174 and covers desktop/mobile navigation, the diagrams, and interactive outcomes. Keep that port available for this project. Use npm run test:ui for the interactive test runner.
- Authored source: the exact lesson examples and interaction requirements.
- Chapter 1 art direction: layout, styling, motion, teaching simplifications, and review criteria.
- Contributor instructions: scope and implementation guardrails.
Chapter metadata lives in src/chapters/chapter-01.ts; chapter registration and shared types live alongside it. Native scene components live in src/components/, and browser checks live in tests/. The chapter uses core-architecture as its stable route id.
The canvas uses a fixed 2560 × 1440 design space scaled uniformly to fit the viewer. Labels remain editable native text. Fees are omitted from the examples for clarity, and account labels 123/456 are simplified; neither implies fee-free Core requests or usable account numbers. Optional Core/DBDC and image-reference links in the art-direction document provide author context only and are not build or runtime dependencies.