Lovablefeatureintermediate
Add Email Notifications to Lovable App
Add transactional email notifications using Resend with templates for form alerts, welcome emails, and digests.
What you'll get
A complete email notification system with Resend integration, templates, preference management, and logging.
The Prompt
Add email notifications to my Lovable app using Resend. REQUIREMENTS: 1. Create a Supabase Edge Function "send-email" that accepts: to, subject, template name, and template variables. 2. Build HTML email templates using React Email components for: Welcome Email (sent on signup), Form Submission Alert (sent to admin when a form is submitted), and Status Update (sent to users when their request status changes). 3. Trigger welcome email automatically when a new user signs up using a Supabase database webhook on the auth.users table. 4. Trigger form alert email when a new row is inserted into any contact/inquiry table. 5. Add an email preferences page where users can opt in/out of different notification types. Store preferences in a "notification_preferences" table. 6. Include unsubscribe link in every email that updates preferences. 7. Log all sent emails in a "email_logs" table for debugging. DATABASE: - "notification_preferences" table: id, user_id, welcome_emails, form_alerts, marketing, created_at - "email_logs" table: id, to_email, template, subject, status, error, sent_at ENVIRONMENT VARIABLES: - RESEND_API_KEY - FROM_EMAIL (e.g., notifications@yourdomain.com) SECURITY: - Rate limit email sending to prevent abuse. - Validate email addresses before sending. - Never include sensitive data in email content.
Replace these variables
| Variable | Replace with |
|---|---|
| [FROM_EMAIL] | Verified sender email address in Resend |
| [NOTIFICATION_TYPES] | Types of emails to send (e.g., welcome, form alert, status update) |
Tips for best results
Verify your sending domain in Resend first — otherwise emails will land in spam.
Test emails with Resend's test mode before going live to avoid sending real emails during development.
Follow-up prompts
Add email templates
Create additional branded email templates for: password reset, payment receipt, weekly digest, and re-engagement. Use consistent header/footer across all templates.
Add webhook retry
Add retry logic to the email Edge Function with exponential backoff (3 attempts max). Log failed attempts in the email_logs table.