Project Shape: Frontend + API + Database + AI Feature

Why this matters

Students often mix UI code with secret keys and put SQL inside React components. That breaks deploy and security. A clear project shape lets you add the AI feature without rewriting everything.

What you will learn

You will define folders (web, api, db notes), the happy-path request (button click → API → DB and/or AI → JSON → UI), and a tiny India example: “Shop FAQ chat” for a fictional kirana / apparel store.

How to do it

We write a one-page architecture note. No heavy frameworks beyond what Volume 1 already chose.

Steps (do these in order)

1. Step 1 — Create three folders on paper. web/ (UI), api/ (routes), docs/ (README + env example). Database can be Docker Postgres or a free cloud Postgres later.
2. Step 2 — Write the happy path. User types a question → UI POSTs to /api/ask → API checks length → optional DB lookup of FAQ rows → AI summarises or answers → API returns { answer } → UI shows it.
3. Step 3 — Define one table. faqs(id, question, answer, updated_at). Even if chapter 5 builds Postgres for real, name the table now.
4. Step 4 — Env example (no real secrets). In docs/.env.example list DATABASE_URL= and AI_API_KEY= with fake placeholders. Never commit real keys.
5. Step 5 — India sample content. Write three FAQ rows about delivery in Pune, COD, and return policy — fictional store, clear language.

Practice

• Sketch the sequence diagram in six boxes (user, UI, API, DB, AI, response).
• Write the JSON body for POST /api/ask with one field: question.