A small idea.
A working app.

You stay in charge of the work.

You do not need to learn every technology in this book before starting. Your first goal is one useful page that opens on your computer.

1. 1. DescribeSay who the app helps and what one thing it should do.Your role: choose the outcome.
2. 2. PlanThe agent proposes small steps, tools and checks.Your role: approve the direction.
3. 3. BuildThe agent changes the project and runs it.Your role: keep the scope small.
4. 4. CheckOpen it, try it, report what happened, improve it.Your role: decide whether it works for you.

A note from Emile: I’ll guide you through any app building. We can work together, you can try things and ask me when you get stuck, or I can do the build for you. As your confidence grows, you can make future apps yourself; I’ll still be here to help.

An agent is an AI assistant that can use tools to take several steps: inspect files, write code, run a check, read an error, then try a fix. “Agentic” simply describes that working pattern. It can still misunderstand your intent or make mistakes. A confident reply is not proof that the app works.

You decide what is useful and what may be shared. Emile or your workshop facilitator can help shape the brief, check the computer and accounts, and guide technical decisions. Codex performs the coding tasks you give it.

The staged approach, sample app and prompt cards are original practical suggestions for you. Vendor facts and setup commands are linked to official references in the final chapter.

The easiest route for this guide.

For a beginner who wants a Next.js app on Vercel, my recommendation is: Codex + the official Next.js starter + GitHub + Vercel’s GitHub import. You can postpone the database and every other service until the first page works. This is a recommendation for your situation, not a universal ranking of every app builder.

1. Folder
2. Plan
3. Local app
4. GitHub
5. Vercel

Then add saved information → sign-in → uploads, only when the app needs them. The official create-next-app tool supplies the initial Next.js project; Vercel can build a connected GitHub repository. Next.js setup · Vercel GitHub integration

Done for now: you can explain the first milestone in one sentence, without listing ten technologies.

Set up your drive and folder.

An external SSD is a small, fast storage drive plugged into your computer. One practical approach is to keep projects on an external drive; the exact make and model are not important. An SSD is helpful if your internal drive is crowded, but it is not required to learn.

Before buying

• Ask the workshop facilitator or a trusted helper to check your computer’s USB ports and available internal space first.
• Compare a reputable portable SSD with the right cable, warranty and capacity for your actual files. Around 1 TB is a planning starting point, not a requirement.
• Check compatibility and the return policy on the manufacturer’s page; avoid buying solely from an advertised peak speed.
• Remember that one external drive is working storage, not a backup. Keep an independent copy of important documents and a remote code copy.

Use Samsung’s storage catalogue or another established manufacturer’s official information as a place to compare specifications with a trusted helper. No exact model or purchase is required by this guide.

Set up without losing existing files

1. Connect the drive and open File Explorer → This PC.
2. Check its label, capacity and drive letter together. Open it and confirm which files are already there.
3. If Windows offers to format a drive, stop and ask the workshop facilitator or a trusted helper. Formatting can erase it. This guide contains no formatting commands.
4. Create a folder named AppProjects on the confirmed drive. Keep source code out of automatically synchronized document folders where possible.
5. Create a folder named planning inside AppProjects for your brief. The starter will later create the separate app folder.

I am a beginner on Windows. Help me identify the project folder I have opened. Read its location and tell me the exact path. Do not format, rename or delete a drive. Do not move existing files. Confirm whether this is an empty project location before we create an app. Use the drive that actually exists on my computer, not an assumed H: drive.

After you have confirmed H:\AppProjects, this command opens that location in PowerShell. It does not create or erase anything.

Set-Location -LiteralPath 'H:\AppProjects'

Keep the drive connected while the app is running. Stop the development server and close your editing tools before using Windows’ eject option.

Done: you can find AppProjects again tomorrow and you know where its backup lives.

Your account and installation checklist.

Use accounts you own and can recover. Keep passwords in your password manager, enable two-factor authentication when available, and store recovery codes safely. Sign in through the vendor’s own screen. Never paste passwords, recovery codes or secret API keys into a prompt card.

Check that the basic tools are ready

After installing tools, close and reopen VS Code so it sees them. Open your folder with File → Open Folder. Open Terminal → New Terminal; choose PowerShell. A terminal is a box where you type a command and see its answer. Run these one line at a time.

node --version
npm --version
git --version

