Software concepts every vibe coder needs to know
Understand the pieces of a modern web app — servers, clients, APIs, databases, authentication, env vars, and deployment — well enough to build and ship a simple app without hitting walls or guessing
Included with every copy
- Your own copy — keep it forever
- Gets better over time — free updates included
- Run it on web and mobile
- Invite a partner to go through it with you — you share the same progress
- The playbook's community — ask questions, get additions, and see how other buyers improve it, right on the step
Who it's for
Vibe coders — people who use Cursor, Claude, ChatGPT, or Copilot to build apps but never studied CS formally. You can make things work locally but get stuck on infrastructure concepts.
Who it's NOT for
Experienced developers who already understand client-server architecture, HTTP, APIs, databases, and deployment. This is for filling gaps, not review.
About this playbook
If you use AI to generate code but hit walls the moment something goes wrong — CORS errors, 'connection refused,' database connection strings that don't work, or deploying code that runs locally but breaks in production — this playbook fills in the gaps. You'll trace a request from your browser through a server to a database and back, build a tiny API with AI, connect it to a real database, and deploy it. No jargon dump: you touch each concept with your own hands. By the end you'll recognize what each piece does, where to look when it breaks, and how to ask AI for better results because you understand what the generated code actually needs.
What you'll do, step by step
4 phases · 14 steps
Free preview — these steps are open to read in full before you buy.
Before you build anything, see what a real request looks like. Every time you load a site, your browser talks to a server, the server talks to a database, and data comes back as a response. This phase makes that invisible machine visible.
- 1Watch a request travel through your browserFree preview15 min
Open Chrome DevTools to the Network tab (Cmd+Option+I on Mac, F12 on Windows, then click Network), visit any website, and watch the list of requests populate. Each row is one HTTP request: your browser asking a server for something, and the server sending back a response.
Filter to
XHRorFetchto see only API calls (not images or CSS). Click one and look at the Headers tab — you'll see the request URL, the method (usually GET), and the response status code (200 means OK).You're done when
A browser window with DevTools open, Network tab showing a list of requests, one request inspected to show its URL, method, and status.
Tip
Filtering to XHR/Fetch hides the noise. On most modern sites, the real data comes through API calls, not the initial HTML load.
- 2Trace the full path of one page loadFree preview25 min
Draw the chain on paper or a whiteboard. Pick one request from the Network tab — say, a weather app or your social media feed. Trace:
- You type the URL or tap the app icon
- Your browser (the client) sends an HTTP GET request to a server somewhere on the internet
- The server checks permissions, then queries a database for the data
- The database returns rows to the server
- The server packages the response (usually JSON) and sends it back
- Your browser turns that response into what you see on screen
Every modern app follows this same loop. The names change — client, server, database, response — but the shape is always the same.
You're done when
A labeled diagram (photo or sketch) showing: browser/client → HTTP request → server → database query → response → browser. Upload or keep it for reference.
Tip
Don't overthink this — a stick-figure drawing with arrows is fine. The act of drawing it is what cements the mental model.
Details
What you need first
A laptop with a browser, a code editor (VS Code or Cursor), Node.js installed (LTS), and a free GitHub account. No prior backend experience needed.
Tags
What people who used it say
Only buyers who got through at least half the steps can leave a review.
No reviews yet. The first ones appear once buyers get through at least half the steps.
Common questions
About the creator
8 years of full-stack development, mentored 50+ junior engineers through bootcamps, shipped 5+ production apps
Creating since 2026
Full-stack developer who helps vibe coders understand what the code actually does. After mentoring junior engineers and watching AI-accelerated coders hit the same walls over and over, I write guides that connect the dots between what you prompt and what runs in production.