The question: After a click, where is the data processed, who receives it, and what does the user see when something fails?
Before you begin: Understand data structures and core processing functions. Read Web fundamentals before attempting an entire full-stack course.
- 01User event
- 02Local state
- 03Mock request
- 04Visible feedback
Concepts and learning objectives
Distinguish four execution locations: browser, server, database and external model. Learn methods, status codes, JSON, timeouts and asynchronous handling. Interfaces need empty, loading, success and error states. Learn only the React components, props, state and events required for this task.
The browser alone may be sufficient for the local planner. Add a backend only for a concrete reason. Browser environment variables and build output cannot conceal API keys. Authentication and permissions are not a matter of displaying a button. Use mock APIs before connecting accounts.
Reading and selected sections
| Priority | Source and selected sections | Budget |
|---|---|---|
| Required | R32 · MDN — Overview of HTTP — Requests, responses, clients and servers. | 35 min |
| Required | R29 · React — Quick Start — Components, rendering data, events and state; build a minimal form. | 50 min |
| Foundation | R22 · Full Stack Open Part 0 — Fundamentals of Web apps — Browser/server interaction and the network panel. | 35 min |
Studio lab
- Build a page with only necessary fields, reusing pure functions and tests. Walk through one common task using synthetic input.
- Inspect a request in the browser network panel. Explain method, path, status and body. If nothing is sent, establish that from observation.
- Simulate a slow response, offline operation, a server error and malformed data. Show an actionable recovery message. Prevent accidental repeated clicks while recognising that server-side deduplication is still needed.
- Render user and model content as text. Do not trust arbitrary HTML merely to support Markdown. Check keyboard access, labels and error placement.
- Draw the data flow: local fields, transmitted fields and retention. Remove unnecessary requests and third-party components.
Deliverables and acceptance
| Deliverable | Evidence of completion |
|---|---|
| Minimal interactive page | All four states can be demonstrated and the core flow works by keyboard. |
| Data-flow explanation | Trace an input through the interface, processing and output. |
| Boundary checks | No secrets in the page or build; untrusted content cannot execute as HTML. |
Independent exercise: Add an error state or extract a long event handler into a testable function. Describe the trigger first.
Privacy and safety: CORS is not authentication, and a hidden button is not authorisation. Use controlled Markdown rendering; see R63. Identify the exact step when data leaves the device.
Everyday use: Put the tool somewhere you naturally open, such as a bookmark. Reminders cannot compensate for an unnecessarily difficult workflow.
Pass or revisit: Explain observed requests and demonstrate failure paths. A screenshot alone does not demonstrate understanding.
A reusable collaboration prompt
Connect existing pure logic to a minimal page. Add empty, loading, success and error states using synthetic input and a mock API. Explain each network request and let me independently add one error handler. Avoid a new large architecture.
Sources and verification scope
Reference IDs and scope follow the supplied manuscript, baseline 2026-09-27. External authenticated labs were not all completed; recheck versions and access before implementation.
- R22Full Stack Open Part 0 — Fundamentals of Web apps ↗
Part entry; select current sections, not assumed stable exercise numbers.
- R29React — Quick Start ↗
Components, data, events and state.
- R32MDN — Overview of HTTP ↗
Browser, server, request and response foundations.
- R63OWASP — Cross Site Scripting Prevention Cheat Sheet ↗
Output encoding, trusted templates and untrusted HTML.