Week 3: From PRD to Deployed Prototype — Slides Outline

"If you're not embarrassed by the first version of your product, you've launched too late." — Reid Hoffman, LinkedIn Co-founder

Instructor: Goker Ezberci

Slide 1: Title Slide

Week 3: From PRD to Deployed Prototype

Ship it or it doesn't count.

"If you're not embarrassed by the first version of your product, you've launched too late." — Reid Hoffman

Slide 2: Pulse Check (Start)

Before we begin:

On a scale of 1-10, how scared are you to show imperfect code to strangers?
What's ONE thing that could go wrong today that would make you want to quit?

Write down your answers. We'll revisit at the end.

Slide 3: Prerequisites Checklist

You MUST have these ready before we continue:

Requirement	How to Check
PRD Written	File exists in your repo: `docs/PRD.md`
AI Tool Installed	`claude --version` or `gemini --version` works
CLAUDE.md Created	File exists in project root
Deployment Account	Can log into Vercel/Railway/Replit dashboard
Git Repo Ready	`git status` works, `.gitignore` has `.env`

If ANY box is unchecked, fix it NOW.

Slide 4: CLAUDE.md Example

markdown

# Project: Grocery List App

## Commands
- `npm run dev` — Start development server
- `npm run build` — Create production build
- `npm test` — Run all tests

## Testing
- Framework: Vitest (FREE)
- Location: `src/__tests__/`
- Coverage target: 80%

## Project Structure
src/
├── components/   # React components
├── hooks/        # Custom hooks
├── utils/        # Helper functions
└── __tests__/    # Test files

## Code Style
- Use TypeScript strict mode
- Prefer named exports
- Use async/await over .then()

## Boundaries (NEVER)
- Never hardcode API keys
- Never skip tests for "speed"
- Never deploy without build passing

Slide 5: Learning Objectives

By the end of this class, you will:

Execute a rapid prototyping workflow: PRD → Deployed prototype
Select the right platform for your project type
Configure environment variables and manage secrets securely
Debug common deployment failures using logs and AI assistance
Write one test before deploying (TDD Light)

Slide 6: The 80/20 Rule

Get 80% working. Then deploy immediately.

80% Done	20% Remaining
Core features work	Edge cases
UI is basic but usable	Polish
No error handling	Robustness
Database schema is rough	Optimization

Deployed 80% > Perfect 0%

Localhost perfectionists ship nothing. Real users are your best QA team.

Slide 7: The 70% Wall

Quality/Completeness
     ^
100% |                          .----- (Diminishing returns)
     |                    .----'
     |               .---'
 70% |          .---'  <-- THE WALL
     |     .---'         (Edge cases, scaling, maintenance)
     |.---'
  0% +-----------------------------------------> Time/Effort
          ^                    ^
     Quick wins          Hard problems
     (AI excels)         (Engineering discipline needed)

WEEKS 1-3: Get to 70% fast with AI WEEKS 4-12: Push past the wall with discipline

Slide 8: Visionary Quote

"Make something people want. Then launch early and often."

— Paul Graham, Y Combinator

Your users don't care about your code quality. They care about whether it solves their problem.

Slide 9: Tool Selection Matrix (All Have FREE Options)

Project Type	FREE Tools	Paid Tools
Web App	Bolt.new (free tier), v0 (free), Replit	Cursor ($20/mo), Lovable
CLI Tool	Gemini CLI (FREE!), Claude Code	Claude Max
API/Backend	Replit (free), Windsurf (free tier)	Cursor, Windsurf Pro
Mobile App	Expo (FREE) + any AI tool	Replit Mobile

Key insight: Start with free tools. Upgrade when you hit limits.

Gemini CLI is completely FREE with 1M token context!

Slide 10: Deployment Platforms (All Have FREE Tiers)

Platform	Best For	Free Tier	Cost After
Vercel	Next.js, React	100GB bandwidth	$20/mo
Railway	Any language	$5 credit/mo	Pay-as-you-go
Render	Simple apps	750 hours/mo	$7/mo
Replit	Learning	Free with ads	$25/mo
Netlify	Static sites	100GB	$19/mo

Recommendation for students: Start with Vercel (generous free tier) or Replit (zero config).

Slide 11: Secrets Management

The Golden Rule: Never commit .env files. Never put API keys in code.

macOS/Linux:

bash

# Create .env file (git-ignored)
echo "OPENAI_API_KEY=your-key-here" >> .env
echo ".env" >> .gitignore

