Aabha · Frontend foundations

React with TypeScript · Harbor Together

Local integration and acceptance checklist

Status at package handoff: these are required manual checks, not claimed passes. A real browser could not launch in the authoring environment. Use synthetic data and a disposable local course origin. Record date, OS, browser/version, viewport, zoom, tester, exact URL, steps, expected result, actual result and any issue ID.

Setup and reader

  1. Extract the ZIP on a learner machine. Open index.html without a server. Read two lessons, open a diagram, an exercise and its separate solution. Expected: useful text and local navigation without network dependencies.
  2. Follow README exactly from a fresh folder with supported Node 24. Run npm ci, typecheck, reference tests and build. Expected: no undocumented global tool or editor extension. Record any OS-specific installation issue.
  3. Start dev with npm run dev. Open the printed origin, not an assumed port. Expected: course reader and each checkpoint link work. Stop with Ctrl+C and confirm the process ends.
  4. Read at 200% and 400% zoom and a narrow viewport. Expected: prose reflows, focus stays visible, diagrams fit their containers and code scrolls without hiding surrounding prose. Check print output separately.

React checkpoints

  1. Check 01–03: heading changes after editing source; numeric/string prop mismatch is caught by typecheck; valid, empty and invalid runtime values produce the documented results. A malformed imported JSON failure is a build failure, distinct from the fetched case in 08.
  2. Check 04: search garden, a padded uppercase equivalent and a nonmatching term; combine each with category. Expected: cards and counts agree, typing retains focus, clear search preserves category.
  3. Check 05: save an event, hide/show it with filters, reorder a copied list and unsave it. Expected: identity follows IDs and saved state survives visibility changes. A locally expanded card may reset after actual unmounting.
  4. Check 06: keyboard-only empty submit, exact Sample learner with two places, edit-after-success and reset. Expected: useful associated errors, first-invalid focus after feedback exists, honest no-send confirmation, stale success cleared, controlled fields reset. Network must show no form submission.
  5. Check 07: save/reload/clear/reload on the same origin. Expected: only the namespaced ID preference changes. Deliberately corrupt only that key, reload and observe recovery. A blocked read must not trigger an immediate silent overwrite; blocked writes must leave tab-only interaction usable. Restore the test key afterward.
  6. Check 08: normal, empty, malformed, wrong-shape and missing fixtures. Expected: distinct loading, success-empty and error states; retry can fail again; changing back to normal recovers. Record whether missing fixture fails by HTTP or JSON fallback on this server.
  7. Throttle local loading if the browser supports it and switch fixtures rapidly. Expected: obsolete success or error never replaces the selected fixture. This complements deterministic automated ordering tests rather than replacing them.

Routes and integrated app

  1. On 09 and 10, copy a known detail URL into a new tab, refresh, and use Back/Forward. Try an unknown event ID and unmatched path. Expected: correct heading/title, meaningful focus and recovery. Loading data must not be mistaken for missing data.
  2. During loading on a direct detail fragment URL, activate Skip to content. Expected: focus moves without replacing the hash route with #content. The eventual screen remains the requested event.
  3. Save on an explorer screen and inspect Saved and detail screens. Expected: shared pressed state. Unsave the last visible saved card or clear the saved list. Expected: focus lands on a meaningful remaining control/heading rather than disappearing with the removed button.
  4. Complete a practice confirmation for one detail, then navigate directly to another detail. Expected: previous participant/confirmation does not become the new event’s practice result. Form data must not appear in URL, storage or requests.
  5. Confirm the documented filter lifetime when navigating away and back. The reference resets screen-local filters after unmounting. If integrating a changed policy, update both explanation and tests.

Build and host integration

  1. Run build and preview; open /demos.html. Test all ten built checkpoints and both capstone entries. Expected: assets and fixtures load from their built paths. The narrative reader is supplied separately and is not part of this demo-only build.
  2. Before eventual website integration, test the exact hosting subdirectory/base path and direct detail refresh. Check content security policy, MIME types and asset paths. Do not publish as part of this checklist without separate authorization.
  3. Run a current keyboard and screen-reader journey: landmarks, headings, labels, field errors, status announcements, pressed states, route changes and skip behavior. Test at least one mobile/touch browser and real narrow device. Automated jsdom checks do not certify these.
  4. Pilot at least two modules and a capstone milestone with beginners who meet the entry prerequisites. Observe confusion, setup time, independent completion and misuse of solutions. Revise pacing and explanations before relying on the provisional 23–25-hour estimate.

Acceptance record

Do not replace “not run” with “pass” because an automated test covers related code. Record evidence per check. Fix material failures, rerun the affected journey and the relevant automated suite, and retain the previous failure record. The target is a reviewable teaching prototype; production security, real registrations and legal/privacy design remain outside this course.