Session 2 / Builder Stack

Build & ship your first live AI app.

In two hours, students move from idea to deployed product: Claude writes the code, GitHub stores it, Vercel publishes it, and students leave with a real URL they can share.

120 minutes 6 tools 1 live URL

Today's promise

What students walk out with

This is the confidence-building session. The goal is not to memorize code. The goal is to understand the modern build loop and ship something real.

A live URL

An AI app deployed on the public internet, accessible from any phone or laptop.

A new mental model

How modern software is built with AI as an engineer, not as a search box.

A complete toolkit

Accounts and workflow familiarity across Claude, ChatGPT, GitHub, Supabase, and Vercel.

Confidence to ship

The belief that a small product idea can become a real prototype without a CS degree.

2-hour session map

From stack to shipped in one class

0:00-0:25

Part 1: Understand the stack

Explain each tool in plain English using analogies, not jargon.

0:25-0:55

Part 2: Set up accounts

Students create or confirm accounts side-by-side, with checkpoints after each tool.

0:55-1:40

Part 3: Build and deploy

Prompt Claude, compare with ChatGPT, save code, push to GitHub, deploy on Vercel.

1:40-2:00

Part 4: Show, share, next steps

Pair demos, feedback, homework, and a clear path toward the next build.

The stack

The 6 tools as a linked build system

Students should understand where each tool lives. Some tools are local on their laptop; others are online services that store, power, and publish the app.

Local

Your Computer

AI engineer

Claude Code or Codex

Creates and edits the project files on your machine.

Version control app

GitHub Desktop

Saves commits and pushes your project online.

Cloud

Online

Code library

GitHub

Stores your code and connects it to deployment.

Database + auth

Supabase

Adds login, saved reviews, and app data.

Deployment

Vercel

Publishes the app to a shareable live URL.

The workflow: Claude Code or Codex creates the app locally. GitHub Desktop pushes it to GitHub. Vercel deploys from GitHub. Supabase plugs in when the app needs data or login.

Account setup

Do this in exact order

Order matters because Vercel and Supabase should be created through GitHub. Keep students moving together and pause for thumbs-up checks.

Claude

claude.ai 2 min

Tip: Sign up with Google. Reason: free plan is enough for today and keeps login simple.

ChatGPT

chat.openai.com 2 min

Tip: Use the same email as Claude. Reason: it is only for comparison and backup prompts.

GitHub

github.com 3 min

Tip: Choose a username you would put on a CV. Reason: recruiters may see this profile.

GitHub Desktop

desktop.github.com 5 min

Tip: Download, install, then sign in with GitHub. Reason: this avoids terminal commands.

Vercel

vercel.com 3 min

Tip: Sign up with GitHub, not email. Reason: one click links Vercel to your code.

Supabase

supabase.com 5 min

Tip: Sign up with GitHub, but do not create a project yet. Reason: we may use it later in Part 3.

Order matters: Vercel and Supabase sign up via GitHub, so GitHub must exist first.

Today's build

AI Resume Reviewer live app

The recommended build is useful for every international student and easy to demo: paste a resume, click review, receive strengths, weaknesses, and fixes.

What it does

Single-page AI app

Students paste resume text into a large textarea and receive structured feedback in a clean result card.

Why it works

Career-focused and demo-friendly

It connects directly to job readiness, so students understand the value immediately.

Magic prompt

Paste this into Claude

Build me a single-page React web app called "Resume Reviewer".

Features:
- A large dark textarea where the user pastes their resume.
- A "Review my resume" button below it.
- When clicked, send the resume to the Claude API and get back:
  - top 3 strengths
  - top 3 weaknesses
  - 3 specific fixes
- Display the result in a clean card with sections.
- Modern dark theme, generous spacing, mobile-friendly.

Tech stack: React + Vite + Tailwind.
Use my Anthropic API key from an env variable named VITE_ANTHROPIC_API_KEY.
Give me the full code as a single project I can drop into GitHub Desktop.

5-step build recipe

Prompt, save, push, deploy, share

Step 1

Prompt Claude

Generate the full React + Vite + Tailwind project and ask for beginner-readable files.

Step 2

Compare with ChatGPT

Run the same prompt and discuss UI taste, code clarity, and AI honesty.

Step 3

Save code locally

Download the project, rename the folder to resume-reviewer, and confirm the file structure.

Step 4

Push to GitHub

Add local repository, create the repo, commit to main, and publish publicly.

Step 5

Deploy on Vercel

Import the GitHub repo, add the environment variable, deploy, visit, and paste the URL in class chat.

When things break

Common mistakes and quick fixes

Fix

Module not found

Check that package.json is inside the repo. Re-download from Claude if files are missing.

Fix

Blank page on Vercel

Open the browser console. Usually the environment variable is missing or misnamed.

Fix

API key invalid

The variable must be exactly VITE_ANTHROPIC_API_KEY, with no spaces or quotes.

Fix

GitHub Desktop will not push

Click Publish repository at the top and confirm the repository is public.

Fix

Vercel cannot see repo

Reconnect GitHub inside Vercel settings and authorize access to repositories.

Fix

Code feels confusing

Ask Claude to explain the file in plain English. Understanding is part of the workflow.

Show & tell

Make the product feel real

Pair students, open each other’s deployed apps on phones, test with a fake resume, and give one feature request. That is the startup loop in miniature.

Before next session

Homework that keeps momentum

2 hours

Ship a second app

Build either the AI Study Planner or AI Career Assistant using the same recipe.

30 minutes

Customize this app

Add your name, brand colors, a footer, and one improvement from peer feedback.

10 minutes

Share with 3 people

Send the URL to a parent, friend, and mentor. Ask what they would add.

Optional

Prep for the next builder tool

Watch a short Cursor IDE walkthrough so the next session feels familiar.

Back to Session Overview All Sessions