Module 50: Full-Stack Integration
Planning a full-stack feature
🏠The everyday picture
Building a new room in a house means the architect, electrician, plumber and painter agree a plan together. If the plumber puts the pipe where the electrician planned a socket, someone has to start again.
📘What it really is
- Plan each feature across the whole stack before building any part:
- user story and rules (Module 30): "As an admin, I can assign an enquiry to a staff member; staff are notified";
- data: what's stored, what changes (
assigneeId,assignedAt); - API contract: endpoint, request, response, errors and permissions, added to the OpenAPI document first;
- backend: validation, service rule, repository change, tests;
- frontend: screens, states (loading, error, empty), forms, tests;
-
done when: the requirement works in the running app, tests pass, docs updated.
-
Contract first: agreeing the API before building lets frontend and backend be built (and tested against mocks) at the same time.
-
Build in vertical slices: one feature through all layers, then the next (Module 30, Lesson 3). A half-finished backend for five features helps nobody; one working feature does.
🖱️Try it
Write a one-page plan for "assign an enquiry to a staff member" using the six steps above, including the OpenAPI change and the permission rules.
✅Quick check
Why agree the API contract before building the frontend and backend?
Show the answer
Both sides can be built in parallel against the same agreement, and mismatches are caught early.
What's a vertical slice?
Show the answer
One feature built through every layer (data, API, UI, tests) to a working state before starting the next.