From Zero to
Vibe Coder

Think of your computer as an iceberg. The apps you normally use are the tip above water. The Terminal (Mac) or PowerShell (Windows) is below — a plain text window where you type commands directly. It looks intimidating but is just another way to talk to your computer.

Normally installing software means visiting a website and clicking "Next" several times. A package manager lets you install software by typing one line. Think of it as an app store controlled entirely from the terminal.

Git tracks every change you make to your code — like "Track Changes" in Word, but much more powerful. Every time you save a meaningful version, Git remembers it. If you break something, you can always go back.

GitHub is a website where you store your code in the cloud — like Google Drive, but for code. Free for personal projects. When you "push" code, you send it from your computer to GitHub, where it is always backed up.

A repository is a project folder that Git is tracking. It contains all your code files plus a complete history of every change. Your copy on your computer is the "local repo." The copy on GitHub is the "remote repo."

Node.js lets your computer run JavaScript outside of a browser. Most modern web development tools are built in JavaScript, so Node.js is required. npm (Node Package Manager) comes with it and lets you install libraries for your projects.

VS Code (Visual Studio Code) is a free code editor by Microsoft — the most popular in the world. It highlights your code, warns about mistakes, and has thousands of extensions. Think of it as Microsoft Word, but for writing code.

Claude Code is Anthropic's AI coding assistant that runs in your terminal. Instead of a separate chat window, it lives right next to your code. Ask it to write features, fix bugs, explain code, or build entire sections of your app.

React is a popular JavaScript library for building user interfaces. Most major web apps (Facebook, Notion, Airbnb) use React. It lets you build complex interfaces from small, reusable pieces called "components" — like LEGO bricks for websites.

Vite (pronounced "veet" — French for "fast") is a build tool for React. While you develop, it shows a live preview in your browser that refreshes instantly when you save. When ready to publish, it packages your code for the web.

Tailwind lets you style your app — colours, fonts, spacing — without a separate stylesheet. You add short words directly in your code, like bg-blue-500 for a blue background. Once you know the vocabulary, styling is very fast.

Supabase is a free online database service. A database stores your app's information — notes, user accounts, messages — anything that needs to persist. Supabase also provides login/signup and file storage, with a friendly visual table view of your data.

SQL is the language used to talk to databases — asking for data or saving it. You don't need to learn it to start. Supabase has a visual interface, and Claude Code writes SQL for you when needed. It's useful to know the word exists.

Vercel is a free service that publishes your app on the internet. Connect it to GitHub once and it watches your code automatically. Every time you push new code, Vercel rebuilds and republishes within minutes. You get a real URL anyone can visit.

"Deploying" means publishing your app so others can access it. When you deploy to Vercel, your app goes from "running only on my computer" to "accessible to anyone in the world." Every push to GitHub triggers an automatic deployment.

"Localhost" means your own computer. Your app runs at something like localhost:5173 during development — only you can see it. Think of it as a rehearsal stage before the live performance on Vercel.

An SSH key is a pair of digital files — a lock and a key — that prove your identity to another computer without a password. GitHub keeps the "lock" (public key), your computer keeps the "key" (private key). They match silently every time you push code.