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

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.

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.

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.

4

Optional: React Email

Use React Email (also by Resend) to customize the look and feel of your emails 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.

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.

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

Want to improve Supabase’s default email auth (which limits you to 4 emails/hour)?

1

Resend supabase

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

  • 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

Was this page helpful?