Windows PowerShell:

powershell

# Create .env file (git-ignored)
Add-Content -Path .env -Value "OPENAI_API_KEY=your-key-here"
Add-Content -Path .gitignore -Value ".env"

In your code:

javascript

const API_KEY = process.env.OPENAI_API_KEY;  // Safe!

If you commit a key, assume it's compromised. Rotate immediately.

Slide 12: The Deployment Checklist

Before you hit "Deploy":

Step	macOS/Linux	Windows PowerShell
1. Does it work locally?	`npm run dev`	`npm run dev`
2. Any secrets in code?	`grep -r "sk-" .`	`Select-String -Path .\* -Pattern "sk-"`
3. Package.json exists?	`ls package.json`	`Test-Path package.json`
4. Build passes?	`npm run build`	`npm run build`
5. ONE test passes?	`npm test`	`npm test`

Don't skip the test. One test > Zero tests.

Slide 13: The Sprint — Step by Step

This is NOT "write a PRD in 1 minute." You already have one.

Time	Task	Details
0-2 min	Verify prerequisites	All boxes checked from Slide 3
2-5 min	Open your PRD	Share with AI tool
5-15 min	Generate initial version	AI scaffolds based on PRD
15-25 min	Iterate and fix	"Fix this bug", "Add dark mode"
25-30 min	Write ONE test	TDD Light (next slide)
30-40 min	Deploy	Push to Vercel/Railway/Render
40-45 min	Share URL	Send to 1 person, get feedback

Slide 14: Why TDD? (Even One Test Matters)

The Problem:

AI generates code that looks right but doesn't work
20% of AI-generated code has bugs you can't see
Deployments can succeed but features can be broken

One Test Catches:

"Core feature doesn't work" — before you embarrass yourself
"API integration is broken" — before users see errors
"Logic is wrong" — before you waste time debugging production

Real Story:

"I shipped a calculator app. It looked perfect. Then someone tried 2+2 and got 22. One test would have caught it."

One test takes 5 minutes. Debugging production takes 5 hours.

Slide 15: FREE Testing Tools

Tool	Language	Cost	Best For
Vitest	JavaScript/TS	FREE	React, Vue, modern JS
Jest	JavaScript/TS	FREE	Node, React
pytest	Python	FREE	All Python projects
Go test	Go	FREE (built-in)	Go projects

Install (FREE):

macOS/Linux:

bash

npm install -D vitest   # JavaScript
pip install pytest      # Python

Windows PowerShell:

powershell

npm install -D vitest   # JavaScript
pip install pytest      # Python

Slide 16: TDD Light — One Test Before You Deploy

Example test (takes 5 minutes with AI):

javascript

// grocery-list.test.js
import { test, expect } from 'vitest';
import { GroceryList } from './grocery-list';

test('user can add an item', () => {
  const list = new GroceryList();
  list.add('Milk');
  expect(list.items).toContain('Milk');
});

Run it:

macOS/Linux & Windows:

bash

npm test

If this one test fails, your app is broken. Don't deploy broken apps.

Slide 17: TDD with AI — Red-Green-Refactor

Step 1: RED (Write failing test)

Gemini CLI (FREE):

bash

gemini "Write a Vitest test for adding items to a grocery list. It should fail initially."

Claude Code:

bash

claude "Write a failing test for adding grocery items using Vitest."

Step 2: GREEN (Make it pass)

bash

gemini "Make this test pass with the minimum code needed."

Step 3: REFACTOR (Clean up)

bash

gemini "Refactor this code to be cleaner. Keep the test passing."

This cycle takes 5-10 minutes with AI. Do it ONCE before deploy.

Slide 18: Common Deployment Failures

Error	Cause	Fix
Build failed	Missing dep or syntax error	Check logs, fix locally, redeploy
Module not found	Wrong import path	Verify path, `npm install`
Env var undefined	Not set in dashboard	Add to platform settings, redeploy
App crashes on startup	Missing API key	Check runtime logs, add key
504 Gateway Timeout	Function too slow	Check cold start, optimize

Slide 19: Debugging with AI

When deploys fail, copy the error and ask:

Gemini CLI (FREE):

bash

gemini "My Vercel build failed with this error:
[paste error log]

What's wrong and how do I fix it?"

Claude Code:

bash

claude "Debug this deployment error: [paste error]"

AI is excellent at parsing error logs. Use it.

Slide 20: Pulse Check (End)

Reflect on today:

