How to Build and Deploy a Full-Stack App with AI in a Weekend (Next.js + Supabase + Vercel)

You can build and deploy a real full-stack web app with an AI agent in a weekend: plan it in a short spec, scaffold it with Next.js, add authentication and a database with Supabase, build one feature at a time with tests, run a security pass, and deploy to Vercel. This guide walks through exactly that, with the prompts we use at each step.

We'll build Streaks, a small habit tracker: users sign up, create habits, check them off each day, and see their streaks. It's simple enough to finish in a weekend, but it includes everything a real product needs: accounts, private data, a database, and a public URL.

This is the capstone of our free vibe coding roadmap. If you haven't yet, skim what is vibe coding and set up Git first.

What you'll need

• An AI coding agent: Claude Code, Cursor, Codex or Copilot agent mode. Any of them works.
• Node.js↗ (opens in a new tab) 20.9+ and Git installed
• Free accounts on GitHub↗ (opens in a new tab), Supabase↗ (opens in a new tab) and Vercel↗ (opens in a new tab)

Why this stack? Next.js, Supabase and Vercel are extremely common in AI training data and have generous free tiers, so agents build with them reliably.

Step 1: Write a one-page spec (30 minutes)

Before any code, write down what you're building. Create SPEC.md:

# Streaks: habit tracker

## Users
Individuals who want to build daily habits.

## Core features (v1)
1. Sign up / log in with email magic link
2. Create, rename and archive habits (max 10 per user)
3. Check off a habit for today; un-check if it was a mistake
4. See current streak and longest streak per habit
5. Responsive: works well on phones

## Out of scope for v1
Social features, reminders/notifications, payments, native apps.

## Data
- habits: id, user_id, name, created_at, archived_at
- check_ins: id, habit_id, user_id, date (unique per habit per day)

## Non-negotiables
- Users can only ever see and change their own data (RLS on every table)
- No secrets in client code

Then ask your agent to poke holes in it:

Read SPEC.md. Ask me up to 8 questions about anything ambiguous or missing,
especially edge cases (time zones for "today", streak rules, deleting habits).