Each should print a version. If a command is “not recognized,” stop at that step and show Codex the message. If PowerShell blocks an npm script, ask Codex to inspect the error; on Windows, npm.cmd --version is a possible targeted alternative. Do not disable security settings across the computer just to make a command run.

Done: Node, npm and Git show versions, and VS Code has opened the intended folder.

Choose one coding assistant to begin.

Codex is the coding helper used by the green prompt cards. Follow its official setup, open the intended local project and sign in. You can use the Codex app or its supported editor experience; you do not need to install every interface. The Windows documentation explains its platform setup. Quickstart · Windows guidance

VS Code is where you can see your project’s files, read changes and use the terminal. Codex helps you work on those files. Node.js runs the local tools. These are separate jobs.

Current Cowork getting-started guide · Claude Code overview. Product interfaces and access can change; use current vendor setup screens.

How to use the cards

• Green card: paste its plain-English instructions into Codex’s message box.
• Gold card: run the command in a terminal, only at that stage. Or show it to Codex and ask it to run the step for you.
• Text in square brackets, such as [your goal], is a placeholder you must replace.
• A Copy button only copies text; it does not run anything. If copying is unavailable, select the card text and use Ctrl + C.
• Do not repeat an installation or database creation just because the result is unclear. Ask the agent to inspect what already exists.

I am a beginner. Explain unfamiliar words in plain English. Work on one small milestone at a time. First inspect the project and tell me what already exists. Before building, help me make a short plan. Tell me what a command will change. Keep passwords and secret values out of chat and Git. Ask me before a purchase, commercial plan upgrade, deleting data or publishing private information. After a change, show me how to try it and report what you actually checked.

Write a one-page plan.

Begin with your own notes, workshop handouts and earlier ideas. Treat them as background until you deliberately include them in the app plan. Ask Emile or your workshop facilitator to help identify useful resources without assuming that every earlier idea is a requirement.

A useful first plan answers: Who is this for? What one job should it make easier? What will the first version show? What does “works” mean? Write a simple example: “I can open my idea list and add a title.” Avoid “build a complete platform” as a first instruction.

Planning only. Do not install packages, create an app, provision services or deploy yet.

My idea is: [describe the person and problem in one sentence].
My first useful outcome is: [one action someone should be able to do].
Relevant background is: [attach the action plan or chosen notes].

Ask up to three short questions that would materially change the plan. Then propose a tiny first version with one example screen, what we will postpone, and three checks I can perform. Explain which accounts and costs are needed for that version. Save the agreed plan in the planning folder after we settle it. Wait for me to say “Build the first milestone.”

Keep a small project memory

Once the app folder exists, ask Codex to keep the approved plan and a short progress note in docs/. An AGENTS.md file is a readable set of project instructions for coding agents. If the starter already includes one, preserve its useful guidance and add only project-specific instructions.

Read any existing AGENTS.md first. Preserve useful existing instructions. Add concise guidance for this project: the approved purpose, beginner-friendly explanations, the chosen package manager, how to run and check the app, and where the plan lives. Record the current milestone and the next unfinished step in docs/progress.md. Do not store passwords or private account details in these files.

Done: the first version fits on one page, and you have explicitly chosen to begin building.

Describe your app. Let the skill guide the start.

“You don’t have to learn all of this at once. I’ll be your guide. We can build together, you can try things and call me when you get stuck, or I can take care of the build for you. We can use any combination that suits you. As your confidence grows, you can build future apps yourself, with me still here to help.” — Emile

BrainIT Consulting’s skills collection gives the agent reusable instructions for common building and review tasks. A skill is a playbook the assistant follows; it is not a new hosting subscription. The start-an-app skill interviews you and builds a tailored Next.js starting application, with optional services selected from your needs. Collection documentation

1. Your idea
2. Short interview
3. Approved build sheet
4. Working starter
5. Check & improve

1. Choose an empty app folder, then install the skill

For this guided route, create a new empty folder for the app, such as H:\AppProjects\my-first-app after confirming your actual drive letter. Open that app folder as the project in Codex. The skill builds inside the folder you open; do not use a parent folder holding other projects. If you already created this app with the manual starter, keep that project and move to the review skills below instead of starting it again.

After Node.js is ready, use the terminal in your confirmed working location. This command installs instructions for your agent; it does not create the app itself. Review the installer’s agent and installation-scope choices with Emile. Choose the intended Codex environment. Do not run every card automatically.

