Session 3 / Product Building Workshop

Build better with AI.

Today the class builds one real product: a Student Application Management System. Every concept connects back to that product, from prompting and context to Supabase and Vercel deployment.

120 minutes 1 product 5 core skills

Section 1 / Recap

What we did last session.

Last session was about getting the builder stack ready and practicing the tools students need before building a database-backed product.

Installed

Codex

Students installed Codex so AI can create and edit project files locally.

Created account

GitHub

Students created GitHub accounts so their code can live online.

Installed

GitHub Desktop

Students installed GitHub Desktop to commit and push without terminal commands.

Created account

Supabase

Students created Supabase accounts for database, auth, and storage features.

Created account

Vercel

Students created Vercel accounts so future projects can be deployed online.

Practiced

Codex, GitHub, GitHub Desktop

We practiced the first three tools: creating files with Codex, saving code in GitHub, and using GitHub Desktop for commits and pushes.

Today's goals

Build one real student product.

Today we use the accounts and tools from last session to build, store data, and deploy a Student Application Management System.

Today's project

Student Application Management System

Students track universities, applications, deadlines, documents, and visa status.

Goal 1

Better AI instructions

Learn prompt engineering, context engineering, and planning before building.

Goal 2

Database connected

The app stores real application data in Supabase instead of losing it on refresh.

Goal 3

Website deployed

The tracker is live on Vercel with a shareable URL.

Section 2 / Prompt engineering

Bad results usually come from unclear instructions.

The problem is usually not that AI is bad. The prompt is unclear, context is missing, or planning is weak. Prompt engineering means turning a vague wish into a buildable instruction.

Better thinking

Know the user, product, data, and goal before asking AI to build.

Better prompts

Give AI a specific job, not a vague wish.

Better context

Use screenshots, sketches, files, examples, and data to show what you mean.

Better output

The product becomes easier to build, debug, test, and deploy.

Section 3 / Anatomy of a great prompt

Seven pieces make AI far more useful.

Goal

Build a student application tracker.

Context

International students applying to universities.

Features

University name, course, deadline, application status, and visa status.

Constraints

Mobile responsive, use Supabase, deploy on Vercel, and keep it beginner-friendly.

Output format

Ask questions first, create requirements, create database, then code.

Edge cases

Missing university, missing deadline, duplicate applications, and unknown visa status.

Success criteria

Student can add applications, update status, and track progress.

Section 4 / Dictation

Stop typing everything. Use voice.

Speaking naturally is often the fastest way to give AI a richer product brief.

Voice

Speak naturally

"I want a system where students can track university applications..."

Transcript

Capture the messy idea

Do not worry about structure on the first pass.

Improve

AI turns it into a prompt

Ask AI to organize the idea into features, data, and screens.

Build

Codex builds from the plan

The final instruction is clearer because the context is richer.

Section 5 / Plan before you code

Keep defining the product before building.

The first job is not to ask Codex to code. Keep adding product information, ask Codex what the product will do, then check whether that matches your idea.

Example prompt

Use Codex as a product planner first

Do not code yet.

I am building a Student Application Management System.
Students should track universities, courses, deadlines, application status, document status, and visa status.

First, explain what this product will do in simple language.
Then list the main features.
Then tell me what information is still missing before we build.

Section 6 / Let AI ask questions

Ask AI to help plan the product.

If the idea is incomplete, do not guess. Ask AI to interview you like a product manager and uncover missing details.

Prompt

Ask questions first

"Do not build yet. Ask me all clarification questions first so we can plan this product properly."

What AI should ask

Users, roles, and scope

Who uses it? Is it for one student or many students? Does it need login? What statuses matter?

What you do

Answer, then refine

Respond to the questions, add missing requirements, and ask AI to update the plan.

Outcome

Clearer requirements

The product becomes easier to build because the assumptions are visible.

Section 7 / AI can write prompts

You do not need to be good at prompting first.

Students can speak or write a rough idea, then ask AI to turn it into a professional Codex prompt.

Prompt creator prompt

Paste this before building

Turn my rough idea into a professional Codex prompt.

Ask clarification questions first if anything is missing.
Then create:
1. Product goal
2. Target users
3. Core features
4. Screens
5. Database tables
6. Edge cases
7. Build steps
8. Testing checklist
9. Deployment checklist

Do not write code until the plan is clear.

Section 8 / Map the product

Ask for flows, wireframes, and database plans.

Planning becomes much easier when students can see the user journey, screen layout, workflow, and database before any code is written.

User flows

Show the journey

Ask AI to show how a student adds an application, updates status, tracks documents, and checks visa progress.

