Part 3 — HLD + Meghna FE/BE flow (architect cut)
Who: Claude Part 3. Audience: Architecture talk (Part 3 NATURAL) · on-camera slides. Label: PROTOTYPE visuals · not Quantic submit. No FR/NFR IDs on the diagrams. On camera: cafe.artof.link = MSAIE staging (temporary — not production forever). Avoid “weekend Lightsail.” Prefer these for the architect dual-env cut. Older as-is HLD / AWS staging HLD stay on Stack as history / probe archive.
Folded into Stack. Deploy table: Local vs AWS. Pack index: Parts 3–5 materials. Part 4 companion: Coding overview. ID map: Handoff mapping — not spoken on camera.
Honesty (diagrams)
- MSAIE staging at
cafe.artof.linkon camera. Off-camera ops (Lightsail / Caddy / tip73d202d) live on Local vs AWS. - Home / Gallery / Menu read the freeze at build (
@shared/freeze.json). They do not callGET /api/menufrom the frontend. - Booking =
GET /api/slots?date=thenPOST /api/reservations. Full book → 409. Fail-closed without Postgres. - Newsletter =
POST /api/newsletterstore-only (do not claim outbound SES). - Staging database is on-box Postgres (MSAIE staging) — not a shared RDS.
- These SVGs are PROTOTYPE visuals — not the Quantic submit film.
Index
| # | Visual | Title | Spoken cue (one line) |
|---|---|---|---|
| 1 | SVG · 720 PNG | Local setup (dev) — HLD | “Local on the developer machine — Vite, Flask, Postgres — iterate without touching the shared demo.” |
| 2 | SVG · 720 PNG | MSAIE staging — HLD (cafe.artof.link) | “MSAIE staging at cafe.artof.link — same design, shared HTTPS proof. Knowledge is a separate hostname.” |
| 3 | SVG · 720 PNG | Meghna demo path — frontend / backend | “What Meghna clicks vs what hits Flask — static pages from freeze; booking through slots and reservations.” |
| 4 | SVG · 720 PNG | Coding overview (Part 4) | “Forms → API → modules → Postgres. Freeze for static pages; booking through slots + reservations.” |
1. Local (hld-local)
cts-ai box: Frontend (Vite / React+JSX) → Backend (Flask :5000) → Data (local PostgreSQL). freeze.json sits under both FE and API. Fail-closed without DB; full book → 409. Coding and iteration — not the shared demo URL.
Fallback raster: hld-local-720.png.
2. MSAIE staging (hld-aws-msaie)
Speakable title: MSAIE staging at cafe.artof.link. Browser → DNS/TLS → Flask + built SPA → on-box Postgres (MSAIE staging) — not a shared RDS. Knowledge Pages (knowledge.cafe.artof.link) is a separate column — two hostnames, two jobs. Same key API routes as local. Newsletter store-only. Dashed / out of cut: ELB wildcard · permanent hosting (Future). Off-camera ops line: tip 73d202d.
Fallback raster: hld-aws-msaie-720.png.
3. Meghna FE / BE (flow-part2-fe-be)
Click path: Home → Gallery → Menu → Reservations (+ newsletter optional). Ends with a handoff to Architecture (Part 3).
Fallback raster: flow-part2-fe-be-720.png.
| Step | Frontend | Hits Flask? | Data |
|---|---|---|---|
| Home / Gallery / Menu | React pages | No /api/menu from FE — @shared/freeze.json (+ menu-presentation) at build | freeze · images via GET /images/… |
| Reservations | Booking form | GET /api/slots?date= → POST /api/reservations | Postgres customers/reservations · 409 if full |
| Newsletter (optional) | Footer form | POST /api/newsletter | Postgres store-only |
| Operator | not Meghna path | GET /api/operator | read-only helper |
The diagram also lists the full Flask surface (/api/health, /api/menu, /api/site, …) so Architecture can point at exposed routes without inventing FE arrows.
Flask routes (main) — quick legend
| Method | Path | Role | |
|---|---|---|---|
| GET | /api/health | DB ping | |
| GET | /api/menu | freeze menu (API; FE Menu page imports freeze) | |
| GET | /api/site | freeze site fields | |
| GET | /api/slots?date= | reservation slots | |
| GET | /api/availability | remaining tables | |
| POST | /api/reservations | create · 409 full · fail-closed | |
| POST | /api/newsletter | store-only until SES | |
| GET\ | POST | /api/newsletter/unsubscribe | unsubscribe API |
| GET | /unsubscribe | unsubscribe page | |
| GET | /api/operator | read-only helper | |
| GET | /images/<path> | allowlisted images | |
| GET | / · /<path> | SPA catch-all |
No FR/NFR IDs on the diagrams.
Related
- Local vs AWS — local vs MSAIE staging table
- Part 3 natural script — diagram callouts
- Parts 3–5 materials — pack index
- Part 4 coding overview — forms · functions · FE · BE · API · DB
- Stack — four new diagrams + older HLDs as history
- History / probe archive: as-is SVG, AWS staging SVG
Packed 2026-09-06 Europe/Berlin · PROTOTYPE · architect cut HLD trio + Meghna FE/BE honesty (freeze vs API).