npx skills add brainit-consulting/skills --skill start-an-app

2. Give Codex the idea and ask for the interview

Use the installed BrainIT start-an-app skill. I am a beginner attending Emile’s workshop. My app idea is: [explain who it helps and what they need to do].

Begin with the interview and an understandable build sheet. Confirm the exact target folder and whether it already contains an app. Use the background notes I provide; do not guess requirements. Keep the first version small and explain each optional service. Show me the plan, expected accounts and costs before building. Wait for me to approve the build sheet. If you cannot find the skill, help me verify its installation before proceeding.

After you approve that build sheet, let the skill create the app. Choose this route or the manual starter in Chapter 07B. If the skill has already created the project, skip the manual creation command and continue with verification, GitHub and hosting. Keep the package manager the skill actually chose; have Codex translate this book’s npm examples when necessary instead of mixing lockfiles.

3. Add a review skill when it fits

These summaries come from the collection’s README. Each command installs one skill; the green prompt gives it an actual task.

Security scanner

Audits against OWASP Top 10:2025 and produces an evidence-based report. Most useful once real sign-in and database behavior exist. An audit is not a guarantee of safety.

npx skills add brainit-consulting/skills --skill security-scanner

Use security-scanner on this app. Review the implemented sign-in, server-side permissions and data handling. Start with a read-only review. Give me a short plain-English report of supported findings, their evidence and practical next steps. Do not describe an untested suspicion as a confirmed vulnerability.

App health check

Reviews security, code quality and usability, writes a dated report and offers fixes.

npx skills add brainit-consulting/skills --skill app-health-check

Use app-health-check to review this app. Write the dated report and explain the three most useful improvements in plain English. Separate actual failures from optional polish. Show me the findings before applying fixes.

Mobile web polish

Helps with iPhone, iPad and Safari layout, safe areas, viewport behavior and touch controls.

npx skills add brainit-consulting/skills --skill mobile-web-polish

Use mobile-web-polish to inspect the app's main user journey. Check small-screen layout, touch targets, text size, phone safe areas and Safari behavior. Suggest a focused set of fixes, then verify the changes we choose. Tell me which checks require a real iPhone or iPad and have not yet been performed.

Bring your own agent — advanced and optional

Adds an MCP wrapper for an existing API-first app. It is a poorer fit for Next.js apps centered on Server Actions. Its default local connection uses one fixed login rather than per-user consent, permissions and revocation. For your Next.js app, discuss native authenticated endpoints and scoped MCP access first.

npx skills add brainit-consulting/skills --skill bring-your-own-agent

Use bring-your-own-agent for a feasibility review only. Inspect whether this Next.js app has authenticated API endpoints or mostly Server Actions. Explain which actions can safely be exposed and which cannot. Compare the wrapper's fixed-login model with a native scoped MCP design that has per-user consent and revocation. Do not add agent access until Emile and I have chosen the approach.

Install the collection in one command — optional

If Emile wants the full set available, use this collection command instead of repeating all the individual installs. Review the installer’s actual skill selections and destination. It does not run every skill or build an app by itself.

npx skills add brainit-consulting/skills

Done: the agent can find the chosen skill, you have agreed the build sheet, and the first app is ready to check. Emile can guide you through any stage.

Your first app runs on your computer.

If the BrainIT skill already created your app, skip this creation command. Otherwise, from the confirmed AppProjects parent folder, the following command creates a new folder called my-first-app and downloads its starting packages. Do not run it inside a folder that already contains an app. When asked, choose the recommended Next.js defaults. We use npm for this manual route to avoid switching package managers. Official installation instructions

Build the first milestone from our approved plan. Confirm the exact parent folder and that my-first-app does not already exist. Check Node and npm. Use the official current create-next-app starter with npm and recommended defaults, including TypeScript and App Router. If the folder already exists, inspect it instead of overwriting it. Make a single simple page using fictional sample information. Do not add a database, authentication, storage, payments or AI API yet. Run it locally and give me the exact address to open.

npx create-next-app@latest my-first-app --use-npm

After creation succeeds, move into the new app and start its development server. If Codex already did this, use its result instead of starting a duplicate server.

Set-Location -LiteralPath '.\my-first-app'
npm run dev

Open the address printed in the terminal, commonly http://localhost:3000. “Localhost” means this computer. This is not your public website. Keep the terminal running while viewing it; use Ctrl + C in that terminal to stop it.

