Vibe Coding 101

Build & Ship Your First App

Welcome to Beyond Vibe Coding! Who this course is for (spoiler: you), who Brian is, and how this whole thing works.

Introduction

Setup

Let's Look at Your Code

Welcome

Visual Studio Code

HTML

More HTML Tags

HTML Project

A Whirlwind Tour of CSS

CSS Project

Generate a CSS Project

The theater analogy pays off: JavaScript is the actors performing your page live. Brian introduces what code actually is, the browser console as your rehearsal space, and your first script tag.

The Actors Arrive

Brian covers the kinds of things JavaScript can put in its labeled boxes — numbers, strings, booleans, and the infamous undefined — plus how to read const, let, and the backtick strings agents love to write.

Values and Variables

How code makes decisions and repeats itself. Brian covers comparisons, if/else, the ternaries agents love to squish things into, and for and while loops — with an emphasis on reading them at a glance.

Control Flows and Loops

Functions are how code gets a name. Brian covers defining versus calling, parameters, return, arrow functions (the costume agents prefer), and just enough scope to read confidently.

Functions

Data has shape. Brian covers objects (labeled compartments), arrays (numbered lists), the dots and brackets you use to reach inside them, and the reveal that you've secretly been learning to read JSON — the format every API speaks.

Objects and Arrays

Before we crack open the calculator's code, we need a way to get code — and a safety net for changing it. Brian introduces repos, git versus GitHub, cloning in VS Code, and the single most important habit in AI-assisted coding: commit before you let the agent loose.

git and GitHub

The lesson the whole section has been building toward: what the DOM is, how events work, and a guided read of the real calculator — tracing one button press from click to screen.

The DOM and Events

The section project: build Mad Libs from a blank file with your own hands — inputs, a button, a story — then commit it and hand the tedious parts to your assistant. The first-principles sandwich, fully assembled.

The Project

Homework: prompt your AI assistant to build Tinder for pets — and practice writing a spec, constraining the tech, and reading what comes back. Keep the repo when you're done; it gets superpowers later in the course.

Tinder for Pets

JavaScript

Every app you'll ever build talks to the internet within its first ten minutes of existence. Brian covers fetch, async and await, GET versus POST against a real live API, and the Network tab — your new flashlight.

Calling an API

The promised upgrade: your pet app's fixed guest list becomes a live API. Rehearse the endpoint in the console, prompt the modification, read what changed — and for the ambitious, there's a Wordle-shaped bonus.

Project Infinite Pets

Bonus Round

Talking to Servers

The colons are labels. Brian covers how to read TypeScript without learning to write it — types as documentation you can trust, the squint rule, why agents love the stuff, and what to do when the red squiggles come for you.

Reading TypeScript

The biggest reading upgrade in the course: what React is, why every generated frontend uses it, and how everything in it — components, props, useState, onClick — is something you already know wearing a new costume.

JSX and React

Generated components come with a wall of tiny words in every className. That's Tailwind — Brian covers how to read utility classes by grammar instead of memorization, why agents adore the approach, and where all the actual CSS went.

Tailwind

The section finale where every hang-on-until-later gets answered: what a build step is, why generated projects all have one, src for humans versus dist for browsers, and the tells that let you recognize — and start — any built project you're handed.

The Build Step

The pet app rides again — same app, third form, React all the way down. A prompted rebuild with the training wheels off: TypeScript, Tailwind, and a build step welcome, because now you can read all of it.

Project Pet Tinder in React

A bonus build for the ambitious: a weather dashboard in React, featuring the course's first chained API calls, a controlled search input, and a lookup-table puzzle. Different muscles than pet-swiping — search, forms, and requests that feed each other.

Project Weather Dashboard

Frontend Apps

JavaScript escapes the browser. Brian covers what Node actually is, the reveal that you've been using it all along, npm's fuller story, and the headline skill of the section: reading terminal output and stack traces without flinching.

Node.js and npm

From five lines of vanilla Node to Express, with the reveal the course has been building toward: the words API you've been calling all along is a couple dozen lines of exactly this. Routes are just if-statements for URLs.

Your First Node.js Server

The grammar behind nearly every API: URLs as nouns, methods as verbs, and one endpoint meaning several things depending on how you ask. Plus Bruno, a friendly GUI for poking at APIs — and the truth that these are conventions, not laws.