Answer the questions and update the spec. This is spec-driven development, and it prevents most of the rewrites that plague vibe-coded projects. (Time zones, for example: decide now that "today" uses the user's local date.)

Step 2: Scaffold the project (15 minutes)

npx create-next-app@latest streaks
cd streaks
git add -A && git commit -m "Scaffold Next.js app"

Accept the defaults (TypeScript, Tailwind, App Router). Then start your agent in the folder and create a context file:

Create an AGENTS.md for this project based on SPEC.md. Include the stack
(Next.js 16, TypeScript, Tailwind, Supabase), commands, folder conventions,
and these rules: every table has RLS, always check the user owns a record,
validate input with zod, never put secrets in NEXT_PUBLIC_ variables,
await params (Next.js 16), use proxy.ts not middleware.ts.
Keep it under 80 lines.

Review it, edit it, and commit. Our AGENTS.md guide explains each section.

Step 3: Set up Supabase and authentication (1–2 hours)

1. Create a new Supabase project and copy the project URL and anon/publishable key into .env.local. (The anon key is designed to be public only because RLS protects your data.)
2. Confirm .env.local is in .gitignore.

Then prompt:

Plan first, then implement: add Supabase authentication with email magic links
using @supabase/ssr. Include:
- /login page with email input and "check your email" state
- auth callback route
- proxy.ts that refreshes the session and redirects logged-out users from /app/* to /login
- a server-side helper getUser() used by every server component and action under /app
- log out button
Follow Supabase's current Next.js App Router guide.

Test it yourself: sign up, log out, try visiting /app while logged out. Commit.

Tip: if the agent uses outdated Supabase APIs, give it the docs. A documentation MCP server or simply pasting the official guide's URL helps a lot.

Step 4: Create the database with Row Level Security (1 hour)

Create a Supabase SQL migration for the habits and check_ins tables from SPEC.md.
- Foreign keys, a unique constraint on (habit_id, date)
- Enable RLS on both tables
- Policies so users can only select/insert/update/delete rows where user_id = auth.uid()
Explain each policy in plain English before I run it.

Run the migration in the Supabase SQL editor (or with the Supabase CLI). Then test RLS with a second account: you should see nothing from the first. This one check prevents the most damaging class of vibe coding bug. See our security checklist.

Step 5: Build features one at a time (half a day)

Work through the spec's features in order, one prompt per feature, committing after each:

Implement feature 2 from SPEC.md (create, rename, archive habits) at /app.
- Use Server Actions with zod validation
- Enforce the 10-habit limit on the server
- Optimistic UI is nice-to-have, not required
- Add tests for the server actions, including the limit and a user trying to
  rename someone else's habit
Show me the plan first.

Implement features 3 and 4: daily check-in toggle and streak calculation.
Put streak logic in a pure function in lib/streaks.ts with thorough unit tests
(no check-ins, gaps, today not yet checked, leap years, user time zone).

Notice the pattern: logic in small, testable functions, and tests that cover edge cases. Tests let the agent verify its own work, which is the single best defense against the "fix one bug, create two" loop. If you do get stuck, use the techniques in debugging AI-generated code.

Step 6: Polish the UI (1–2 hours)

Make the /app dashboard feel polished on mobile and desktop: habit cards with a big
check button, current/longest streak, and a 4-week mini calendar per habit.
Use Tailwind, accessible color contrast, visible focus states, and an empty state
for new users. Take screenshots at 375px and 1280px wide and fix anything that looks off.

If your agent has browser access (via Playwright MCP, Antigravity's browser agent, or Cursor's browser), it can check its own work visually. You can also paste screenshots of designs you like.

Don't forget SEO basics for your public landing page; our Next.js SEO guide has a checklist, and the image optimization guide keeps it fast.

Placeholder copy written by your coding agent tends to be generic. Our guide to writing launch copy with Rytr covers the landing page, launch posts and onboarding emails.

Step 7: Security and quality pass (1 hour)

Before anyone else uses the app:

Run a pre-launch review of this app against these checks and report findings
by severity: secrets exposure, RLS on all tables, ownership checks in every
server action, input validation, error messages leaking details, rate limiting
on login, dependency audit (npm audit). Then fix critical and high issues.

Then do the manual two-account test again, and run npm run build to make sure everything compiles.

Step 8: Deploy to Vercel (30 minutes)

1. Create a GitHub repository and push: git remote add origin ... then git push -u origin main.
2. In Vercel, Add New Project and import the repo.
3. Add your environment variables (Supabase URL and anon key) in the Vercel project settings.
4. Deploy. You'll get a *.vercel.app URL in about a minute.
5. In Supabase Auth → URL Configuration, add your Vercel URL as the site URL and a redirect URL, or magic links will point to localhost.
6. Optional: add a custom domain in Vercel.

From now on, every push to main deploys automatically, and every pull request gets a preview URL.

Step 9: After launch

• Monitoring: add error tracking (e.g. Sentry) and Vercel Analytics.
• Backups: confirm your Supabase plan's backup schedule.
• Feedback loop: collect user feedback, update SPEC.md for v2, and repeat the same plan → build → test → review cycle.

Realistic timeline

About 10 focused hours. Your first project will take longer, and that's fine: you're learning how the pieces fit together.

Frequently asked questions

Do I need to know how to code to follow this?

No, but you'll learn a lot. Ask your agent to explain anything you don't understand, and read the prompting guide first.

Can I do this with Lovable or Bolt instead?

Yes. AI app builders can produce a similar app, often faster. The spec, step-by-step features and security pass still apply.

How much does it cost?

Supabase, Vercel and GitHub all have free tiers that cover a small app. Your main cost is the AI tool, typically around $20 per month.

What should I build after this?

Add a v2 feature from your "out of scope" list, like reminder emails or payments with Stripe. Each one teaches a new part of full-stack development.