Aabha React with TypeScript

Version 2026-10-14.1 · local teaching package · no publication

Start here

1. Extract the entire ZIP to a folder you own. Keep its folders together.
2. Open index.html to read the course, then syllabus.html and the entry diagnostic. The readable lessons work without installing dependencies.
3. To run the apps, install a supported Node 24 LTS release from the official Node website if needed. The project requires Node >=24.15 and <25; the verified runtime is 24.19.0 with npm 11.9.0. Read versions.html before changing versions.
4. Open a terminal in this folder, containing package.json. Run npm ci once. Initial installation requires network access to the public npm registry.
5. Run npm run dev and open the printed localhost URL. The course home and demos.html link the checkpoints. Checkpoint 01 is /checkpoints/01/; the learner project is /capstone/starter/.
6. Keep that terminal open. Ctrl+C stops the server. If the default port is busy, use the URL Vite actually prints.

Do not open runnable TSX entries directly with file:// and do not disable browser security. Serve only this course project, not a directory of personal files. The dev and preview scripts bind to 127.0.0.1, for local use.

Learn in order

Complete the HTML/CSS and Basic JavaScript foundations first. The familiar fictional Harbor Together site now becomes a component-based UI. Ten narrative modules introduce tooling, types, rendering, state, identity, forms, effects, async data, routes and tests. Thirty exercises have separate worked solutions. A diagnostic, three assessments and an independent six-milestone capstone provide evidence of progress.

Provisional planning estimate: 18 hours 10 minutes for the taught modules, plus 5–7 hours for the capstone; roughly 23–25 hours before extra setup or revision. No beginner pilot has validated these times.

Run checks

• npm run typecheck: strict TypeScript check across authored source
• npm test: completed teaching/reference tests
• npm run test:capstone: independent learner tests; initially fail because starter TODOs are unfinished
• npm run build: type-check and build the 13 demo entry pages
• npm run preview: serve that built demo output locally; open /demos.html
• python3 qa/check-content.py: optional reader links/structure check, no third-party Python packages

The build includes demos.html, ten checkpoints, the starter and reference apps plus assets/fixtures. It is not a build of every narrative course page. Read the lessons from the extracted source folder or the dev server. No hosting or website integration has been performed.

Edit safely

Each checkpoint has its own entry, while later checkpoints intentionally share modules. See code-guide.html and checkpoints/README.md for the dependency map. Copy the entire project before experiments that change shared code. Do not edit node_modules or dist as authored source. Keep package.json and package-lock.json together. npm ci recreates dependencies from that lockfile; node_modules and dist are excluded from the learner ZIP.

The capstone starter has its own model helpers and tests. Do not import completed shared answers or the reference to satisfy learner checks. Reusing the mount helper and CSS is allowed. Learner tests cover only part of the rubric; you must add behavior tests and complete the manual acceptance checklist.

Safety and scope

All events and dates are fictional. The practice form accepts only Sample learner and one to four practice places. It sends nothing and stores no form values. Only fictional event IDs can be persisted in a namespaced localStorage key. There is no backend, real registration, authentication, payment, external API or paid service.

QA limits

Dependency installation, type-checks, automated simulated-DOM tests, builds and HTTP asset checks were run; see qa/verification.html for exact evidence. A real Chromium attempt was blocked by the execution environment. Browser interaction, responsive layout, mobile devices, screen-reader acceptance, OS-specific setup and a beginner pilot remain unverified. The package provides concrete steps in qa/integration-checklist.html. Do not treat reference test success as learner completion or production certification.

Troubleshooting

Read the first precise error before changing dependencies. Check working directory and runtime version. A cache-permission error needs a writable npm cache, not administrator privileges. A network failure is different from a code failure. The missing-fixture exercise may produce HTTP or JSON-parse failure depending on server fallback. Storage belongs to the exact origin, including port. Starter test failures are intentional until its TODOs are implemented.

Source references were checked on 2026-10-14. Narratives, scenarios, examples and explanatory SVGs are original. See sources.html, versions.html and LICENSES.md. Nothing has been published.