REST

The lesson the section has been building toward: why a secret can never live in frontend code, how servers keep keys, what .env files are, and the one mistake that costs real money — plus Brian calls OpenAI on camera so nobody else has to pay.

Secrets and Environment Variables

Server-Side Code

Your API forgot everything when it restarted; here's the fix. Brian covers what a database conceptually is, SQLite versus the server-shaped databases like Postgres, just enough SQL to recognize it, Drizzle as your ORM of choice, and the thirty-second version of migrations.

Databases

You've logged into a million sites; time your site could do that. Brian covers the two words hiding inside 'auth', why you never hand-roll it, Better Auth as the open-source pick, how logging in actually works, and the bouncer's hallway where it all runs.

Auth

Your app exists on a laptop that closes. Brian covers where software actually lives: static hosts, server hosting, serverless functions (surprise: you've been calling one all along), platforms like Replit that bundle everything — and the one anatomy every rented service shares.

Hosting

The pet saga's final act: your React app gets its own backend, real user accounts via Better Auth, and a memory via Drizzle and Postgres. Likes that survive restarts, logouts, and anything else — plus the longest trace of the course.

Project Tinder Pets Forever

Infrastructure

Your assistant has been words-in, code-out this whole course. MCP gives it hands and eyes — the ability to actually check your GitHub, read your server logs, and operate your infrastructure. Brian covers what it is, how to wire it up, and the one thought experiment that keeps it safe.

The promissory note from the git lesson, cashed: push, branches, and pull requests — which turn out to be the native workflow of coding agents. Brian covers the cloud half of git, the PR as a diff review at repo scale, and your first agent-opened pull request.

GitHub for Real

The destination lesson: a 1,500-line full-stack codebase you've never seen, read end to end. Brian draws the full where-code-runs map, formalizes the five-stop walk order, and tours the Family Recipe Box — strangers, joins, and all.

Reading a Codebase

The museum becomes a workshop: a ten-question scavenger hunt through the recipe box (no assistant allowed), then a real feature added to code you didn't write — forked, branched, PR'd, and reviewed like you own it. Because now you do.

Project Stranger's Code

Putting It All Together

Debugging is the other half of building, and it runs on a loop you can learn. Brian covers what a bug actually is, the reproduce-first doctrine, the two questions that triage everything — and formally assembles the famous-errors catalog you've been collecting all course.

How to Think About Bugs

Debugging as a two-player game. Brian covers why spamming 'fix it' at an agent is intellectual junk food, what a great bug report actually contains (hint: you don't need the diagnosis — you need the gap), when to let the agent drive, and how to tell a real fix from a bandage.

Debugging with an Agent

The best debugging session is the one that never happens. Brian covers the proofreader family — Prettier, ESLint, and your old friend tsc — plus unit tests as tripwires, end-to-end tests for the flows that matter, and the Playwright MCP that lets your agent verify its own work in a real browser.

Preventing Bugs

The most realistic project in the course: a bug backlog — seven user-filed tickets against a codebase you know, no stack traces, no hints. Reproduce, diagnose, fix on a branch, leave a tripwire on every grave — and burn the backlog down like the professional you've become.

Project Bug Backlog

Debugging

The graduation build begins — with no code at all. Brian covers what makes an idea capstone-shaped, three blessed project ideas plus the build-your-own checklist, the spec process at full ceremony, and the constitution you commit before the first line exists.

The Spec

Nothing new to learn — everything to apply. Brian coaches the build: the per-milestone rhythm, what to do with mid-build ideas (file them, don't chase them), the wobble protocols for when it goes sideways, and the mid-build audit that keeps a codebase honest.

The Build

Ship day. The agent provisions production itself — and you understand every step, because you once did them by hand. Brian covers the pre-flight, the three classic first-deploy failures, debugging a machine you can't see, and why the README is part of the product.

The Ship

Your app is live, which means two questions now live in your head: is it up, and is anyone using it? Brian covers monitoring with the tools you already own, adding privacy-friendly analytics in one script tag, and the owner's triad for when something feels off.

Watching It Run

You shipped. Now: ways to grow this app (domains, AI inference, real users), full permission to stop right here, and the paths forward if you don't want to — plus one last request from Brian.

Beyond Vibe Coding