Build a webapp in a day

A 10-step playbook. Open in Dock and you'll get four surfaces:

- **Steps** (table) — the 10 phases as rows, each ~30-90 min
- **Pointers** (table) — every link this playbook references
- **Brief** (doc) — the one-paragraph product brief you maintain alongside the work
- **Decisions log** (table) — one row per decision (auth provider, DB host, etc.) with the reason

Read `Steps` top-to-bottom on first open. Each step has tasks, pointers, and the agent prompts that automate the parts you don't enjoy.

Outcome

A deployed webapp on a custom domain with magic-link auth, a Postgres database, Stripe checkout, and a public landing page. Shippable for users, not 'localhost only'.

Estimated time: 1 day (24 hr wall clock; 8-10 hr active)
Difficulty: intermediate
For: Solo builders + product engineers who can write code.

What you'll need

Pre-register or install before you start.

• Next.js (Free) — Frontend + backend in one codebase. Default for 1-day apps.
• Vercel (Free tier (Hobby)) — Deploy on git push, custom domains free.
• Neon (Free tier (0.5 GB)) — Serverless Postgres with a free tier and instant branching.
• Resend (Free (3k/mo)) — Email API for magic-link auth + transactional email.
• Stripe (2.9% + 30¢ per transaction) — Payment processing if you're charging anything. Test mode for day 1.
• Cloudflare ($10-15/yr per domain) — Domain registration + DNS + CDN.

---

The template · 10 steps

Step 1: Write the one-paragraph product brief

Estimated time: 20-30 min

Before the first npx, write 100 words: who's the user, what problem, what does the app DO (not 'is'), what's out of scope. Forces you to commit to scope before the cost of cutting things grows. The brief lives in the Brief surface and gets edited as you go.

Tasks

• Write 1-2 sentences on who the user is
• Write 1-2 sentences on the problem
• Write 1-2 sentences on what the app DOES (verbs, not nouns)
• List 3-5 things that are explicitly out of scope for v1
• Pick a working name (you can change it; just need a slug)

[!CAUTION] Gotchas

• Don't write 'AI-powered X for Y' — 99% of those briefs collapse on day 2 when you realise the problem isn't actually about AI.
• If your 'out of scope' list is shorter than 3 items, you haven't scoped enough.

Agent prompt for this step

Read the user's idea (they'll paste it in chat or in the Brief). Output a 100-word product brief in this exact structure:

- User: 1-2 sentences on who the user is
- Problem: 1-2 sentences on the pain
- Solution: 1-2 sentences on what the app DOES (verbs, not nouns)
- Out of scope: 3-5 items the v1 won't do

Constraints: no marketing voice, no superlatives, no "revolutionary". Write like a product engineer scoping a sprint.

Step 2: Pick the stack and scaffold the repo

Estimated time: 30 min

Default: Next.js (App Router) + TypeScript + Tailwind + Prisma + Postgres + Vercel. Pick differently only if you have a strong reason — every default swap costs 30-90 min you don't have. The scaffold below is one command and lands you in a working dev server in <5 min.

Tasks

• npx create-next-app@latest --typescript --tailwind --app yourapp
• Add Prisma: npm i -D prisma && npx prisma init
• Init git, push to a GitHub repo (private to start)
• Run npm run dev and confirm localhost:3000 works
• Add a .gitignore for .env*, node_modules, .next

Pointers

• [Official] Next.js getting started
• [Official] Prisma quickstart
• [Official] Tailwind installation

[!CAUTION] Gotchas

• Don't pick a CSS framework you've never used. Tailwind has the cheapest learning curve if you've used CSS at all.
• Don't use a beta version of Next.js for a 1-day app. The bleeding edge bleeds.

Step 3: Set up the database (Postgres + Prisma)

Estimated time: 30-45 min