Wireframes

Show the screens

Ask for a simple dashboard wireframe with application cards, filters, deadline alerts, and an add/edit form.

Workflow diagrams

Show the process

Ask for a workflow from application creation to offer received, deposit paid, visa applied, and visa approved.

Database

Plan tables and rules

Ask for tables, validations, and linkages: students, applications, documents, deadlines, and status history.

Section 9 / Critique and improve

Make AI review its own output.

After AI creates a plan, ask it to find weaknesses and suggest improvements. Then you decide which improvements to apply.

Example prompt

Use a critique loop

Critique the product plan you just created.

Find:
1. Missing features
2. Confusing user flows
3. Weak database design
4. Edge cases we forgot
5. Risks that may break the app

Then suggest improvements.
Do not apply the improvements yet. Wait for me to choose what to accept.

Section 10 / AI as specialists

Same problem, different expert lens.

Students see that AI output changes dramatically when they assign a specific role and viewpoint.

Example prompt

Internship problem

I want an internship in digital marketing.

Answer this problem from four different perspectives:
1. Recruiter
2. Hiring manager
3. Career coach
4. Industry expert

For each perspective, tell me:
- What they care about most
- What I should do this week
- What mistake I should avoid

Section 11 / Reverse engineer great outputs

Study what works, then copy the pattern.

Students learn faster when they analyze strong examples before creating their own website, LinkedIn post, or presentation.

Website

Ask why the layout works

Example: "Analyze this homepage. Why is the hero section effective? What can I reuse for my student tracker?"

LinkedIn post

Ask why the post works

Example: "Why does this LinkedIn post get attention? Break down the hook, structure, tone, and call to action."

Presentation

Ask why the deck works

Example: "Why is this presentation clear? Identify the story, slide rhythm, visuals, and missing improvements."

Section 12 / AI limitations and hallucinations

AI can sound confident and still be wrong.

Teach students to look for missing context, incorrect assumptions, fabricated information, and overconfidence before trusting the answer.

Common causes

Missing context and assumptions

Example: AI suggests a visa workflow without knowing the country, university, deadline, or student profile.

Common risks

Fabricated information

Example: AI invents a university deadline or scholarship rule because no source was provided.

Prevention prompt

Force verification

"List your assumptions. Use sources where possible. Mark uncertain claims. Tell me what I must verify manually."

Safer workflow

References, constraints, examples

Provide source links, PDFs, screenshots, constraints, and examples before asking AI for high-stakes guidance.

Section 13 / Give me 3 options

Ask for different approaches, not one answer.

Beginners often ask AI for one output. Better builders ask for options so they can compare direction, tone, and strategy before choosing.

Beginner prompt

Write me a LinkedIn post

This usually gives one average version, and students accept it too quickly.

Better prompt

Give me 3 completely different approaches

Ask for a professional version, a humorous version, and a thought leadership version.

Why it works

Comparison improves judgment

Students can see tone, structure, and messaging differences immediately.

Next step

Choose and combine

Pick the strongest option, then ask AI to combine the best parts of all three.

Section 14 / Explain your thinking

Make AI show why it recommended something.

This reduces blind trust. Students learn the reasoning, tradeoffs, and assumptions behind AI output instead of copying it without understanding.

Example prompt

Add this after any recommendation

Explain why you recommended this.

Show:
1. Your reasoning
2. The tradeoffs
3. The assumptions you made
4. What could be wrong
5. What I should verify before using it

Section 15 / Error reading

Errors are instructions, not disasters.

Beginners panic when something breaks. Teach them to copy the error, understand it, find likely causes, and fix one thing at a time.

Example prompt

Paste the error into Codex

Explain this error in beginner language.

Tell me:
1. What the error means
2. The most likely cause
3. One fix to try first
4. How I can check if the fix worked

Do not change unrelated code.

Section 16 / Small steps beat big prompts

Do not ask AI to build everything at once.

Big prompts create messy, overbuilt outputs. Small steps help Codex build cleaner code and make it easier for students to understand each change.

Step 1

Create layout

First build the dashboard structure and empty application cards.

Step 2

Add form

Then add the form for university, course, deadline, and statuses.

Step 3

Add state

Then make the app add, edit, delete, and filter records locally.

Step 4

Connect Supabase

Then replace local data with database reads and writes.

Step 5

Deploy

Finally deploy, test the live URL, and fix only what breaks.

Section 17 / Test like a user

Do not only ask, does the code run?

Students should test the Student Application Tracker like a real student using it for applications, deadlines, documents, and visa progress.

Create

Can I add an application?

Try adding one university with course, deadline, application status, and visa status.