Know four files without learning them all

• app/page.tsx is usually the home page. Some choices place it under src/app/.
• app/layout.tsx supplies shared page structure.
• package.json lists packages and commands such as dev and build.
• .gitignore tells Git which local files to leave out of saved code history.

Check the first milestone against our three agreed checks. Run the app’s build, configured lint and TypeScript checks as appropriate. Open and test the page if your browser tools permit it; otherwise tell me exactly what I must check manually. Check phone-width layout, readable text and keyboard use. Fix actual failures. Report what passed, what was not tested, and the exact local URL.

Done: you see the page yourself and can explain one thing it does. You do not need to understand every generated file.

Git remembers. GitHub keeps a remote copy.

Git runs locally and records snapshots called commits. GitHub is the online service holding a remote repository. A push sends local commits to it. These are different operations. GitHub does not automatically back up your live database or files excluded by .gitignore.

1. In VS Code, open the actual my-first-app folder.
2. Choose Source Control in the sidebar. If needed, initialize Git; the starter may already have done so.
3. Review the proposed files. Keep .env* secret files, generated output and node_modules out of commits. A deliberately sanitized .env.example can describe variable names.
4. Ask Codex to make a first commit after checks pass. If Git needs your name and email, use your chosen identity; a GitHub-provided private email is an option.
5. Use VS Code’s Publish to GitHub, sign in to GitHub and choose a private repository. If it already exists, connect to that one.
6. Open GitHub and confirm the expected files are there.

VS Code’s GitHub instructions · GitHub account help

Prepare this working app for a private GitHub repository I own. Inspect existing Git state and remotes before changing anything. Check the proposed commit for secret files and generated folders; do not print secret values. Explain the files being saved. Help me configure my own Git identity if needed, then commit the tested milestone. Guide me through publishing the private repository in VS Code or the official GitHub flow. Verify the remote repository matches the local commit. Do not create duplicate repositories or force-push.

git status

Done: your private repository shows the first working checkpoint, and no secrets are in its file list.

Let Vercel build from GitHub.

Sign in at Vercel’s New Project page. Connect GitHub, allow access to the intended repository, import it, and review the detected Next.js settings. For this simple app, the repository root is the app root. Do not select the parent AppProjects folder.

1. Confirm the selected account and repository.
2. Use Hobby only if the project qualifies under its personal, non-commercial rules.
3. For the first sample-only page, review the settings and choose Deploy.
4. Wait until Vercel reports the deployment is ready. Open its actual URL and try your page.
5. Record that URL and the project name in your notes, without storing secrets.

The GitHub integration can create preview deployments from branch work and production deployments from the configured production branch, often main. A push to that branch can therefore publish automatically. A private GitHub repository does not make the website private; inspect deployment protection separately. GitHub integration details

Help me publish our sample-only practice app to my Vercel project using its GitHub integration. Confirm account, repository, root directory, production branch and Hobby eligibility. Check for private content and secrets before publication. Explain which future pushes will publish automatically. After I complete the account screens, verify the deployment is ready and that the final URL shows our expected page. Test its main action and report any unverified checks. Record the live URL in docs/progress.md.

What the free plan does not promise

Hobby has usage limits and personal-use restrictions. Exceeding some limits can pause a feature rather than provide unlimited capacity. Neon, storage providers and AI services have their own plans and usage. Review the actual dashboards before enabling them; “hosted on Hobby” does not mean every connected service is free. Current Hobby limits

Done: you have opened the final Vercel URL yourself. A successful Git push alone is not this checkpoint.

Choose one safe database path.

PostgreSQL is database software for structured records. Drizzle ORM lets the app read and write those records with TypeScript. Drizzle Kit turns reviewed schema changes into migration files and applies them to the database you deliberately select.

You have two sensible choices. Both can use the same Drizzle schema and migration history. Choose one development path with your workshop facilitator before adding data.

We are ready to save fictional idea records. Compare these two paths for this computer and app: (A) PostgreSQL in Docker Desktop for local development with Neon for production, or (B) separate Neon development and production branches. Check whether Docker Desktop is already installed and whether a Neon/Vercel integration already exists. Do not install, provision or migrate anything yet. Recommend the simpler fit, list the accounts and computer resources it needs, and show exactly how development stays separated from production.

Path A · Docker Desktop locally, Neon in production

