Overview

In Parts 2 and 3, we developed a browser interface that reads API data and server operations that validate and store changes. We will now connect those operations to forms. We will first construct an HTTP mutation explicitly, then refactor its request construction to a typed Hono client while keeping the working behavior. We will also show pending feedback, preserve input after rejection, and recover when a response leaves the server outcome uncertain.

This part uses a new practice application (practice-typed-http/) for chapter examples. After a local form preview, we will develop the same notes workflow through validation, typed requests, debugging, and testing. Continue the marketplace project in the separate marketplace repository (marketplace/), applying these ideas to seller and buyer interactions.

Part structure

• Forms & Form State — Use native forms, labels, FormData, explicit submit states, and input preservation.
• Client API Modules & Mutations — Implement raw POST/PATCH/DELETE calls behind a stable component-facing API.
• Validation Across Client and Server — Use UX validation without trusting it.
• Typed HTTP Clients — Refactor the working notes operation using types inferred from its API source.
• Pending Mutations and Conflict Feedback — Preserve input and recover explicitly after rejection.
• Full-Stack Debugging & Logging — Correlate requests, inspect layer evidence, and redact logs while diagnosing failures.
• Testing Across the Stack — Compare type checks, unit/component/API/DB/E2E evidence.
• Marketplace Project: Make the Marketplace Interactive — Apply forms, typed requests, and recovery through eight cumulative marketplace milestones.
• Recap and Feedback — Reflect on the part and give feedback.

Typed HTTP APIs walking skeleton

Download the typed HTTP APIs walking skeleton, extract it to a folder called practice-typed-http, and open that folder in your editor. Keep your earlier practice/ directory. The distinct folder name gives the new application its own Compose project and database volume.

Stop the earlier practice application’s running services with docker compose down from that application’s folder. Stop the marketplace’s development services too if they are using ports 5173 and 8000. Then, from practice-typed-http/, run:

docker compose up --build

Open http://localhost:5173. The home page links to /examples/fetch and /examples/typed: complete forms that create and read notes through the same API and PostgreSQL database, using explicit requests and a typed client respectively. Create a note and reload to check that it was stored. Keep these examples for comparison, and build your chapter examples on /lab (client/src/routes/lab/+page.svelte).

To start with an empty practice database, first check that your terminal is in practice-typed-http/, then run docker compose down --volumes followed by docker compose up --build. Removing this project’s volume deletes its practice notes; startup reapplies the migration. Use the separate test-project commands for test cleanup.