Module 50: Full-Stack Integration
The demo
🏠The everyday picture
An architect presenting a finished house walks the client through it as they'll live in it: front door, kitchen, bedrooms, how the locks work, not a tour of the foundations.
📘What it really is
- A good demo of a full-stack app:
- the problem in one or two sentences, and who it's for;
- a real journey, as a user: sign in, see what needs attention, act on it, see the result;
- roles: the same thing as staff and as admin;
- what happens when things go wrong: invalid input, no permission, server down, shown calmly;
- under the hood, briefly: the architecture diagram (React, API, storage), the tests, security measures;
-
limits and next steps (Level 5 brings a real database).
-
Prepare demo data that tells a story (realistic names, a mix of statuses), and reset it before each demo.
- Practise: demos fail at the worst moment. Have a recording as a backup.
- Be ready to explain and change any part, as in Level 3 (Module 30, Lesson 5).
🖱️Try it
Draw a simple architecture diagram (boxes and arrows: browser, React app, API, storage, email). Prepare demo data. Record a five-minute demo following the six steps, and watch it back once, noting one thing to improve.
✅Quick check
Why show failures in a demo?
Show the answer
Handling errors well is part of quality; showing it builds confidence that the app is reliable.
Why prepare and reset demo data?
Show the answer
Realistic, consistent data makes the story clear, and resetting avoids surprises from earlier runs.