Docker Desktop can run PostgreSQL in an isolated container on your Windows computer. Drizzle uses the local connection while building; the finished Vercel app uses Neon. Install Docker Desktop from its official Windows instructions, accept its current terms, and restart if the installer asks. Then confirm Docker is running.

docker version

Set up a local PostgreSQL development database for this Next.js app using Docker Compose and the official Postgres image. Create a clear compose.yaml with a named volume, a health check and a development-only database name. Put real local credentials only in an ignored environment file; add safe placeholders to .env.example. Set local DATABASE_URL to localhost and label it clearly as development. Do not connect to Neon, Vercel Production or real customer data. Explain each new file before starting the container.

After Codex creates and reviews those files, these are the normal daily commands:

docker compose up -d
docker compose ps

Add Drizzle using the same package manager as the rest of the app. These packages support PostgreSQL plus reviewed migration files.

npm install drizzle-orm pg
npm install --save-dev drizzle-kit @types/pg dotenv-cli

Configure Drizzle ORM and Drizzle Kit for our local PostgreSQL container using the current official documentation. Keep DATABASE_URL outside source control. Create the smallest schema for fictional idea records. Generate a named SQL migration, show me the SQL and confirm the hostname is localhost before applying it. Apply it only to the local database, add one fictional record, reload the app and prove the record persists. Add package scripts with clear names for generating and applying migrations.

Codex may create scripts around the official Drizzle commands below so the correct environment file is loaded:

npx drizzle-kit generate --name=add-ideas
npx dotenv -e .env.local -- npx drizzle-kit migrate

Use docker compose stop when finished and docker compose up -d next time. A named volume keeps local records between those sessions. Do not run docker compose down -v unless you intentionally want to erase the local database.

Move the reviewed migration to Neon production

Create or connect the Neon production database through Vercel only when the local version works. The migration files belong in Git; the passwords and connection strings do not. Map the Neon production connection only to Vercel’s Production environment. Review the migration again, back up important data, and apply it once to the verified production target. Do not make every Vercel build alter the database automatically.

Prepare our tested Drizzle migration for Neon production. Inspect the existing Vercel and Neon integration without printing credentials. Verify the selected project, environment and database branch; the target must be Production, not local, Development or Preview. Show the pending migration SQL, risk, backup or recovery option and verification plan before applying anything. Wait for my explicit approval before running the production migration. Afterward, verify the migration log and one fictional end-to-end save on the live app.

Path B · Neon development and production branches

A Neon branch is an isolated database branch with its own connection string. A development branch can be reset or changed without altering its parent production branch. New Neon onboarding may already create production and development; inspect first so you do not make duplicates. If a branch contains copied production data, treat that data as sensitive even though the branch is for development.

Use the Vercel CLI to inspect the current project and integration. If no suitable Neon project exists, the Marketplace flow can create or connect one. Restrict the first connection to Development while you learn.

npm install --global vercel@latest
vercel login
vercel link
vercel integration list
vercel integration guide neon --framework nextjs

vercel integration add neon --environment development

After verifying that Vercel Development maps to the Neon development branch, pull only those values locally. Preserve any existing local file and keep it out of Git.

vercel env pull .env.local --environment=development

Using the current official Neon and Vercel documentation, inspect our existing database branches and environment mappings without displaying secret values. We want local and Vercel Development to use the Neon development branch, and Vercel Production to use the Neon production branch. Preview deployments must not share Production unless we deliberately approve that design. Configure Drizzle with one reviewed migration history, apply the first migration only to Development, and prove a fictional saved record survives a reload. Report the branch name and environment for every check.

Drizzle with PostgreSQL · Generate migrations · Apply migrations · Neon branching workflow · Vercel integration CLI

Done: one fictional record survives a reload, and you can say whether it lives in local Docker, the Neon development branch or Neon production.

Sign-in is only half the job.

Authentication answers “Who are you?” Authorization answers “Which records may you read or change?” A login screen alone does not protect one person’s information from another person.

Better Auth runs as part of the application. Its setup needs a database, a strong secret, application URL settings, and the appropriate Next.js route handler. Its current installation guide requires a high-entropy secret of at least 32 characters. Let the agent generate and store this privately. Installation · Next.js integration

npm install better-auth

Plan and then implement Better Auth for this Next.js app using its current official installation and Next.js integration documentation. Use our chosen database adapter and its matching migration process. Explain whether email/password or a single social provider is the simpler fit before adding providers.

