Thanks to visit codestin.com
Credit goes to docs.lovable.dev

Skip to main content

​
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.
SaaS landing page with a contact form collecting name, email, and message fields
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.Contact form with input validation showing name, email, and message fields
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 connection interface in Lovable showing API key configuration
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.Resend SDK integration sending a confirmation email on form submission
4

Optional: React Email

Use React Email (also by Resend) to customize the look and feel of your emails with reusable components.React Email template editor for customizing email design with reusable components
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 admin dashboard showing contacts table with name, email, message preview, and submission date columns
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.Newsletter subscription form on a landing page for collecting email signups
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

Resend Supabase integration setup for replacing default email authenticationWant 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

Resend Audiences dashboard for managing newsletter subscribers and broadcast emails
  • 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

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.
No. You can complete the entire CRM setup using Resend’s free tier, which supports sending emails from a verified domain and up to 3,000 contacts for marketing emails.
Go to Resend → Domains → Add your domain. You’ll be given DNS records (TXT, MX) to add via your DNS provider (e.g., Cloudflare, Namecheap). Once added, click Verify.
Use a subdomain like updates.yourdomain.com to isolate your email reputation.
There are a few common reasons:
  • You haven’t verified your domain
  • Your email lacks a plain-text version
  • You’re sending from a generic sender like [email protected]
  • You’re not following best practices (e.g., missing unsubscribe links in marketing emails)
Use Resend’s Deliverability Insights panel to get actionable tips.
Yes. Use React Email—an open-source library by the Resend team—to design styled, responsive emails with React components.
Resend supports both:
  • Transactional emails (confirmation, reset, notifications) using the API or SDK.
  • Marketing emails via the Broadcast feature and Audiences.
You can create, preview, and track campaigns from the dashboard.
Use Audiences:
  • Add contacts manually, via CSV, or programmatically using the API.
  • Each Audience has a unique ID you can use to associate subscriptions.
  • Users can unsubscribe automatically via Resend’s built-in unsubscribe link.
Not by default, but you can implement it manually:
  1. On form submission, send an initial confirmation email.
  2. Ask users to click a link.
  3. On click, confirm their subscription and add them to your Resend audience.
Not yet. Resend doesn’t currently support drip campaigns or automated sequences.
Workaround:Use Supabase Cron Jobs to schedule tasks that trigger Resend emails at set intervals.
Use the official Supabase Integration by Resend:
  1. Authenticate with your Supabase project.
  2. Provide a domain and sender name.
  3. Resend automatically configures your Supabase auth emails to use your Resend account.
Resend automatically processes unsubscribes:
  • You must include an unsubscribe link in broadcast emails.
  • When a user unsubscribes, they are removed from the selected audience.
  • This is required for email compliance (e.g., CAN-SPAM, GDPR).