Foundation &
Reality Install
"I am an operator, not a learner."
Damien Rufus
App running and under your complete control.
Session Agenda
Today's session is broken into three blocks plus a break. Start each timer when you begin that block. The timers will warn you when time is running low so you can stay on pace.
Machine Setup & Services
Build Your App
Break
Deploy & Go Live
Timers are independent — start each one when you begin that block. If you finish a block early, move on to the next. The timers will keep running so you can track your total pace.
Machine Setup
Before we build, your machine needs the right tools installed. Select your operating system below and follow each step. Every command can be copied with one click.
These instructions are for macOS (MacBook, iMac, Mac Mini). You'll use the built-in Terminal app. If you have Apple Silicon (M1/M2/M3/M4), all tools below are fully compatible.
Install Homebrew (Package Manager)
Homebrew is the missing package manager for macOS. Open your Terminal app (search for "Terminal" in Spotlight with Cmd + Space) and paste this command:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Install Node.js (v22 LTS)
Node.js is the engine that runs your app. We'll install it through Homebrew so it's easy to manage:
brew install node@22Install pnpm (Fast Package Manager)
pnpm is a faster, more efficient alternative to npm for installing packages:
npm install -g pnpmInstall Git (Version Control)
Git tracks every change you make so you can always go back if something breaks. It may already be installed on your Mac:
git --version
# If not installed, macOS will prompt you to install Xcode Command Line Tools
# Click "Install" when prompted, or run:
xcode-select --installInstall VS Code (Code Editor)
Visual Studio Code is the code editor we'll use. It's free and works great with our stack:
brew install --cask visual-studio-codeInstall pi (AI Coding Agent)
pi is a terminal-based AI coding agent from pi.dev. This is the tool you'll use to generate your entire app from the prompt you build below:
npm install -g @mariozechner/pi-coding-agentInstall Cursor (AI Code Editor — Optional)
Cursor is an AI-powered code editor built on VS Code. Optional but recommended for editing code alongside pi:
brew install --cask cursorInstall Supabase CLI
The Supabase CLI lets you manage your database and auth from the terminal:
brew install supabase/tap/supabaseInstall Vercel CLI
The Vercel CLI handles deployment — pushing your app live to the internet:
npm install -g vercelCreate Required Accounts
You'll need accounts on these platforms. All have free tiers that are more than enough to get started:
// Required Accounts (Both Platforms)
// Verify Everything Works
# Paste this into your terminal to verify everything is installed:
echo "=== Checking your setup ==="
echo ""
echo "Node.js:" && node --version
echo "pnpm:" && pnpm --version
echo "Git:" && git --version
echo "Supabase CLI:" && supabase --version
echo "Vercel CLI:" && vercel --version
echo "pi:" && pi --version
echo ""
echo "=== All checks complete ==="
# ✓ If you see version numbers for each tool, you're ready!
# ✗ If any command says "not found", go back and install that tool.Connect Your Services
Your app needs a database, hosting, payments, and AI. Follow each guide below to create accounts, get your API keys, and wire everything together. Work through them in order — each one builds on the last.
Work through these in order
Each service builds on the previous one. Start with Supabase (your database), then GitHub (your code), then Vercel (your hosting). Stripe and AI keys can be added when you need them. Finish with the Environment Variables section to wire everything together.
Production-Grade Infrastructure
Built on the same stack that powers real businesses. No toy frameworks, no rented platforms. You own every layer.
Dependency Audit
Every package verified against npm registry. Green means the doc version range covers the latest release. Orange means the doc should be updated to reflect the latest.
// Core
| package | doc_ver | latest | status |
|---|---|---|---|
| next | 16+ | 16.1.6 | |
| react | 19.2+ | 19.2.4 | |
| react-dom | 19.2+ | 19.2.4 | |
| typescript | 5.7+ | 5.9.3 |
// Backend
| package | doc_ver | latest | status |
|---|---|---|---|
| @supabase/supabase-js | latest | 2.98.0 | |
| @supabase/ssr | latest | 0.8.0 |
// UI
| package | doc_ver | latest | status |
|---|---|---|---|
| tailwindcss | 4.1+ | 4.2.1 | |
| @radix-ui/react-slot | latest | 1.2.4 | |
| class-variance-authority | latest | 0.7.1 | |
| clsx | latest | 2.1.1 | |
| tailwind-merge | latest | 3.5.0 | |
| lucide-react | latest | 0.575.0 | |
| sonner | latest | 2.0.7 |
// State
| package | doc_ver | latest | status |
|---|---|---|---|
| zustand | 5+ | 5.0.11 | |
| @tanstack/react-query | 5+ | 5.90.21 |
// Forms
| package | doc_ver | latest | status |
|---|---|---|---|
| react-hook-form | 7.71+ | 7.71.2 | |
| @hookform/resolvers | latest | 5.2.2 |
// Validation
| package | doc_ver | latest | status |
|---|---|---|---|
| zod | 4+ | 4.3.6 |
// DnD
| package | doc_ver | latest | status |
|---|---|---|---|
| @dnd-kit/core | latest | 6.3.1 | |
| @dnd-kit/sortable | latest | 10.0.0 |
// AI
| package | doc_ver | latest | status |
|---|---|---|---|
| ai | 6+ | 6.0.103 | |
| @ai-sdk/openai | latest | 3.0.36 | |
| @ai-sdk/anthropic | latest | 3.0.48 | |
| @ai-sdk/google | latest | 3.0.33 |
Build Your Prompt
Choose an example or enter your own app idea. Your inputs get merged into the coding document template. Copy the personalized prompt and paste it into pi to generate your entire app.
Fill in your app details below — start from an example, write your own, or paste your custom GPT output and we'll extract the details automatically. Everything gets merged into the coding document template. When you're ready, copy the personalized prompt and paste it into pi.
How to Use pi
Follow these 5 steps to go from prompt to running app. Each step shows you exactly what to type and what you'll see in your terminal.
Open Terminal & Navigate
Get to your project folder
Open your terminal app (Terminal on Mac, Windows Terminal on PC) and navigate to the folder where you want to create your project.
Tips
The Build Sequence
Check off each step as you complete it. Your progress is saved automatically.
Start with a proven template
No building from scratch. You begin with production-grade infrastructure that's already been battle-tested.
Connect your infrastructure
Database, hosting, security — all connected and configured. You own every piece.
Set up authentication
Users can sign up and log in. Professional-grade security with server-side session handling.
See your app running live
Real URL, real users. Your app is deployed and running on the internet.
Learn how to recover if something breaks
Things will break. That's normal. Knowing how to recover is what separates operators from learners.
Your Infrastructure
Every piece of infrastructure you connect today is something you own. No platform dependency. No rent extraction. No hidden costs.
When Things Break
Operators don't panic when things break. They follow the playbook.
# The Recovery Playbook
# =====================
# 1. IDENTIFY — What broke?
git diff HEAD~1 # See what changed
vercel logs # Check deployment logs
# 2. ISOLATE — Stop the bleeding
vercel rollback # Restore last working version
# 3. FIX — Address the root cause
git checkout main # Start from clean state
# 4. VERIFY — Confirm the fix
pnpm dev # Test locally first
vercel --prod # Deploy when confident
# 5. DOCUMENT — Learn from it
# → Add to your team's runbook
Day 1 Complete
Tomorrow you deploy to the internet, connect Stripe for real payments, and install marketing infrastructure. By the end of Day 2, your app will be accepting money.
Foundation
Deploy & Monetize
Ship & Scale