Set BETTER_AUTH_SECRET and BETTER_AUTH_URL privately for each needed environment. Do not put secrets in NEXT_PUBLIC variables. Configure the auth endpoint and only the trusted origins we actually need. Review migration targets before applying changes; start in development.

Protect server-side reads and writes with session checks and record ownership. Test with two fictional users: each must only read or edit their own ideas. Also test sign-out and an unauthenticated request. Explain what still needs email delivery, verification, password recovery or provider setup before real people use the app.

Review these before release

• URLs: local settings point to localhost; production settings point to the real HTTPS domain. Social providers must have the correct callback URLs.
• Database setup: use the migration command matching the selected adapter. A migration changes database structure; do not blindly run a command from an older tutorial.
• Preview behavior: temporary preview URLs can complicate allowed origins and login callbacks. Use a deliberate test configuration, not a blanket trust rule.
• Recovery: if users have passwords, they need a working reset path. Chapter 12 explains the Resend account, verified domain, testing and cost checks needed for those messages.
• Private information: verify ownership checks on the server, including direct requests, not just hidden buttons.

Done: two test users cannot access each other’s records, and signing out actually blocks protected actions.

Email belongs on the server.

An app may need to verify an address, send a password-reset link, confirm an action or notify someone about a record. These are transactional emails: a person’s account or activity triggered them. My beginner recommendation for a Next.js app on Vercel is Resend because it provides a focused email API, an official Next.js guide and a Vercel Marketplace integration. It is still a separate service with its own account, plan, limits and delivery responsibilities.

Start with one transactional message. A newsletter or promotion is a different project: it needs clear consent, truthful sender details, unsubscribe handling and the rules that apply to the audience. Do not turn every account address into a marketing list.

1. Set up the account and sending identity

1. Create or connect the Resend account yourself and review the current plan and limits.
2. Add a domain you own in Resend. A sending subdomain such as mail.example.com can separate app-email reputation from ordinary business mail.
3. Add the exact DNS records Resend supplies at the domain’s DNS provider. Wait until Resend reports the domain is verified. Verified domains pass SPF and DKIM; add DMARC gradually after testing every legitimate sender for the domain.
4. Choose a real From address and reply destination that people will recognize. Do not impersonate another domain.

Planning only: our Next.js app may need to send [verification / password reset / action confirmation / notification]. Inspect the existing auth flow, Vercel project and environment names without displaying secrets. Use current official Resend, Vercel and Better Auth documentation. Explain who triggers the email, who receives it, what private data it contains, whether a verified sending domain already exists, the current Resend plan limits, and how we will prevent spam, account discovery and duplicate sends. Recommend the smallest first message and a test plan. Do not create an account, domain, API key or integration yet.

2. Connect Resend, then install one SDK

The Vercel Marketplace integration is the simplest route for this stack because it can connect the service and provide RESEND_API_KEY to the selected Vercel environments. Inspect existing integrations first so you do not create a duplicate Resend account or key.

vercel integration list
vercel integration add resend --help

After reviewing the account, plan, project and environment choices, the Marketplace command begins the interactive connection:

vercel integration add resend

Install the official Node.js SDK in the app. React Email is optional; add it later if reusable designed templates justify another dependency.

npm install resend

3. Build a narrow server-side send

Implement only our approved [email type] using the current Resend Next.js guidance. Send from a protected server action or route; never expose RESEND_API_KEY to the browser. Use our verified From domain and the recipient from trusted authenticated or validated server data, not an arbitrary browser-supplied address. Validate inputs, require the right session or rate limit public recovery requests, escape user content, and return a calm generic error without exposing provider details.

Create a simple readable email with a plain-text alternative, the app name, why the person received it, a recognizable reply path and a link to the correct environment. If a retry could duplicate the message, use a deterministic idempotency key. Log the Resend message ID and outcome without logging the API key, reset token or unnecessary personal content. Add one focused test for unauthorized or repeated sending.

4. Connect account email to Better Auth

If Chapter 11 uses email verification or password recovery, connect Better Auth’s current email callbacks to the same reviewed Resend sending function. The auth library creates and validates the account token; Resend delivers the link. Verify the local, preview and production base URLs separately. A reset request should give the same public response whether or not the address exists.