Edit

Can I update it?

Change the status from "Not started" to "Applied" and confirm the UI updates.

Persistence

Does it save after refresh?

Refresh the page and confirm the application still appears from Supabase.

Validation

What if a field is empty?

Submit without a university or deadline and check whether the app gives a useful message.

Mobile

Does it work on mobile?

Open the app on a phone-sized screen and check forms, cards, and buttons.

Section 18 / Context engineering

Context matters more than the prompt alone.

The prompt tells AI what to do. Context tells AI what you mean.

Level 1

Prompt only

The idea is vague and output quality varies.

Level 2

Prompt + description

The user and product become clearer.

Level 3

Prompt + screenshot

AI can infer layout, hierarchy, and visual direction.

Level 4

Screenshot + sketch

Reference plus your own workflow makes the result more specific.

Level 5

Sketch + data + colors

The build has product logic, real content, and visual guidance.

Context sources

Show AI what you mean from multiple angles.

Screenshot

Upload a UI reference

Ask: "Build this, but for student applications."

Sketch

Use a napkin sketch

Ask AI to turn your rough dashboard idea into a clean interface.

Website

Use existing sites

Example: use LinkedIn-style density, navigation, and profile patterns.

Theme

Share colors and mood boards

Give brand colors, tone, and examples so the app looks intentional.

Documents

Upload PDFs and docs

Use requirement documents, research papers, or class notes as source context.

Data

Upload Excel or CSV

Turn an application tracker sheet into a database-backed dashboard.

Section 19 / Supabase

Without a database, data disappears.

Supabase gives the tracker a real backend: database, authentication, and storage when the app grows.

Why

Persistence

Application records remain saved after refresh, logout, or deployment.

Table

Applications

Fields: university, course, deadline, application_status, visa_status.

Connect

Environment variables

Use the Supabase URL and public anon key in the app settings.

Section 20 / Connect Codex to Supabase

Connect the project step by step.

Codex builds the app locally. Supabase gives it a real database. The connection happens through project credentials, environment variables, and client code.

Step 1

Create a Supabase project

Open Supabase, create a new project, choose a project name, set a database password, and wait for setup to finish.

Step 2

Copy project credentials

In Supabase project settings, copy the Project URL and anon public key. These are safe to use in frontend env variables.

Step 3

Add environment variables

Create a local env file and add values like VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY.

Step 4

Ask Codex to connect the client

Ask Codex to install Supabase JS, create a Supabase client file, and use it to read and write application records.

Step 5

Test before deploying

Add a sample application locally, refresh the page, and confirm the record still loads from Supabase.

Codex prompt

Use after creating the Supabase project

Connect this project to Supabase.

Use these environment variables:
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY

Create:
1. A Supabase client file
2. Functions to create, read, update, and delete application records
3. Form validation before saving
4. A loading state
5. Error messages if Supabase fails

Do not hardcode my Supabase keys in the source code.

Section 21 / Vercel

Deployment turns a local app into a global app.

Students connect GitHub to Vercel, deploy the project, then watch automatic deployments happen when they push changes.

Step 1

Connect GitHub

Import the Student Application Tracker repository into Vercel.

Step 2

Add environment variables

Paste the Supabase URL and anon key before deploying.

Step 3

Click deploy

Watch the site go live and open the production URL.

Step 4

Auto deployment

Change text, push to GitHub, and Vercel updates the live app automatically.

Final section

What students learned by building.

The lesson is not disconnected theory. Each skill helped ship the same Student Application Tracker.

Prompt engineering

Better prompts

Goal, context, features, constraints, output format, edge cases, and success criteria.

Context engineering

Richer inputs

Screenshots, sketches, websites, colors, PDFs, documents, Excel, and CSV files.

Planning

Builder workflow

Plan, critique, improve, build, test, and deploy.

Supabase

Stored data

Applications table connected to a live website.

Vercel

Live deployment

GitHub-connected project with automatic updates.

Key takeaway

Builders plan before they code

Beginners write better prompts. Professionals provide better context.

Homework

Practice making one new project.

Nothing new to learn before the next class. Just repeat the workflow once so the tools start feeling familiar.

Main task

Make a new project

Choose any small idea and build it with Codex, GitHub, Supabase if needed, and Vercel.

Keep it simple

Do not learn anything new

Use the same steps from class: plan, ask questions, build, test, and deploy.

Practice goal

Repeat the workflow

The goal is confidence, not complexity. A simple working project is enough.

Bring to class

Share what you made

Bring the project link or screenshots and one thing you want to improve.

Back to Session Overview All Sessions