Building a Full App Agentically, Start to Finish

You've learned the pieces: tasks with a definition of done, instructions files, planning, review, and git. This lesson puts them together on a real project, from an empty folder to a live URL you can text to a friend.

We'll build Tabby, a small web app that splits a restaurant bill fairly, and you'll see every prompt in the sequence, what to check at each checkpoint, the kinds of mistakes you'll catch along the way, and how to deploy it. The agent does nearly all the typing. Your job is the one that matters: deciding what to build, checking that it's right, and keeping the project on the rails. Expect to spend two to three hours, most of it reviewing and testing, which is exactly how it should be.

What we're building and why#

Tabby lets a group enter a bill's items, tick who shared each one, add tax and tip, and see exactly what each person owes. Cents always add up to the bill total exactly, and a share link reopens the same bill on anyone's phone. No accounts, no backend.

It's a good first full build because it's small enough for an afternoon but has real substance: money math with rounding edge cases (perfect for tests as the definition of done), a user interface, untrusted input from share links, and a deployment.

Stack: Vite (a fast build tool for web projects), TypeScript, and Vitest for tests, deployed as a static site to Vercel. You don't need to know any of these well; the agent does. Any coding agent from the landscape lesson works for this, and the prompts are tool-neutral.

You'll need: Node.js (the current LTS version), git, a GitHub account, a free Vercel account, and your coding agent of choice.

Start with an empty folder and a safety net:

mkdir tabby && cd tabby
git init

Then start your coding agent in that folder.