Using the current Better Auth and Resend documentation, add [email verification / password reset] to our existing auth setup. Reuse the reviewed server-side Resend client and verified From address. Keep tokens and API keys out of logs and browser code. Use a short expiry, single-use behavior and the correct trusted app URL for each environment. Return the same public response for known and unknown addresses. Test a valid link, an expired or reused link, an unknown address, a rate-limited repeat request and sign-in after completion.

5. Prove the whole journey

• The Resend domain shows verified and the From address uses it.
• RESEND_API_KEY exists only in the intended server environments and is absent from Git and browser bundles.
• A controlled test reaches the intended inbox and its text, link, sender and reply behavior are correct.
• Repeated clicks or retries do not send uncontrolled duplicates.
• Failure, bounce and suppression behavior is understandable without exposing private account information.
• The current Resend dashboard limits and expected monthly volume are recorded before real users rely on email.

Resend with Next.js · Verified domains · Vercel Marketplace integration · Email events · Current pricing

Done: one expected transactional message reaches a controlled inbox, its link completes the intended action, and no secret or arbitrary-send endpoint is exposed.

Database records and files live differently.

Use the database for an item’s title, owner and file reference. Use object storage for the uploaded image, PDF or other file. Do not use GitHub as a user-upload store, and do not rely on a running Vercel function’s local disk to preserve uploads.

Vercel Blob documentation · R2 overview · R2 pricing. Choose from the live plan information for your expected usage; this book is not a price quotation.

Our app now needs [describe one file type and why]. Compare Vercel Blob and Cloudflare R2 for this exact need using official current docs and pricing. Recommend one; do not set up both. Explain whether uploads must be private and show the required account or plan choices before provisioning.

After we choose, implement a small authenticated upload flow. Enforce allowed file types, size limits and ownership server-side. Keep storage credentials private. For private files, verify the file itself cannot be opened without authorization, not just the page. Store the file reference and owner in the database. Test one valid upload, one oversized file, another user's access, and deletion. Explain how backups and removal work.

Beginner choice: use a small fictional image for the first test. Leave large audio/video archives out of the first milestone. The upload flow should tell you clearly whether a file was saved and how to remove it.

Done: one allowed file uploads, access behaves as intended, and you understand where that file is stored.

MCP gives an agent a tool connection.

MCP stands for Model Context Protocol. It is a shared way for an AI application to connect to tools and information. The assistant is the client; a connected service exposes capabilities through an MCP server. It might let the agent read a project’s deployment status or inspect a database schema. MCP introduction

1. You ask
2. Codex
3. Allowed MCP tool
4. Service result
5. Agent checks

MCP is optional. The Vercel CLI sequence in Chapter 10 does not require an MCP server. An integration can use an ordinary API or CLI instead. Do not install random servers merely because a tutorial lists them.

Start with one read-only job

Example: “Tell me why my latest deployment failed.” Use the official service’s documented integration and the smallest access that performs that job. Read access can still reveal private information; connect only the intended account and project.

I want help checking my Vercel project's deployment status. First list the relevant tools already available to you. If an official Vercel integration or MCP connection is needed, use current vendor instructions and explain its publisher, account, project access and permissions before I connect it. Begin with read-only status inspection. Do not deploy, edit settings or provision resources as part of this connection check. Tell me how to disconnect it later.

Two very different kinds of “AI integration”

Planning only: assess whether an AI summary button would actually help this app. Explain what data would leave the app, which provider account and billing it needs, and how to cap use per person. If we later build it, keep the provider key server-side, require authorization, limit input and requests, and handle timeouts. Do not assume my ChatGPT or Claude subscription includes the app's API usage.

Codex MCP setup · Vercel MCP documentation. Configuration differs between clients; have Codex verify the instructions for the interface you actually use.

A SaaS is a service people depend on.

SaaS means software delivered as an online service. A useful prototype becomes a service when real people depend on its accounts, information and availability. A login page and a payment button do not finish that job.

Before real customers

• The Vercel plan permits the intended commercial use; other service costs and limits are understood.
• Real data has backups and a tested recovery procedure.
• Sign-in, sign-out, account recovery and two-user privacy tests pass.
• Development, preview and production have deliberate data and secret settings.
• The main user task works on a phone and with the keyboard.
• Errors are monitored, usage alerts are configured where available, and somebody knows how to respond.
• Privacy information, support, retention and deletion match what the app actually does.

These checkboxes are for this reading session; they are not stored after you close or reload the guide.

