​
What is Resend

Resend is an email API built for developers. It focuses on high deliverability, ease of integration, and a clean developer experience for sending transactional and marketing emails.

​
Step-by-step tutorial

This tutorial walks you through building a fully functional CRM in under an hour—complete with lead collection, email confirmation, newsletter subscription, and an internal admin dashboard. You’ll use:
  • Lovable: to generate the front end and backend logic.
  • Supabase: for secure data storage and authentication.
  • Resend: to automate and track transactional + marketing emails.
Let’s get started.
1

Create a Landing Page with a Contact Form

Use Lovable’s AI to quickly generate a landing page for your product or service.Instructions:
1

New Lovable Project

Create a new Lovable project.
2

Prompt:

Create a SaaS landing page with a contact form collecting name, email, and message.
Landing Page Lovable Project Pn
3

Inspect the generated code

Inspect the generated code or use the select tool to tweak elements.
4

Add input validation

Add input validation and a message field for better user experience.Email Resend Form Pn
2

Store Form Submissions in Supabase

Supabase acts as your secure backend database.
1

Supabase account

Create a free Supabase account and a new project.
2

API Key

In Lovable, connect your Supabase project using the API key.Supabase Resend Email Pn
3

Create a `contacts` table with:

  • id: UUID, primary key
  • name: text
  • email: text
  • message: text
  • created_at: timestamp
4

Submission logic

Modify the form submission logic to insert data into Supabase.
5

RLS

Apply Supabase Row-Level Security (RLS) to restrict access to only authenticated users.
3

Send Confirmation Emails via Resend

Set up Resend to send automated confirmation emails every time a lead submits the form.
1

Sign up at Resend

Sign up at Resend and verify your custom domain.
  • You’ll be asked to update your DNS records (TXT, MX).
  • Use subdomains like updates.domain.com to manage email reputation better.
2

API Key

Integrate the API key in Lovable via environment settings or backend function.
3

SDK

Use Resend’s SDK to send a confirmation email on form submission.Confirmation Email Submission Resend Pn
4

Optional: React Email

Use React Email (also by Resend) to customize the look and feel of your emails with reusable components.Customize Email Resend Pn
4

Build a Secure Admin Dashboard

Allow only authenticated users to view and manage leads.
1

Admin route

Create an /admin route in Lovable.
2

Supabase Authentication

Enable Supabase authentication with email/password login.
3

Contacts

Display the contacts table with columns:
  • Name
  • Email
  • Message preview
  • Submission date
4

Full contact detail

Add a detail pane (e.g., a sliding panel) showing full contact details when a row is clicked.Crm Resend Email Pn
5

Redirect logic

Add redirect logic so unauthenticated users are routed to /login.
5

Enable Custom Email Replies from Admin

Allow your team to send personalized follow-ups.
1

Contact detail pane

In the contact detail pane, add a text field and predefined templates (e.g., “Thanks for signing up!”).
2

Add send button

Add a send button wired to Resend.
3

Store sent messages

Store each sent message in a sent_emails table in Supabase:
  • contact_id
  • subject
  • body
  • sent_at
This gives you a searchable log of all follow-ups.
6

Add a Newsletter Subscription Form

Use Resend’s Audiences to manage subscribers and send broadcast emails.Subscription Newsletter Resend Pn
1

Add new form

Add a new form on your landing page for newsletter signup.
2

Resend contact

When submitted:
  • Create a Resend contact via the API
  • (Optional) Store the contact locally in Supabase as well
3

Design

Use Resend’s broadcast email UI to design and send newsletters.
  • Built-in unsubscribe logic
  • Performance insights (open rates, delivery status)
4

Compliance check!

For compliance (e.g. GDPR), consider implementing a double opt-in flow.
7

BONUS: Connecting Resend to Supabase Auth

Send Batch Emails Gdpr Resend PnWant to improve Supabase’s default email auth (which limits you to 4 emails/hour)?
1

Resend supabase

Go to Resend’s Supabase integration.
2

Authentication

Authenticate with your Supabase project.
3

Domain setup

Choose your domain and sender name/email.
4

SMTP

Resend automatically sets up SMTP and replaces Supabase’s default email system.
5

Customization

You can now customize auth email templates from the Supabase dashboard.
8

Final Touches & Best Practices

Audience Resend Pn
  • Error Handling: Lovable might show build errors that are false positives. Always test your functionality live.
  • Reverting with Supabase: If reverting code in Lovable, remember to manually delete associated Supabase policies or migrations—they’re not rolled back automatically.
  • Deliverability Tips:
    • Use subdomains to isolate reputation.
    • Always include a plain text version of your email.
    • Monitor email performance with Resend’s insights dashboard.
9

You're Done! 🎉

In less than an hour, you’ve built a modern CRM with:
  • A landing page and contact form
  • Database-powered lead storage
  • Automated email confirmations
  • Admin dashboard for lead management
  • Custom email replies
  • Newsletter broadcasts
  • Auth and email verification

​
Want to go further?

  • Add support for scheduled emails via Supabase cron jobs
  • Build automation flows to trigger emails based on lead stages
  • Style your UI for better brand trust and conversion

​
Resend Integration FAQ