Vibe Coding (7) — Connect Your Waitlist Form to Supabase + Welcome Email via Resend

Vibe Coding (7) — Connect Your Waitlist Form to Supabase + Welcome Email via Resend

In this guide, you will wire the SaaS waitlist landing page you built in Article 06 to a real database (Supabase) so submissions actually save, then add a welcome email (Resend) that goes out automatically every time someone joins your waitlist. By the end of this article, your waitlist is genuinely functional — every signup is captured, every signup gets a confirmation email, and you can export your list any time.

Difficulty: ★★★☆☆ (Adds two service integrations; the patterns are simple but the setup has more moving parts than Articles 04–06)
Required Tools: v0 + Supabase account (free) + Resend account (free, 3,000 emails/month)
Updated: May 2026

Overview

Article 06 built the landing page. The waitlist form looked functional from a visitor's perspective — they typed an email, clicked submit, saw a thank-you message — but the form was a placeholder. Submissions vanished. No database stored them, no email confirmed them. For private feedback rounds that was fine; the visitor never knew. But before you promote the landing page broadly, the form needs to actually work. This article makes that happen.

The architecture is straightforward: when someone submits the waitlist form, the email goes into a Supabase database table, and at the same moment a welcome email goes out via Resend. Both services have generous free tiers — Supabase covers far more usage than you'll need pre-launch, and Resend's 3,000-emails-per-month free tier covers a waitlist of up to ~3,000 signups before you'd need to pay. Total ongoing cost for a typical pre-launch waitlist: $0/month. Total setup time today: 60–90 minutes.

