The Full Stack — Top to Bottom
You see the frosting. Underneath is the sponge, the filling, the pan, the oven, the kitchen. This is the kitchen. Click any layer to open it. Click any ingredient to learn what it does.
The browser renders HTML, CSS, and JavaScript into the pixels you see. This is the dining room: beautiful, curated, designed. Everything you interact with — buttons, text, images, forms — lives here. But the dining room doesn’t make the food.
JavaScript frameworks that turn data into interfaces. This is the chef’s prep station — where raw ingredients become the dish the guest will see. React, Svelte, Vue: different ways to build the same thing.
The kitchen nobody sees. It receives requests, runs logic, queries databases, calls other services, and sends responses. The quality of the backend determines how fast, reliable, and scalable the whole product is.
Where information lives. Every user account, post, photo, and transaction is stored here. The choice of database determines query speed, storage capacity, and data organization.
The physical and virtual foundation. Servers in a data center. Networks routing packets. Containers packaging software so it runs identically everywhere. You rent this instead of building it.
AI weaves through every layer now. It runs in the backend (an LLM answering questions), in the database (vector search), and in the toolchain (Claude writing the code). This layer is not separate — it cuts vertically through all the others.
The layers above are the ingredients. These diagrams show how they wire together in a real system.
When you type a URL and hit Enter, dozens of systems collaborate in under a second to deliver a page. This diagram maps the major pieces and how they connect — read it top to bottom, starting with you.
When you type a URL and hit Enter, dozens of systems collaborate in under a second to deliver a page. This diagram maps the major pieces and how they connect — read it top to bottom, starting with you.
Every web application has two sides: the part that lives in your browser (frontend) and the part that lives on a server somewhere (backend). Understanding which side of this line something lives on is one of the most important mental models in tech.
Every web application has two sides: the part that lives in your browser (frontend) and the part that lives on a server somewhere (backend). Understanding which side of this line something lives on is one of the most important mental models in tech.
When you type a URL into a browser and hit Enter, it feels instant. But a lot is happening under the hood — your request bounces through multiple systems before the page appears.
When you type a URL into a browser and hit Enter, it feels instant. But a lot is happening under the hood — your request bounces through multiple systems before the page appears.
Writing code is only half the job. Getting that code running on the internet is the other half. Modern platforms like Netlify and Vercel have compressed what used to be a multi-hour DevOps process into a git push — but understanding what's happening in that pipeline matters.
Writing code is only half the job. Getting that code running on the internet is the other half. Modern platforms like Netlify and Vercel have compressed what used to be a multi-hour DevOps process into a git push — but understanding what's happening in that pipeline matters.
This diagram is the one that earns its place — it shows the architecture of the very page you are reading. Everything in this diagram is a real technology choice made in this codebase.
This diagram is the one that earns its place — it shows the architecture of the very page you are reading. Everything in this diagram is a real technology choice made in this codebase.