✅ Before class — quick checklist 上课前 —— 快速检查清单
Set up Git & GitHub设置 Git & GitHub
git keeps the history of your code, and GitHub stores it safely online. The easiest way to use both is the GitHub Desktop app — no commands needed. git 会保存你代码的历史记录，GitHub 则把它安全地存到网上。使用两者最简单的方法就是 GitHub Desktop 这个应用 —— 完全不用敲命令。
Sign up a free GitHub account.注册 一个免费的 GitHub 账号。
↗ Sign up at github.com ↗ 前往 github.com 注册Install GitHub Desktop, then sign in with the account you just created.安装 GitHub Desktop，然后用你刚注册的账号登录。
↗ Download GitHub Desktop ↗ 下载 GitHub DesktopCreate a repository.创建一个 repository。
A repository (or "repo") is just your Project — think of it as a folder that holds all of your project's files. Remember what we said earlier: a project is a folder. 🗂️repository（简称 "repo"）其实就是你的 Project —— 把它想成一个装着项目所有文件的 文件夹。还记得前面说的吗：一个 project 就是一个文件夹。🗂️
Clone the repo to your computer.把 repo Clone（克隆）到你的电脑。
Cloning just makes a copy on your laptop. Just choose a folder path — where you want to save this folder.Clone 只是把它复制一份到你的电脑。只要选一个 文件夹路径 —— 决定把这个文件夹保存在哪里。
Install Visual Studio Code安装 Visual Studio Code
VS Code is the editor where you'll write, run, and preview everything. VS Code 是你用来编写、运行和预览一切的编辑器。
- Download VS Code from the official website (button below). 从官网下载 VS Code（下方按钮）。
- Run the .exe file, then keep clicking Yes / Next until it finishes installing. 运行 .exe 文件，然后一直点 Yes / Next，直到安装完成。
- Download VS Code from the official website (button below), then drag Visual Studio Code into your Applications folder. 从官网下载 VS Code（下方按钮），然后把 Visual Studio Code 拖进 Applications 文件夹。
Install Claude Code安装 Claude Code
Claude Code is the AI pair-programmer that builds with you, right from the terminal. Claude Code 是在终端里与你结对编程、一起打造项目的 AI 伙伴。
- Open PowerShell and run the installer below. No Node.js needed. 打开 PowerShell，运行下面的安装命令。不需要 Node.js。
irm https://claude.ai/install.ps1 | iex- Open Terminal and run the installer below. No Node.js needed. 打开 Terminal，运行下面的安装命令。不需要 Node.js。
curl -fsSL https://claude.ai/install.sh | bashclaudeInstall Claude Code for VS Code安装 Claude Code for VS Code
This Extension brings Claude Code right inside VS Code — a side panel, inline edits, and one-click launch. 这个 Extension 把 Claude Code 直接带进 VS Code —— 提供侧边面板、行内修改和一键启动。
- Open VS Code, then open Extensions — press Ctrl + Shift + XCmd + Shift + X. 打开 VS Code，然后打开 Extensions —— 按 Ctrl + Shift + XCmd + Shift + X。
- Search for "Claude Code" (publisher Anthropic) and click Install. 搜索 "Claude Code"（发行者 Anthropic），点击 Install。
- Open a project folder, then launch it: press Ctrl + EscCmd + Esc, or click the Claude icon in the sidebar. 打开一个项目文件夹，然后启动它：按 Ctrl + EscCmd + Esc，或点击侧边栏的 Claude 图标。
The Claude Code panel opens inside VS Code and is ready to chat. 🎉Claude Code 面板在 VS Code 里打开，并且可以开始对话。🎉
Install Node.js安装 Node.js
Node.js lets your computer run JavaScript outside the browser — it's the engine our project runs on. It also comes with npm, the tool that installs the starter kit's pieces (Next.js, Tailwind CSS, Supabase) and starts the app. Without it, npm install and npm run dev won't work. Node.js 让你的电脑能在浏览器以外运行 JavaScript —— 它是我们项目运行的引擎。它还自带 npm，用来安装起步包里的东西（Next.js、Tailwind CSS、Supabase）并启动应用。没有它，npm install 和 npm run dev 都无法运行。
- Download the LTS version of Node.js from the official website (button below). 从官网下载 LTS 版本的 Node.js（下方按钮）。
- Run the .msi installer, then keep clicking Next / Yes until it finishes. 运行 .msi 安装程序，然后一直点 Next / Yes，直到安装完成。
- Download the LTS version of Node.js from the official website (button below), then run the installer. 从官网下载 LTS 版本的 Node.js（下方按钮），然后运行安装程序。
Or, since you installed Homebrew earlier, just run:或者，既然你前面已经装了 Homebrew，直接运行：
brew install nodeRun both — each should print a version number:两个都运行 —— 都应该会显示版本号：
node --versionnpm --versionSet up Supabase设置 Supabase
Supabase is the backend for our project — your database, login/auth, and file storage. The starter kit connects to it using your project's API keys, so you'll create a free account and copy those keys. Supabase 是我们项目的Backend —— Database、登录验证和文件存储都在这里。起步包会用你项目的 API keys 连接它，所以你需要注册一个免费账号并复制这些 keys。
- Sign up (or sign in) at supabase.com — you can use your GitHub or Google account, it's free. Then create a New project (give it a name, set a database password, and pick the nearest region). 到 supabase.com 注册（或登录）—— 可以用 GitHub 或 Google 账号，免费。然后创建一个 New project（取个名字、设置数据库密码、选择最近的区域）。 ↗ Sign up at supabase.com ↗ 前往 supabase.com 注册
- In your project, open Settings → API, then copy your Project URL, your Publishable key, and your Secret key. We'll paste these into the starter kit later. 进入你的项目，打开 Settings → API，然后复制你的 Project URL、Publishable key 和 Secret key。稍后我们会把它们填进起步包。
✅ Before you move on, make sure you've saved all three:✅ 继续之前，确认这三样都已保存：
🎁 You're ready — grab the starter kit 你准备好了 —— 领取起步项目包
I've prepared a Zip File for you with a working foundation for both Frontend and Backend already set up — so on the day we can skip the boilerplate and go straight to building. 我已经为你准备好一个 Zip File，里面的 Frontend 和 Backend 基础都已经搭好了 —— 这样当天我们就能跳过样板代码，直接开始打造。
- Unzip the file you just downloaded, into a folder you'll remember.把刚下载的文件 解压 到一个你记得住的文件夹。
- Open the folder in VS Code (File → Open Folder…).在 VS Code 里 打开这个文件夹（File → Open Folder…）。
-
Open a terminal in VS Code (top menu → Terminal → New Terminal), then run this first — it downloads what the project needs (first time only; wait for it to finish):
在 VS Code 里 打开终端（顶部菜单 → Terminal → New Terminal），先运行这个 —— 它会下载项目需要的东西（只需第一次；等它跑完）：
npm install -
When it finishes, start the app, then open http://localhost:3000 in your browser:
跑完之后，启动应用，然后在浏览器打开 http://localhost:3000：
npm run dev - Launch Claude Code in the same folder and start vibe coding on top of it. 🚀在同一个文件夹里启动 Claude Code，在这个基础上开始 vibe coding。🚀
🆘 Stuck on something? 卡住了？
Don't worry — we'll sort it out together on the day. If a command fails, first try closing and re-opening the terminal, then run claude doctor. Bring your laptop and we'll fix it in the first few minutes. 别担心 —— 当天我们会一起解决。如果某个命令失败，先关掉终端再重新打开，然后运行 claude doctor。带上你的手提电脑，开场几分钟内我们就搞定。