Capstone reference · Read after your first attempt

The reference is a possible implementation, not the only acceptable design. Open capstone/reference/ through the Vite server. It uses the completed shared modules introduced throughout the checkpoints. The independent starter intentionally does not import those answer helpers.

Follow the data

shared/domain.ts defines the category vocabulary and CommunityEvent shape. Its parser accepts unknown and constructs validated records, rejecting invalid fields, impossible dates and duplicate IDs. Its filtering and ID-toggle helpers are pure and can be tested without mounting React. This is the same separation your independent model should make, even if you choose different function boundaries.

Follow state ownership

IntegratedExplorer owns the selected fixture and receives load state from useEvents. Saved IDs come from useSavedEvents and sit above the routed screens. Explore screens own transient query/category controls; leaving those screens resets their filters. The saved preference survives those route changes. That is an explicit lifetime policy, not a consequence the app hides.

Follow external relationships

useEvents associates one request with one effect run and protects against obsolete success and failure. It checks response status and delegates body-shape validation. useSavedEvents reads and validates a namespaced storage preference and reports failed persistence while keeping in-memory interaction usable. It does not immediately overwrite a preference after an initial read failure. Document-title and focus work synchronize with the browser DOM.

Follow identity

Cards use stable event IDs. Saved state contains IDs, not copies of records. A detail’s practice form uses the event ID as a key so direct navigation to another event starts a new practice interaction. Unmounting and key changes are intentional resets; filtering should not accidentally erase the shared saved preference.

Follow the form

PracticeForm accepts only Sample learner and seats 1–4. Its noValidate form uses explicit custom checks. Controlled values, field errors and confirmation have distinct jobs. After validation commits error attributes, a requested focus effect directs attention to the first invalid control. Changing fields clears stale success. Reset updates React state. No fetch, form action or storage write transmits the practice values.

Follow the evidence

The completed-reference tests cover domain rules, storage, form behavior, loading/error/race cases and routes. The separate learner command imports the starter. Run both with an understanding of their targets: the initial starter failures demonstrate unfinished work, while a green reference suite only establishes reference behavior.

Compare your implementation by behavior, not by line count. You may use a different component split or preserve filters intentionally. Explain the tradeoff and test the promised result. Review the integration checklist for browser, device, assistive-technology and host-path acceptance that automated tests cannot substitute for.