Updated Readme to reflect current setup

block-01/week-01-the_web_under_the_hood/demo/README.md

@@ -1,33 +1,61 @@
 # Demo — Inspecting HTTP Traffic
 
-This demo runs a minimal Express server that echoes back everything it receives — method, headers, body. Use it to see what a real HTTP request looks like from the server's perspective.
+This demo runs a minimal Express server that echoes incoming requests (method, URL, headers, body) and exposes several small pages and endpoints you can use to explore HTTP behavior from both the browser and command line.
 
-## Setup
+## Quick setup
+
+Install dependencies and start the dev server:
 
 ```bash
 npm install
-node server.js
+npm run dev
 ```
 
-Server runs on `http://localhost:3000`.
+The server listens on http://localhost:3000.
 
-## What to see
+## What this demo provides
 
-1. Open `http://localhost:3000` in the browser — see the GET request in DevTools Network tab, then see the same info echoed in the terminal
-2. Submit the form at `http://localhost:3000/form` — see the POST body appearing both in DevTools and in the terminal
-3. Use curl to send a raw request and compare it to what the browser sends:
+- A root page that shows the server's view of a GET request.
+- A simple HTML form at `/form` that submits a POST and shows the server-echoed body.
+- Endpoints and pages demonstrating status codes, delayed responses, and cookie handling (`/status`, `/status-code`, `/delay`, `/set-cookie`, `/show-cookie`).
+- Example static pages and client scripts in `src/` and HTML partials in `src/partials` used to demonstrate injection and client behavior.
+- The server implementation in `server.ts` that logs each request and returns an echo response.
+
+## Walkthrough — what to try
+
+1. Open http://localhost:3000 in the browser. In DevTools → Network inspect the GET request, then look at the server terminal to see the same information echoed.
+
+2. Visit http://localhost:3000/form, fill it out, and submit. Observe the POST body in DevTools and the server log.
+
+3. Compare browser requests with curl. Example commands:
 
 ```bash
 # Basic GET
 curl -v http://localhost:3000
 
-# POST with a body
+# POST with urlencoded body
 curl -v -X POST http://localhost:3000/login \
   -H "Content-Type: application/x-www-form-urlencoded" \
   -d "username=user&password=1234"
 
-# See response headers only
+# POST with JSON body
+curl -v -X POST http://localhost:3000/api/json \
+  -H "Content-Type: application/json" \
+  -d '{"name":"alice"}'
+
+# See only response headers
 curl -I http://localhost:3000
 ```
 
-4. See a `Set-Cookie` header by visiting `http://localhost:3000/set-cookie`, then show the cookie being sent back on the next request
+4. Visit `/set-cookie` to see the server send a `Set-Cookie` header, then visit `/show-cookie` (or reload a page) to see the cookie sent back to the server.
+
+5. Try `/delay` and watch how the browser and curl behave while the server delays its response. Use this to observe timeouts and loading indicators.
+
+6. Open `/status` and `/status-code` endpoints to see different HTTP response codes and how clients report them.
+
+## Files of interest
+
+- `server.ts` — the Express server and request-echo logic.
+- `src/form.html` and `src/form.ts` — the example form and client script.
+- `src/status.html` and `src/status.ts` — status-code examples.
+- `src/partials/` — HTML partials injected into pages by the demo plugin.

block-01/week-01-the_web_under_the_hood/demo/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "tsx watch server.ts",
-    "build": "tsc server.ts --outDir dist",
+    "build": "tsc server.ts",
     "start": "node dist/server.js"
   },
   "devDependencies": {

block-01/week-01-the_web_under_the_hood/demo/tsconfig.json

@@ -1,23 +1,31 @@
 {
   "compilerOptions": {
     "target": "es2023",
-    "module": "esnext",
-    "lib": ["ES2023", "DOM"],
-    "types": ["vite/client"],
+    "module": "NodeNext",
+    "lib": [
+      "ES2023"
+    ],
+    "types": [
+      "node",
+      "vite/client"
+    ],
     "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
+    /* Server + Vite middleware specific */
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
+    /* Keep TS as a type checker only (no emit) when running via ts-node/vite) */
     "noEmit": true,
-
     /* Linting */
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
-}
+  "include": [
+    "src",
+    "server"
+  ]
+}