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

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.

ChatGPT

chat.openai.com 2 min

Tip: Sign in with the email you use for OpenAI. Reason: it is useful for comparison, backup prompts, and Codex access.

Codex

Codex setup guide 5 min

Tip: Download and install Codex on your system before class. Reason: this is the local AI coding tool students will use to build the app.

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.

4-step build recipe

Prompt, review, push, deploy, share

Step 1

Prompt Codex

Use Codex to generate the full React + Vite + Tailwind project and ask for beginner-readable files.

Step 2

Review on localhost

Open the project from the GitHub folder, run it locally, and check the app in the browser before pushing.

Step 3

Push to GitHub

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

Step 4

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. Ask Codex to recreate any missing files.

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 Codex 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