القائمة
Lesson 4.5: Go Live. Use when the student types /start-4-5.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Learn diagram context, Desktop shortcuts, stop hooks, automation, and drift recovery. Use when the student types /start-advanced-claude-workflows.
Learn Ross Mike's planning, context, automation, and product-taste workflows. Use when the student types /start-ross-mike-workflows.
Build Internet Vin's Obsidian context, CLI, and thinking-skill workflows. Use when the student types /start-vin-obsidian-workflows.
Lesson 1.1: Introduction. Use when the student types /start-1-1.
Lesson 1.2: File Exploration & Visualization. Use when the student types /start-1-2.
Lesson 1.3: Working with Files. Use when the student types /start-1-3.
| name | start-4-5 |
| description | Lesson 4.5: Go Live. Use when the student types /start-4-5. |
| disable-model-invocation | true |
| allowed-tools | ["Read","Write","Bash"] |
Read .claude/skills/_shared/teaching-rules.md and follow it for everything below.
This is it. The final step.
Your quiz is built, polished, and saved to GitHub. Now we put it on the internet so anyone can visit it.
Developers call this "deploying" - you're deploying your app to the web. You'll hear that word a lot.
STOP: Ready to go live?
USER: Yes
Vercel is a free service that puts your code on the internet.
It's basically the home base of vibecoding.
You give it your GitHub project, and it turns it into a real website with a real URL.
It's made by the same people who make Next.js (the framework we used), so they work together perfectly.
STOP: Sound good?
USER: Yes
First, you need a Vercel account.
STOP: Want me to open vercel.com for you? I recommend signing up with your GitHub account - it makes everything connect automatically.
USER: Yes / I'll do it myself
ACTION: If they want it opened, run: open https://vercel.com
STOP: Let me know when you've created an account. Make sure to sign up with GitHub!
USER: Done
Just like with GitHub, I'm going to download tools that let me work with Vercel directly.
This will open your browser to log in - just follow the prompts.
ACTION: Set up Vercel CLI:
vercel --version
npm i -g vercel
vercel login > /tmp/vercel-auth.log 2>&1 &
sleep 3
cat /tmp/vercel-auth.log
open "https://vercel.com/oauth/device?user_code=[CODE FROM OUTPUT]"
STOP: Let me know when you've authorized it.
USER: Done
ACTION: Verify authentication worked:
vercel whoami
If successful, continue. If not authenticated, troubleshoot:
Now let's put your quiz on the internet.
ACTION: Deploy to Vercel:
cd [path to quiz-project]
vercel --prod --yes
The --yes flag accepts all the defaults so you don't have to answer questions. The --prod flag means it goes live immediately.
Wait for the deploy to complete - it takes about a minute. Watch for the URL in the output.
Vercel is building your quiz and putting it on the internet now...
Done! Look for the URL in the output - it'll look something like quiz-project-abc123.vercel.app.
Your URL is: [Copy the URL from the deploy output]
That's YOUR website. On the real internet. Anyone can visit it.
Let me open it for you.
ACTION: Open the deployed URL in the browser using bash open
STOP: Do you see your quiz live on the internet?
USER: Yes!
Open that URL on your phone. It should work there too - same quiz, any device.
STOP: Does it work on your phone?
USER: Yes!
Now for the real test: send that link to a friend. Text it to someone right now. When they react, that's the feeling of shipping something real.
Let's acknowledge what just happened.
You built a real web application. You put it on the internet. You have a URL that works on any device. You did this without writing a single line of code yourself.
That's vibecoding. That's the future.
STOP: How does that feel?
USER: [Response]
Here's what you now know:
Plan → Get clear on what you're building Build → Let AI create it Iterate → Refine until it's right Save → Back it up to GitHub Go Live → Put it on the internet (deploy)
This is the loop. You can build anything with this loop.
STOP: Make sense?
USER: Yes
One more thing: what if you want to update your quiz later?
Here's the flow: make changes on your computer, ask me to "push to GitHub," and Vercel will automatically update your live website.
That's it. Vercel watches your GitHub and auto-deploys whenever you push changes. Magic.
STOP: Pretty cool, right?
USER: Yes
What if you wanted to collect emails from people who take the quiz? You'd need a database to save them. That's a future module.
What if you wanted to make sure it doesn't break? You'd need testing. Also a future module.
What if you wanted a custom domain like yourquiz.com? Totally doable - Vercel makes it easy.
The point is: you now have the foundation. Everything else builds on this.
STOP: Feeling empowered?
USER: Yes
Want to build something else? Start a new project folder and follow this same process.
The main things to tell Claude: you want to deploy on Vercel, and that it has Vercel CLI access. It'll know what to do.
STOP: Any ideas brewing?
USER: [Response]
To catch future modules: Subscribe to the Claude Code for PMs newsletter at ccforpms.com. That's also where you'll find in-depth guides and a community of PMs using Claude Code.
STOP: Want me to open that site so you can subscribe?
USER: Yes / No
ACTION: If yes, open https://ccforpms.com in browser
This course was created by Carl Vellotti. If you have feedback, questions, or just want to say hi, he's always happy to hear from you: X / LinkedIn
If you enjoyed this, share it with friends and coworkers who could use these skills!
Module 4 Complete!
You went from zero to deployed web app. You learned planning, building, iteration, GitHub, and going live.
This is vibecoding. This is your new superpower.
What's next: Future modules will cover databases, APIs, more complex apps, and connecting Claude to everything. But you now have the core skill - you can build and ship things.
In the meantime, try building something for yourself. The best way to learn is to make something you actually want.
STOP: Thanks for building with me. Now go make something cool.
USER: (exits or explores)
vercel --prod --yes flags are critical - --yes skips all interactive prompts, --prod deploys to production immediately[project-name]-[random].vercel.appACTION: Silently run the following progress update. Do not mention it to the student.
mkdir -p .fspm
[ -f .fspm/progress.json ] || printf '{"name":null,"completed_lessons":[],"current_lesson":"","last_updated":""}' > .fspm/progress.json
L="cc-pms-4-5"; C="choose-next"; T="$(date -u +%FT%TZ)"
if command -v jq >/dev/null 2>&1; then
tmp=$(mktemp)
jq --arg l "$L" --arg c "$C" --arg t "$T" '.completed_lessons = ((.completed_lessons + [$l]) | unique) | .current_lesson = $c | .last_updated = $t' .fspm/progress.json > "$tmp" && mv "$tmp" .fspm/progress.json
else
python3 - "$L" "$C" "$T" <<'PY'
import json,sys
l,c,t = sys.argv[1:4]
p = ".fspm/progress.json"; d = json.load(open(p))
if l not in d.get("completed_lessons",[]): d.setdefault("completed_lessons",[]).append(l)
d["current_lesson"] = c; d["last_updated"] = t
json.dump(d, open(p,"w"))
PY
fi
Next: Choose your next course or project.