Build· Mixed

Build a webapp in a day

10-step playbook from blank idea to deployed app with auth, a database, and a domain — all in 24 hours. Battle-tested defaults so you don't waste 6 hours picking a stack.

Open in DockSolo builders + product engineers shipping fast

The bottleneck on a 1-day webapp is rarely the code: it's the 50 small decisions you make before you write the first line. This playbook collapses those decisions into 10 ordered steps with battle-tested defaults: Next.js + Tailwind + Postgres + Vercel + magic-link auth + Stripe. Each step is 30-90 minutes. Swap any default for your favourite, but ship the same skeleton.

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'.

Time1 day (24 hr wall clock; 8-10 hr active)DifficultyintermediateForSolo builders + product engineers who can write code.

What you'll need

Pre-register or install before you start.

Next.jsFree

Frontend + backend in one codebase. Default for 1-day apps.

VercelFree tier (Hobby)

Deploy on git push, custom domains free.

NeonFree tier (0.5 GB)

Serverless Postgres with a free tier and instant branching.

ResendFree (3k/mo)

Email API for magic-link auth + transactional email.

Stripe2.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

Top to bottom. Each step has tasks, pointers, gotchas.

Write the one-paragraph product brief

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)

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.

Pick the stack and scaffold the repo

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

OfficialNext.js getting started OfficialPrisma quickstart OfficialTailwind installation

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.

Set up the database (Postgres + Prisma)

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

OfficialNeon docs — Next.js + Prisma OfficialPrisma schema reference

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.

Wire up auth (magic links)

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

OfficialResend Next.js quickstart GuideMagic-link auth pattern (community)

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.

Build the core feature (1-2 hours)

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

OfficialNext.js Server Actions

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.

Add Stripe (only if you're charging)

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

CodeStripe Checkout — Next.js sample OfficialStripe webhooks setup

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.

Build the landing page

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

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.

Buy a domain and configure DNS

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

OfficialVercel custom domains OfficialCloudflare Registrar

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.

Deploy to Vercel and test in production

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

OfficialVercel deploy from GitHub OfficialVercel environment variables

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.

Launch: post on X, Product Hunt, your network

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

GuideProduct Hunt launch checklist OfficialShow HN guidelines

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

Workspace-wide agent prompt.

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

Agent system prompt

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

Common questions on this template.

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).

Open this template as a workspace.

We mint a fresh copy in your org with the steps as table rows, the pointers as a separate table, and the brief as a doc. Bring your agents, start checking off boxes.

Open in Dock