The article covers both integrations end-to-end. Supabase setup (one-click from v0, plus creating your waitlist table). Form wiring (prompting v0 to save submissions to the new table). Resend setup (signup, domain verification, API key in v0). Email sending (welcome email triggered on every signup). End-to-end verification (signing up yourself, confirming the email arrives, checking the row appears in Supabase). Export workflow (how to download your signups list when you're ready to launch). After this article, your waitlist is launch-ready.

Who This Is Useful For

What You Will Learn

By the end of this article, you'll be able to do six things:

What You Need

Step 1 — Why Supabase + Resend (vs Other Options)

A quick word on why this particular stack. v0 supports several database options — Supabase, Neon, Upstash for Redis, and Vercel Blob — and there are many email providers besides Resend. For a SaaS waitlist landing page specifically, Supabase + Resend is the right default for three reasons.

Supabase is the right database for this use case. It's a PostgreSQL database with a polished dashboard, generous free tier (500 MB storage, 50,000 monthly active users, plenty for any pre-launch waitlist), built-in row-level security if you ever need it, and excellent CSV export. The alternative — Neon — is also PostgreSQL but more developer-focused; its dashboard isn't as friendly for browsing waitlist entries. Vercel Blob is for file storage, not structured data. Upstash is key-value, not relational.

Resend is the right email service for new builders. Its 3,000 free emails per month covers most pre-launch waitlists. Its React Email integration means v0 can generate beautiful welcome emails as React components (matching your landing page's design language). Its dashboard makes debugging deliverability issues easy. Alternatives like SendGrid and Postmark are more enterprise-focused and have steeper learning curves. Resend was built specifically for the modern indie-builder workflow that vibe coding fits into.

The two services together cover the entire waitlist pipeline. Supabase stores signups; Resend confirms them. You don't need any other services. The whole stack is "v0 (frontend) + Supabase (data) + Resend (email)" — three services, all with free tiers that scale to real production usage.

Step 2 — Connect Supabase to v0 (5 Minutes)

Open your waitlist project in v0. In the chat sidebar (left side of the v0 interface), find the Connect button. Click it. You'll see a panel showing the available integrations: Supabase, Neon, Upstash, Vercel Blob, and others.

Click Supabase. You'll see two options:

For your first time, click Create. v0 opens the Vercel Marketplace flow for Supabase. Accept the click-through terms; v0 provisions a new Supabase account/project for you and adds the necessary environment variables (SUPABASE_URL, SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY) directly to your v0 project.

After 30–60 seconds, you'll see Supabase appear under the Connect panel as a connected integration. You're done with the setup half. Now you need a table to store waitlist signups.

Step 3 — Create Your Waitlist Database Table

In v0's chat, prompt:

Create a Supabase table called "waitlist" with these columns:
id (uuid, primary key, auto-generated)
email (text, required, must be unique)
created_at (timestamp, default now())
source (text, optional — to track where the signup came from,
  e.g., "hero_form" vs "footer_form")
user_agent (text, optional — captures the browser info for
  analytics purposes)
ip_address (text, optional — for spam detection later)
referrer (text, optional — what page sent them here)
Make email a unique constraint so the same person can't sign
up twice. Use UUID for the id column.
Generate and run the SQL to create this table in my connected
Supabase project.

v0 generates the SQL, asks for your confirmation to run it against your Supabase project, and creates the table. The whole thing takes 15–20 seconds. Verify it worked by going to your Supabase dashboard (supabase.com/dashboard), opening your project, clicking Table Editor, and confirming you see the waitlist table with all the columns.

The reason for these specific columns:

You don't need all of these for v1; you'd be fine with just id, email, and created_at. The extra columns cost nothing to have, and you'll be grateful for them later when you want to answer questions like "how many of my signups came from Twitter?"

Step 4 — Wire Your Form to Save Submissions

Now connect the form's submission action to the table. Prompt v0:

Update the waitlist form so that when a user submits, the email
is saved to the Supabase "waitlist" table.
Form behavior requirements:
1. Validate the email format on the client (before submission)
2. Submit the email to Supabase, capturing:
   - email
   - source ("hero_form" for the Hero CTA, "footer_form" for
     the footer CTA — use the appropriate one based on which
     form was submitted)
   - user_agent (from navigator.userAgent)
   - referrer (from document.referrer)
3. If the email already exists in the table (unique constraint
   violation), show a friendly message: "You're already on the
   list! We'll be in touch."
4. If submission succeeds, replace the form with a thank-you
   state
5. If submission fails for any other reason, show a generic
   error: "Something went wrong. Please try again or email
   us directly."
Use the Supabase JavaScript client. The environment variables
are already set up — use SUPABASE_URL and SUPABASE_ANON_KEY.
Use a server action (Next.js Server Action) for the submission
so the keys stay server-side. Don't expose the service role key.

v0 generates the integration code — typically a server action plus updates to your form components. It runs you through a confirmation. Approve.

A few important details to verify in v0's output:

v0 will also automatically test the integration. You'll see "Testing form submission..." in the chat panel as v0 simulates a submission against your Supabase project. If it succeeds, you'll see a confirmation; if anything fails, v0 typically debugs and fixes itself before reporting back.

Step 5 — Test the Save Flow

Test the integration manually before adding emails to the mix. Open your v0 preview URL in your browser. Submit your own email through the Hero form. Check the v0 chat panel — there should be no errors. Open your Supabase dashboard, go to the Table Editor, and refresh the waitlist table. You should see a new row with your email, source: hero_form, the current timestamp, and the user agent.

Now test the duplicate-email path. Submit your email again. The form should show "You're already on the list!" instead of saving a duplicate row.

Now test the footer form. Submit a different email through the footer CTA. Refresh Supabase; you should see this new row with source: footer_form.

Three test cases, three confirmations. The save flow is now working. The form looks the same to users as it did before, but now their data is actually persisting.

Step 6 — Set Up Resend

Now the email side. Go to resend.com and click Sign Up. Use the same email you use for Vercel/v0 (makes future debugging easier if all services use the same account). The free tier requires no credit card.

Resend gives you two ways to send emails:

For a real launch, use your own verified domain. The deliverability difference is real — emails from onboarding@resend.dev have noticeably higher spam rates than emails from your own domain. If you don't have a domain yet, this is a good moment to buy one (Article 02 covers the workflow).

Domain verification process:

1. In Resend dashboard, click Domains → Add Domain
2. Type your domain (e.g., promptvault.app)
3. Resend gives you 3-4 DNS records to add (SPF, DKIM, MX)
4. Open your domain registrar's DNS settings (Cloudflare, Vercel Domains, Namecheap)
5. Add the DNS records exactly as Resend shows
6. Click Verify in Resend — usually verifies within 5 minutes

Once your domain shows as Verified in Resend, you can send emails from any address at that domain (hello@, welcome@, team@).

Get your API key:

Step 7 — Add Resend to Your v0 Project

Back in v0, prompt:

Integrate Resend to send a welcome email every time someone
signs up via the waitlist form.
Setup:
1. Add an environment variable RESEND_API_KEY (I'll paste my
   API key into the Vars panel — prompt me when needed)
2. My verified sending domain in Resend is: [your domain, e.g.,
   promptvault.app]
3. The from address should be: [your choice, e.g., hello@
   promptvault.app]
4. The from name should be: [your choice, e.g., "Marcus from
   PromptVault"]
Welcome email content:
Subject: "Welcome to the PromptVault waitlist 🎉"

Body (HTML, with a nice React Email template):

  - Greeting: "Hey there,"
  - Paragraph 1: "Thanks for joining the waitlist for
    PromptVault. We're a small team building [one-sentence
    product description]."
  - Paragraph 2: "We'll email you the moment we open early
    access. In the meantime, you can follow our build journey
    on Twitter/X at @promptvault."
  - Paragraph 3: "If you have feedback or want to share what
    you're hoping to use this for, just reply to this email —
    it goes straight to me."
  - Sign-off: "— Marcus (founder)"
  - Footer: small text with our website URL
Trigger the email immediately after a successful submission to
Supabase (so both happen in the same server action). If the
email send fails, log the error but still confirm the signup
to the user (don't punish the user for an email service issue).

v0 will prompt you to paste your Resend API key into the Vars panel — do this. v0 then generates the email template (as a React Email component, which gives you the same JSX/Tailwind workflow you've used for the landing page), updates the server action to send the email after a successful Supabase insert, and runs a test.

A few details to verify in v0's output:

Step 8 — End-to-End Verification

Time for the moment of truth. Open your v0 preview URL in a private browsing window (to avoid any cached state). Submit your real email.

Check three things in order:

If all three work, congratulations — your waitlist is now functional end-to-end.

If any of the three failed:

For each issue, paste the error back to v0 in the chat and say "this happened — fix it." v0 reads its own output and patches issues quickly.

Step 9 — Export and Use Your Waitlist Data

You're now collecting signups. Here's how to use them.

Browse signups in Supabase Dashboard. Go to your project's Table Editor; the waitlist table shows every entry, sortable by date. You can search by email, filter by source (to see which CTA is converting best), or sort by created_at to see your most recent signups.

Export to CSV when needed. In the Table Editor, click the menu → Export to CSV. You get a downloadable file with every signup. Use this when you need to import into another tool (Mailchimp, Customer.io, your launch email service).

Run SQL queries for insights. Click SQL Editor in Supabase. Useful queries to save:

sql
-- Total signups
SELECT COUNT(*) FROM waitlist;
-- Signups per day for the past 30 days
SELECT DATE(created_at) AS day, COUNT(*) AS signups
FROM waitlist
WHERE created_at > NOW() - INTERVAL '30 days'
GROUP BY day
ORDER BY day DESC;
-- Hero form vs footer form conversions
SELECT source, COUNT(*) AS signups
FROM waitlist
GROUP BY source;
-- Top referrers (where signups came from)
SELECT referrer, COUNT(*) AS signups
FROM waitlist
WHERE referrer IS NOT NULL AND referrer != ''
GROUP BY referrer
ORDER BY signups DESC
LIMIT 10;

These queries give you the launch analytics you need without setting up a separate analytics tool.

Common Mistakes to Avoid

Three patterns we see in real waitlist deployments.

Mistake #1: Skipping domain verification with Resend. Sending from onboarding@resend.dev is convenient for testing but has noticeably worse deliverability for real users. Before promoting your landing page broadly, set up a verified domain. The 15-minute DNS configuration pays back in dramatically better inbox placement.

Mistake #2: Asking too much in the signup form. v0 might suggest adding name, company, role, use case to the form. Resist. Every additional field reduces signup conversion 5–15%. Email-only is the right default for a waitlist. You can collect additional info later via a follow-up survey to verified signups.

Mistake #3: Forgetting to test in real conditions. Testing only with your own email on your own device misses dozens of edge cases — Gmail vs Outlook spam differences, mobile email rendering issues, what the welcome email looks like in dark mode. Spend 30 minutes testing across 3+ email providers and devices before broadly promoting.

Going Further

Promote your waitlist now that it works. With Supabase capturing data and Resend confirming signups, you're production-ready. Share on Twitter/X, on Hacker News (if appropriate), in relevant subreddits, in your newsletter, in Slack communities. Real promotion is where waitlists earn their cost — pre-launch traction validates demand and gives you a launch audience.

Set up a launch announcement template now. Don't wait until launch day to figure out what your launch email will say. Draft it now while everything's fresh in your mind. When launch day comes, you'll just need to send — not write from scratch under launch-day stress.

Add basic analytics. Vercel Analytics is one-click in v0 and free up to a generous threshold. Track which pages get visited, which forms get submitted, what time of day people sign up. This data shapes your future content and promotion strategy.

Read the next article — Article 08 starts App #3 with the Freelancer Rate Calculator. Different complexity entirely: this is a real interactive tool with computation, plus the most ambitious feature — accepting actual payment via Lemon Squeezy for a premium PDF download. The skills from Articles 04–07 all combine.

Key Takeaways

Here's what you learned in this guide:

Your waitlist landing page is now genuinely production-ready. Every signup saves to a database you control. Every signup gets a confirmation email that looks professional. You can browse the data, export it, run analytics — all without any additional tools. Promote freely; the technical infrastructure can handle whatever traffic your marketing produces.