Every app you build follows the same path. Use this as your map — the checklist tab walks through each step in detail.
localhost:3000 in your browser. The frontend handles talking to the backend for you.
The terminal is a text-based way to control your computer. You'll use it constantly. Here's everything you need to know to get started.
Cmd + Space, type Terminal, press Enter.The terminal always has a "current location" — a folder it's working inside. Think of it like being inside a room. Most commands run relative to where you currently are. You need to navigate to the right folder before running commands.
pwd
/Users/yourname or C:\Users\yourname — that's your current folder.ls
cd Documents
Documents folder. The folder must exist and be inside your current location.cd ..
.. always means "the folder above this one".mkdir my-app
my-app inside your current location. You still need to cd my-app to go inside it.mkdir my-app && cd my-app
&& means "do this, then do that". You'll use this pattern a lot.clear
Here's what a typical session looks like when starting a new project:
Do this once on your computer. You never need to do it again.
Node.js lets your computer run JavaScript outside of a browser — this is how your backend server works.
node --version
v20.11.0. Any number is fine — it just means it's installed.Git is the tool that saves your code and talks to GitHub.
git --version in the terminal — Mac will offer to install it automatically if it's missing.git --version
git version 2.39.0.git config --global user.name "Your Name" git config --global user.email "[email protected]"
Docker packages your app and everything it needs into neat containers — this is how you run and deploy it.
docker --version
Claude Code is the AI agent you'll use to build your app. It runs inside your terminal and can read and write files directly in your project.
npm install -g @anthropic-ai/claude-code
claude
The Grill Me skill teaches Claude Code how to properly interview you about your app idea and generate structured plan files.
grill-me.md on your computer.
mkdir -p .claude/skills # Then move grill-me.md into .claude/skills/
The AI will ask you questions during the planning phase. Most of them have a sensible default. Use these answers if you're not sure.
If you get a question you genuinely don't know how to answer, these defaults work for almost every web app.
Tick each step as you go. Click any step to expand the full instructions. Your progress saves automatically.
Cmd + Space, type Terminal, press Enter.git --version and press Enter. If Git isn't installed, Mac will pop up a window offering to install it — click Install and wait for it to finish.git config --global user.name "Your Name" git config --global user.email "[email protected]"
npm. Install it once and forget it.node --version
v20.11.0. Any version number means it worked. While you're here, also check npm installed: npm --version — this should also print a number.npm install ... in this guide, it means "download and install this tool".docker --version
npm install -g @anthropic-ai/claude-code
-g means "install globally" — available from any folder on your computer, not just one project. This will take a minute. You'll see a progress bar.claude
grill-me.md somewhere you can find it (like your Desktop).
For Claude Code — create a skills folder inside your project and drop the file in:
mkdir -p .claude/skills
grill-me.md into the .claude/skills/ folder you just created. On Mac you can drag it in Finder. On Windows, drag it in File Explorer.For Cursor — Settings → Rules for AI → paste the entire contents of grill-me.md into the text box.
For any other AI chat — paste the entire contents of grill-me.md at the very top of your first message, before anything else.
cd ~/Documents
~ is a shortcut meaning "my home folder". cd means "change directory" (directory = folder). So this command means: go to the Documents folder inside my home folder.mkdir my-app && cd my-app
my-app with your project name. Rules: no spaces (use hyphens), all lowercase. Good examples: expense-tracker, booking-app, team-portal.pwd
/Users/yourname/Documents/my-app. If it doesn't, go back and check step 1 and 2.claude in your terminal from inside your project folder, then press Enter. Paste the prompt below and replace the placeholder. The AI will ask you questions — answer in plain English. Check the Defaults & answers tab for ready-made answers to common questions..md, which stands for Markdown — a simple format for writing structured text. Think of it like a plain text file with some basic formatting (headings, bullet points). You can open them in any text editor. The AI writes them, you just read them.
I want to build a web app. My idea: [REPLACE THIS WITH YOUR ONE-SENTENCE IDEA] Please use the grill-me skill to interview me about this. Ask me one question at a time. For each question, give me your recommended answer first so I know what's normal. When the interview is done, save 4 markdown files into this project folder: - frontend.md — React + Vite + Tailwind + shadcn/ui + React Router v7 + TanStack Query - backend.md — Node.js + Express + PostgreSQL + Prisma + Zod + JWT auth - design.md — shadcn/ui defaults, Inter font, Lucide icons, mobile-first, light mode - deploy.md — Docker Compose + Nginx reverse proxy + Certbot SSL, Ubuntu 22.04 VPS Use sensible defaults for a small web app wherever I haven't specified something.
.md file to open it in TextEdit..md file → Open with → Notepad.
pwd to check). Start Claude Code with claude. If using another AI, drag your 4 .md plan files into the chat window. Then paste this prompt.Read my 4 plan files: frontend.md, backend.md, design.md, deploy.md. Before writing any code, act as a project manager: 1. List every task needed to scaffold this project, numbered in order 2. Show me the list and wait for me to say "go" before starting Then work through the list one task at a time: - Complete one task, then stop and tell me what you did - Wait for me to say "next" before moving to the next task - After each task, silently run lint and type checks and fix any errors before stopping Create: - /frontend — React + Vite + Tailwind + shadcn/ui, configured and ready to run - /backend — Node.js + Express + Prisma + PostgreSQL, configured and ready to run - docker-compose.yml at the root — runs frontend, backend, and PostgreSQL together - .env.example at the root — lists every environment variable needed with placeholder values The whole thing must start with: docker compose up
Build the [FEATURE NAME] feature. Refer to the plan files for requirements. Before writing any code, act as a project manager: 1. Break this feature into small numbered sub-tasks 2. Show me the list and wait for me to say "go" Then work through the list one sub-task at a time: - Complete one sub-task, then stop and tell me what you did and what to test - Wait for me to say "next" before continuing - After each sub-task, silently run lint and type checks and fix any errors before stopping - Never move to the next sub-task without my confirmation
cd ~/Documents/my-app
my-app with your project folder name. If you're already in that folder (your prompt shows the name), skip this step.docker compose up
http://localhost:3000
localhost:4000 but you never open that directly — your frontend talks to it behind the scenes.
Ctrl + C
my-app)git init git add . git commit -m "first version" git branch -M main git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git git push -u origin main
YOUR-USERNAME and YOUR-REPO with your GitHub username and repo name. GitHub shows you the exact URL to use right after you create the repo.git init — starts Git tracking in this foldergit add . — selects all files to save (the dot means "everything")git commit -m "..." — saves a snapshot with a descriptiongit branch -M main — names the main line of your code "main" (just a naming convention)git remote add origin ... — tells Git where your GitHub repo isgit push -u origin main — uploads everything to GitHub
git add . git commit -m "describe what you changed" git push
123.45.67.89. Copy it somewhere — you'll use it shortly.
@ (root domain) or a subdomain like appYOUR.SERVER.IP.ADDRESS with your actual IP (e.g. ssh [email protected]). root is the admin username on Linux servers.yes and press Enter. This is normal — your computer is just confirming the server's identity.root@srv123456:~#. You're now controlling the server. Everything you type runs there, not on your laptop.exit and press Enter. Your terminal goes back to normal.
docker --version docker compose version nginx -v git --version
curl -fsSL https://get.docker.com -o get-docker.sh sudo sh get-docker.sh
sudo apt update sudo apt install nginx git -y sudo systemctl enable nginx && sudo systemctl start nginx
apt is Ubuntu's package manager — like an App Store for the server's command line. sudo means "run this as administrator". -y means "yes to all confirmation prompts".cd /var/www git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git cd YOUR-REPO
/var/www is the standard location on Linux servers for websites. git clone downloads a copy of your GitHub repo. Replace the URL placeholders with your actual GitHub username and repo name..env. They're never stored in GitHub (that would be a security risk), so you create this file manually on the server..env.example file (created by the AI) lists all the ones your app needs.
cp .env.example .env nano .env
cp copies the template to create a real .env file. nano opens a simple text editor on the server..gitignore file (created by the AI) already prevents this, but never override it. Secrets in GitHub are a serious security issue.docker compose up -d
-d flag means "detached" — the app runs in the background and keeps running after you close the terminal or disconnect SSH.docker compose ps
docker compose logs to see what went wrong, then paste the error to your AI.sudo nano /etc/nginx/sites-available/my-app
server {
listen 80;
server_name YOUR_DOMAIN_OR_IP;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
nginx -t checks your config for typos before applying it. If it says anything other than "test is successful" — there's a mistake. Check for typos in the config before reloading.https:// instead of http:// and the padlock icon. Browsers now warn users about sites without it. It's free using a tool called Certbot. You need a domain name pointed at your server first.sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d yourdomain.com
git add . git commit -m "describe what you changed" git push
cd /var/www/YOUR-REPO git pull docker compose down docker compose up -d --build
--build rebuilds the Docker containers with your new code. Always include it — without it the old version keeps running even after the pull.