# Map the Whole System

**Track:** Foundations of AI-Native Development — AI-Native Full-Stack Development — complete (30)
**Framework / surface:** web dev (systems thinking)
**Level:** Beginner
**Prerequisites:** What AI-Native Full-Stack Means

**In one line:** Browser → server → database → model → tools → external services: draw the system before asking an agent to build it.

## Theory, aesthetics & inspiration

A full-stack application is a conversation among boundaries: the browser renders and emits events, HTTP carries requests, server code applies rules, the database keeps durable facts, and in an AI-native app a model may choose a tool that calls a service that streams results back mid-response. Roy Fielding's 2000 dissertation, which named REST, modeled the discipline: derive the architecture from explicit constraints — client–server, statelessness, uniform interface — before writing code. So draw the system before asking an agent to build it, and make every arrow answer four questions: what crosses this boundary, who may send it, where does state live, what happens when the call fails. That habit prevents the signature failure of agent-generated software — locally plausible files that do not form a coherent system — and it keeps secrets and consequential writes on the trusted side of the map even when the framework makes both sides feel syntactically identical.

**Builder question:** Can you draw every important boundary in your application and identify the state and authority on each side?