Payments, subscriptions, invitation systems and multiple organizations are separate milestones. Ask Emile or a qualified reviewer to review their requirements before adding them.

Review this app for a small real-user launch. Do not launch or upgrade plans yet. Check the full journey from signed-out visitor to account creation, saved record, retrieval and sign-out. Inspect server-side ownership controls, secrets, environment separation, migrations, backups, error handling and expected service costs. Distinguish confirmed results from untested assumptions. Produce a short list of actual launch blockers, with a practical fix and a verification step for each.

Work in small, recoverable sessions.

1. Connect the drive and open the correct app folder.
2. Ask Codex to read the plan and progress note.
3. Choose one change, such as renaming a field or adding one filter.
4. Try it locally. Give a concrete observation: “Clicking Save does nothing.”
5. When it works, save a Git checkpoint. Push only with awareness of the connected deployment branch.
6. Write the next step, stop the development server and close the tools before ejecting the drive.

Read our plan and docs/progress.md. Inspect the current folder and Git status. Tell me what is working and suggest the smallest next step. Do not overwrite uncommitted work or restart setup from scratch. Explain how I will know the next step is complete.

Pause changes and diagnose this problem. I expected: [what should happen]. I saw: [exact result or redacted error]. It started after: [last change, if known]. Inspect the relevant logs and current state. Explain the most likely cause and one focused check. Do not reinstall the whole stack, delete data or create replacement cloud resources as a first response.

A glossary in ordinary language.

Agent / agentic loop

An AI helper that uses tools across several steps, checks results and continues toward a task.

API

A defined way for software to ask another service for information or actions.

App Router

Next.js’s modern approach to organizing pages and server features.

Authentication

Checking who a person is, usually through sign-in.

Authorization

Checking what that person is allowed to see or change.

Backup

An independent recoverable copy. It is useful only if you can restore it.

Blob / object storage

A service that keeps files such as photos and PDFs.

Branch

A separate line of Git work, useful for trying a change before merging it.

Build

Preparing the source code into the application the host can run.

Callback URL

The app address a sign-in provider returns someone to after authentication.

CLI

Command-line interface: a tool you operate through terminal commands.

Commit

A named Git checkpoint of selected source changes.

Database

An organized store of records, such as users and their ideas.

Deployment

A built version of your app placed on a hosting service.

Environment

A setting in which the app runs, such as development, preview or production.

Environment variable

A named setting supplied separately from code; it may contain a secret.

Git

The tool that tracks source history on your computer.

GitHub

The online service for code repositories and collaboration.

Localhost

Your own computer, used to open a locally running app.

LTS

Long-Term Support: a release line maintained for stability over time.

MCP

Model Context Protocol: a shared connection format for AI tools and data.

Migration

A controlled change to database structure; it needs the correct target and a review.

Next.js

A framework for building React-based web applications with server features.

Node.js

The runtime that runs JavaScript tooling outside the browser.

npm / npx

npm installs and runs packages; npx can run a package tool such as the Next.js starter.

Package

A reusable piece of software your app or tools depend on.

PostgreSQL / Postgres

The database engine Neon hosts for this guide’s app.

Preview

A test deployment used to review a change before it reaches the main live app.

Production

The live environment intended for actual users.

Prompt

The instructions you give an AI assistant.

Push

Sending local Git commits to the remote repository.

Repository / repo

A project’s files and tracked source history.

SaaS

Software as a Service: an app people use online as an ongoing service.

Schema

The database’s structure: tables, fields and their relationships.

Secret

A private credential, such as a database password or service token.

Server-side

Work performed by the app’s backend, where secrets and access checks belong.

Serverless

A hosting approach where the provider manages much of the server operation.

Session

The app’s way of recognizing a signed-in person across requests.

SSD

Solid-state drive: storage without moving disk parts.

Terminal

A window for entering commands and reading their output.

TypeScript

JavaScript with extra type information that helps tools catch some mistakes.

Bounce

An email that the receiving mail server rejected.

DNS

Domain Name System: records that connect a domain to services and prove which services may send its email.

Resend

The email delivery service recommended in this guide for server-side app messages.

Sending domain

A domain or subdomain verified for sending email, such as mail.example.com.

Transactional email

A message triggered by a person’s account or app action, such as verification, password reset or a receipt.

Webhook

A signed server-to-server notification that reports an event such as email delivery or a bounce.

Vercel

The platform hosting the Next.js app in this guide.