What's the URL you'll deploy to today? (Write it down)
Who will you share it with to get feedback?
Look at your Slide 2 answers — do you still feel the same way?

The fear of shipping imperfect code is normal. Ship anyway.

Slide 21: Resources (All FREE)

Deployment Platforms (FREE tiers):

AI Tools (FREE options):

Gemini CLI (FREE, 1M context!): https://ai.google.dev/gemini-api/docs/quickstart
Bolt.new (free tier): https://bolt.new
v0 (free): https://v0.dev
Claude Code: https://claude.ai/code

Testing (FREE):

Slide 22: What's Next

Week 4: The Explore → Plan → Code → Verify Cycle

Context engineering for AI tools
Instruction files (CLAUDE.md, .cursorrules)
Git workflows for AI-assisted development
Pushing past the 70% wall

You've shipped. Now we build discipline.

Instructor: Goker Ezberci | gokerez@gmail.com

PRD Examples Library

week-01

lab-exercise

week-02

week-03

extras

How to Prepare a PRD for Vibe Coding

week-04

Week 6: Architecture & Design Patterns — Guiding AI Toward Good Patterns

示例

Week 3: From PRD to Deployed Prototype — Slides Outline

Slide 1: Title Slide

Slide 2: Pulse Check (Start)

Slide 3: Prerequisites Checklist

Slide 4: CLAUDE.md Example

Slide 5: Learning Objectives

Slide 6: The 80/20 Rule

Slide 7: The 70% Wall

Slide 8: Visionary Quote

Slide 9: Tool Selection Matrix (All Have FREE Options)

Slide 10: Deployment Platforms (All Have FREE Tiers)

Slide 11: Secrets Management

Slide 12: The Deployment Checklist

Slide 13: The Sprint — Step by Step

Slide 14: Why TDD? (Even One Test Matters)

Slide 15: FREE Testing Tools

Slide 16: TDD Light — One Test Before You Deploy

Slide 17: TDD with AI — Red-Green-Refactor

Slide 18: Common Deployment Failures

Slide 19: Debugging with AI

Slide 20: Pulse Check (End)

Slide 21: Resources (All FREE)

Slide 22: What's Next

PRD Examples Library

lab-exercise

extras

How to Prepare a PRD for Vibe Coding

Week 6: Architecture & Design Patterns — Guiding AI Toward Good Patterns

示例

Week 3: From PRD to Deployed Prototype — Slides Outline ​

Slide 1: Title Slide ​

Slide 2: Pulse Check (Start) ​

Slide 3: Prerequisites Checklist ​

Slide 4: CLAUDE.md Example ​

Slide 5: Learning Objectives ​

Slide 6: The 80/20 Rule ​

Slide 7: The 70% Wall ​

Slide 8: Visionary Quote ​

Slide 9: Tool Selection Matrix (All Have FREE Options) ​

Slide 10: Deployment Platforms (All Have FREE Tiers) ​

Slide 11: Secrets Management ​

Slide 12: The Deployment Checklist ​

Slide 13: The Sprint — Step by Step ​

Slide 14: Why TDD? (Even One Test Matters) ​

Slide 15: FREE Testing Tools ​

Slide 16: TDD Light — One Test Before You Deploy ​

Slide 17: TDD with AI — Red-Green-Refactor ​

Slide 18: Common Deployment Failures ​

Slide 19: Debugging with AI ​

Slide 20: Pulse Check (End) ​

Slide 21: Resources (All FREE) ​

Slide 22: What's Next ​

Week 3: From PRD to Deployed Prototype — Slides Outline

Slide 1: Title Slide

Slide 2: Pulse Check (Start)

Slide 3: Prerequisites Checklist

Slide 4: CLAUDE.md Example

Slide 5: Learning Objectives

Slide 6: The 80/20 Rule

Slide 7: The 70% Wall

Slide 8: Visionary Quote

Slide 9: Tool Selection Matrix (All Have FREE Options)

Slide 10: Deployment Platforms (All Have FREE Tiers)

Slide 11: Secrets Management

Slide 12: The Deployment Checklist

Slide 13: The Sprint — Step by Step

Slide 14: Why TDD? (Even One Test Matters)

Slide 15: FREE Testing Tools

Slide 16: TDD Light — One Test Before You Deploy

Slide 17: TDD with AI — Red-Green-Refactor

Slide 18: Common Deployment Failures

Slide 19: Debugging with AI

Slide 20: Pulse Check (End)

Slide 21: Resources (All FREE)

Slide 22: What's Next