Lab 5: Anatomy Teardown (Online, Self-Paced)¶

What you will learn¶

• Where code runs and data lives in a web application: the browser, the server, and the database
• How a single request travels from a click to a database and back, and how to watch it happen
• How to read an unfamiliar codebase with an agent's help and draw its architecture

There is no class meeting today. Watch the videos on Canvas, then work through the lab. If you get stuck, post in the Canvas discussion board; the instructor will check it on Tuesday and Wednesday.

Part A: Watch (about 40 minutes)¶

The videos on Canvas follow the reading. Watch them in order, and pause to try each thing shown.

Part B: Tear down a large website (25 minutes)¶

Pick a large, public site you use: an airline, a retailer, a streaming service, a news site, or gonzaga.edu. Open it in Chrome, then open Developer Tools (Cmd+Option+I on macOS, F12 on Windows) and click the Network tab. Reload the page.

Fill in labs/lab-05/teardown.md:

Then answer in two or three sentences: what surprised you about how many separate systems one page depends on?

Part C: Build and trace a full-stack app (40 minutes)¶

So far your apps kept data in the browser. This one has all three places: a browser front end, a server with an API, and a database.

1. Read the Digital Message Wall spec.

2. Make a folder labs/lab-05/message-wall, start Claude Code there, and ask:

   Build the Digital Message Wall described in the spec I am pasting below. [Paste the spec here.] Use Node.js with Express and SQLite. Explain the three layers as you build them, and tell me the exact commands to run it.

3. Run it and post three messages. Stop the server and start it again. Are the messages still there? Compare with your Lab 2 tracker: why is this different?

4. With DevTools open on the Network tab, post a message. Click the request it made and record in labs/lab-05/trace.md:
   • the request method, URL, and status code
   • the request body (what the browser sent)
   • the response body (what the server sent back)

5. Ask Claude:

   Trace exactly what happened in the code when I posted a message: which file and function in the front end ran, what request it sent, which route on the server handled it, what SQL ran, and what was sent back. Use file names and line numbers.

   Save the answer in trace.md under your DevTools notes, and check that the two agree.

Part D: Draw your own system's architecture (25 minutes)¶

Now turn the same lens on your project. Start Claude Code in your course repo and run these prompts one at a time. Read each output before running the next.

Analyze the app/ folder and save architecture/code-base-analysis.md with:
1. Every directory and its purpose
2. Which files run in the browser, which on the server, and which are configuration
3. Total lines of code, excluding node_modules
Explain it simply for someone learning how web apps are built.

Trace the data flow in my app and save architecture/data-flow.md:
1. What happens step by step when a user first loads the app
2. What happens when a user does the main action (from the click to where the data is saved and back)
3. Where data is stored today, and what would be lost if the user cleared their browser
Use specific file and function names.

Based on these two files, create a Mermaid architecture diagram in
architecture/diagram.md showing: the browser, any server code, where data is
stored, external services (Vercel, and anything else), and arrows for each
request and response. Then add a second diagram showing how it will look after I
add a Supabase database in Lab 6.

Check the diagram against what you saw in DevTools on your own deployed app. Fix anything that is wrong.

Reflection¶

Write labs/lab-05/reflection.md:

1. Explain, in your own words and without jargon, what happens between clicking "Post" on the message wall and seeing the message appear.
2. Name one thing in your own app that runs in the browser but should not be trusted there. Why?
3. What did the large site's teardown suggest about how big systems are assembled?

Turn in¶

Submit the link to labs/lab-05/ on Canvas. Check that your repo contains:

• labs/lab-05/teardown.md, trace.md, reflection.md, and message-wall/
• architecture/code-base-analysis.md, data-flow.md, and diagram.md

How larger systems do this¶

The large site you tore down is not one application. It is dozens of services owned by different teams (search, recommendations, checkout, identity, analytics), each with its own servers and databases, talking to each other through APIs, and fronted by a content delivery network that serves files from a data center near you. The three places you studied today still apply to each piece. Architects draw these systems with C4 diagrams or UML deployment diagrams, which are more formal versions of the Mermaid diagram you just drew.