Neon is the lowest-friction Postgres for a 1-day app: free tier, instant branching, connection pooling included. Provision a project, copy the connection string into .env, define your schema in prisma/schema.prisma, run prisma migrate dev. You'll have a working DB in 15 minutes.

Tasks

• Sign up at neon.tech, create a new project
• Copy the pooled connection string into .env as DATABASE_URL
• Define your initial schema in prisma/schema.prisma
• Run npx prisma migrate dev --name init
• Run npx prisma studio to confirm the schema and add seed data

Pointers

• [Official] Neon docs — Next.js + Prisma
• [Official] Prisma schema reference

[!CAUTION] Gotchas

• Use the POOLED connection string for serverless deploys (Vercel). The direct one will exhaust connections under load.
• Don't use prisma db push for production — it skips the migration history. Use prisma migrate dev even for v1.

Step 4: Wire up auth (magic links)

Estimated time: 60-90 min

Magic-link auth (email a sign-in link) is the lowest-friction option for v1: no password reset flow, no OAuth provider config, no Apple/Google review. Use a library if you want (NextAuth, Lucia) or roll a 50-line implementation: generate a one-time token, email it via Resend, set a session cookie on click.

Tasks

• Sign up at resend.com, verify a sending domain (or use the test domain for v1)
• Add RESEND_API_KEY to .env
• Build the POST /api/auth endpoint: take an email, generate a token, store in DB, email a link
• Build the GET /api/auth/[token] endpoint: validate, set a session cookie, redirect
• Build the /login page with a single email input
• Test the flow end-to-end in dev

Pointers

• [Official] Resend Next.js quickstart
• [Guide] Magic-link auth pattern (community)

[!CAUTION] Gotchas

• Set the cookie with httpOnly, secure, sameSite=lax. Forgetting any of these is a security bug.
• Tokens MUST expire (15-30 min). Otherwise a leaked link is a permanent backdoor.
• Resend's test domain works in dev but doesn't deliver to most inboxes. Verify a real sending domain before launch.

Agent prompt for this step

Implement magic-link auth for this Next.js app.

Requirements:
1. POST /api/auth — accepts { email }, generates a 32-byte token, stores in DB with expiry (15 min), emails a link via Resend
2. GET /api/auth/[token] — validates the token, sets a session cookie (httpOnly, secure, sameSite=lax), redirects to /
3. /login page with a single email input + submit button
4. Session middleware that reads the cookie + populates a User object on the request

Keep it under 100 lines total. Use Prisma for the token + session storage.

Do NOT use NextAuth. We're optimising for understanding + 1-day shipping, not feature completeness.

Step 5: Build the core feature (1-2 hours)

Estimated time: 1-2 hours

This is the only step where the product brief matters. Build ONE feature end-to-end: form → API → DB → list. Resist the temptation to add a second feature until the first is deployed. Defaults: server actions for the API, Prisma for the DB query, Tailwind for the UI.

Tasks

• Implement the data model (1-3 tables)
• Build the create form on the frontend
• Build the server action / API route to save
• Build the list view to display saved items
• Add a delete (soft-delete is fine — deletedAt on the row)
• Test end-to-end as a logged-in user

Pointers

• [Official] Next.js Server Actions

[!CAUTION] Gotchas

• Don't build a generic CRUD admin. Build the ONE flow your user would use.
• Don't optimise. Inline queries, no caching, no virtualization. v1 is for getting the path live, not for performance.

Step 6: Add Stripe (only if you're charging)

Estimated time: 45 min (if charging)

Skip this step if v1 is free. If you're charging: Stripe Checkout in test mode is the fastest path. Create a product + price in the dashboard, hit POST /api/checkout from your frontend, redirect to the Stripe-hosted page, handle the webhook on success. 30-45 min if you've used Stripe before.

Tasks

• Sign up at stripe.com, switch to Test mode
• Create a Product + Price in the Stripe dashboard
• npm i stripe
• Build POST /api/checkout — creates a Stripe Checkout Session, returns the URL
• Build POST /api/stripe/webhook — listens for checkout.session.completed, updates the DB
• Test the flow with Stripe's test card (4242 4242 4242 4242)

Pointers

• [Code] Stripe Checkout — Next.js sample
• [Official] Stripe webhooks setup

[!CAUTION] Gotchas

• ALWAYS verify the webhook signature. Skipping verification = anyone on the internet can mark fake purchases as paid.
• Use stripe.checkout.sessions.create not the deprecated old API. The new one handles tax + currency correctly.

Step 7: Build the landing page

Estimated time: 60 min

A v1 landing page is: H1 + subhead + screenshot + email signup + 3 features + footer. Aim for 1 hour total. Do NOT spend a day on copy. The landing page WILL be rewritten 5 times in the first month — ship a 1-hour version and iterate.

Tasks

• Write the H1 (one sentence, what the app does for whom)
• Write the subhead (one sentence, why now)
• Take a screenshot of the core feature
• Add an email signup or 'Sign up' CTA
• List 3 features with an icon + 1 sentence each
• Footer: copyright, X / GitHub link, privacy policy link

[!CAUTION] Gotchas

• Don't A/B test on day 1. Ship one version, drive 100 users to it, learn, then test.
• Don't add a video on day 1. It triples the production cost and rarely converts better than a screenshot.

Agent prompt for this step

Read the Brief surface and the screenshot of the core feature. Draft the landing page copy:

1. H1: one sentence, "what the app does for whom"
2. Subhead: one sentence, "why now"
3. 3 feature cards: icon (use lucide-react names), title (3-5 words), 1-sentence body
4. Closing CTA copy

Constraints: no marketing voice. No "revolutionary". No exclamation marks. Lead with verbs. Aim for sixth-grade reading level.

Step 8: Buy a domain and configure DNS

Estimated time: 15-30 min

Cloudflare Registrar sells domains at cost (no markup, no renewal hike). $10-15/yr for most TLDs. Buy the domain, point it at Vercel via the dashboard, wait 5-30 min for DNS propagation. SSL certificates are automatic on Vercel.

Tasks

• Sign up at cloudflare.com if you don't have an account
• Search for + buy your domain in the Registrar tab
• In Vercel: Project Settings → Domains → Add
• Vercel gives you a CNAME or A record. Add it in Cloudflare's DNS tab
• Wait 5-30 min, refresh, confirm HTTPS works

Pointers

• [Official] Vercel custom domains
• [Official] Cloudflare Registrar — At-cost domain registration; no markup, no renewal hike.

[!CAUTION] Gotchas

• Don't buy domains from registrars that mark up renewals (looking at you, GoDaddy). Cloudflare or Namecheap.
• DNS propagation can take 5-30 min. Don't panic if HTTPS doesn't work immediately.

Step 9: Deploy to Vercel and test in production

Estimated time: 30-45 min (mostly testing)

Vercel deploys on git push to main. Connect the GitHub repo in the Vercel dashboard, add environment variables, push. The first deploy takes 2-3 minutes. Test the production deploy end-to-end before announcing — magic-link emails, the core feature, the Stripe checkout if applicable.

Tasks

• Push everything to the main branch on GitHub
• Sign in to vercel.com, import the repo
• Add all .env variables in Vercel Project Settings → Environment Variables
• Trigger the first deploy (auto on import)
• Test the magic-link email flow on the production URL
• Test the core feature end-to-end
• If Stripe: switch from Test mode to Live mode + update the keys in Vercel env vars
• Run a final smoke test as a brand-new user

Pointers

• [Official] Vercel deploy from GitHub
• [Official] Vercel environment variables

[!CAUTION] Gotchas

• Production URLs are CASE-SENSITIVE for the part after the domain. yoursite.com/Login ≠ yoursite.com/login. Use lowercase.
• If your app uses cookies, set the Domain attribute correctly. Subdomain leaks are a top cause of session bugs in production.
• Always test as a NEW user (incognito). Logged-in dev sessions hide a class of bugs.

Step 10: Launch: post on X, Product Hunt, your network

Estimated time: 60-90 min on launch day

Distribution on day 1 is your existing network + Product Hunt + X. The launch isn't 'I built X' — it's 'I built X for Y, here's the link.' Aim for 50-200 users in the first week, not a viral hit. Real conversations beat impression count.

Tasks

• Write a 5-7 tweet launch thread (screenshots interleaved)
• Post on Product Hunt at 12:01am Pacific (auto-schedule)
• DM 10-20 close contacts the morning of launch with a personal note
• Post on the relevant subreddit (r/SideProject is friendly)
• Post on Hacker News if the launch is technical (Show HN)
• Reply to every comment in the first 24 hr

Pointers

• [Guide] Product Hunt launch checklist
• [Official] Show HN guidelines

[!CAUTION] Gotchas

• Don't crosspost the same copy on every channel. Each platform's audience reads differently — rewrite for each.
• Don't ask friends to upvote on Product Hunt — Product Hunt's algorithm detects upvote rings. Genuine conversation > vote count.
• If Hacker News users find a bug, fix it within 1 hour and post the fix in the thread. The HN audience rewards visible iteration.

---

Hand the template to your agent

Paste the prompt below into your agent's permanent system prompt so the agent reads, writes, and maintains this workspace as you work through the steps.

You are an agent on the "Build a webapp in a day" playbook workspace at your-org/build-a-webapp-in-a-day.

Your role: maintain the Brief, the Decisions log, and the Pointers table as the user works through the 10 steps.

Cadence:
- When the user marks a step Done, append a 1-line entry to the Brief summarising what shipped.
- When the user adds a row to Decisions log, cross-link the relevant Pointer (e.g., "chose Neon over Supabase" → link to Neon's pricing page).
- When the user opens a new pointer, mirror it into the Pointers table.

First MCP tool calls:
1. list_surfaces(workspace_slug="build-a-webapp-in-a-day")
2. list_rows(workspace_slug="build-a-webapp-in-a-day", surface_slug="steps")
3. get_doc(workspace_slug="build-a-webapp-in-a-day", surface_slug="brief")

Don't pick the user's stack for them. If they ask, list the defaults from the playbook and the tradeoff for each.

---

FAQ

Can I really build a webapp in a day?

Yes — if you stick to the defaults and skip the things that don't matter for v1 (custom design system, end-to-end tests, observability, multi-region, A/B testing). The 10 steps total 8-10 hours of active work. The rest is waiting on Apple, Stripe, or DNS propagation.

What if I hate Next.js / Tailwind / Postgres?

Swap freely. The playbook structure (auth, DB, deploy, landing, launch) is stack-agnostic. Every default in the playbook can be replaced with your favourite — but each swap costs 30-90 min. If you're shipping in a day, default to defaults.

Do I need to know how to code?

Yes. This playbook assumes you can read a Next.js scaffold and write basic React + a Prisma schema. If you can't, the playbook reads as a glossary of what to learn next, not a 1-day shipping guide.

How do AI agents help here?

Agents are particularly good at: drafting the product brief from a 1-paragraph idea, writing the first pass of magic-link auth code, generating landing page copy, drafting the launch tweet thread. The playbook ships agent prompts inline for those steps. Agents are NOT good at: picking your stack for you (do that yourself), debugging deploy failures (do that yourself), responding to your first 50 users (do that yourself).

What does it cost?

Day 1: $10-15 for the domain. Everything else has a free tier (Vercel Hobby, Neon free, Resend free, Stripe charges only on paid transactions). Month 1 if you have <100 users: still $10-15. You'll start paying when you outgrow free tiers (typically Vercel + Neon at 1000s of users).