Email Configuration

This guide covers configuring email notifications using Resend for order confirmations and contact form submissions.

Why Resend?

The application uses Resend for transactional emails because:

Simple API with excellent developer experience
Generous free tier (100 emails/day, 3,000/month)
Custom domain support
React Email component support
Detailed delivery analytics

Create Resend Account

Go to resend.com
Click Start Building
Sign up with GitHub or email
Verify your email address

Get API Key

After login, go to API Keys
Click Create API Key
Configure the key:
- Name: sabbels-handmade-production (or similar)
- Permission: Full Access (or Send-only for production)
- Domain: Select your domain (or “All Domains”)
Click Create
Copy the API key (starts with re_)

Copy the API key immediately! It’s only shown once. Store it securely in your environment variables.

Configure Email Domain (Optional)

For production, use a custom domain for better deliverability.

Add Domain

In Resend dashboard, go to Domains
Click Add Domain
Enter your domain (e.g., sabbelshandmade.com)
Click Add

Configure DNS Records

Resend provides DNS records to add:

Add the provided SPF, DKIM, and DMARC records to your DNS
Wait for DNS propagation (up to 48 hours, usually faster)
Click Verify DNS Records in Resend dashboard

Until verified, you can use onboarding@resend.dev as the sender address for testing.

Update Sender Address

Once verified, update the sender in your code:

// From:
from: 'Sabbels Handmade <onboarding@resend.dev>'

// To:
from: 'Sabbels Handmade <orders@sabbelshandmade.com>'

Code reference: /api/src/server.js:417

Email Types

The application sends two types of emails:

1. Order Confirmation

Sent when a payment succeeds. Trigger: Stripe webhook payment_intent.succeeded Recipient: Shop owner (sabbelshandmade@gmail.com) Contains:

Order number and date
Customer name and email
Ordered items with sizes, colors, quantities
Total amount
Payment status

Code reference: /api/src/server.js:289-428 Template preview:

┌─────────────────────────────────────────┐
│   Nouvelle Commande!                    │
│   Sabbels Handmade                      │
├─────────────────────────────────────────┤
│ Commande #abc-123                       │
│                                         │
│ Date: 2 mars 2026, 14:30               │
│ Client: Jean Dupont                     │
│ Email: jean@example.com                 │
│ Statut: Payée ✓                        │
│                                         │
│ Articles commandés                      │
│ ┌─────────┬───────┬────────┬────┬─────┐│
│ │ Produit │ Taille│ Couleur│ Qté│ Prix││
│ ├─────────┼───────┼────────┼────┼─────┤│
│ │ Bonnet  │ M     │ Bleu   │ 1  │35.00││
│ └─────────┴───────┴────────┴────┴─────┘│
│                                         │
│ Total: 35.00 €                         │
└─────────────────────────────────────────┘

2. Contact Form

Sent when a customer submits the contact form. Trigger: POST to /api/contact Recipient: Shop owner (sabbelshandmade@gmail.com) Contains:

Customer name and email (with Reply-To)
Subject line
Message content
Optional file attachment (up to 10MB)
Timestamp

Code reference: /api/src/server.js:434-535

Set these environment variables:

API Server (.env)

# Resend API Key
RESEND_API_KEY=re_your_api_key_here

Recipient email is hardcoded: Code reference: /api/src/server.js:16-17

const EMAIL_TO = 'sabbelshandmade@gmail.com'

To change the recipient email, update the EMAIL_TO constant in /api/src/server.js.

Email Features

HTML Styling

Emails use inline CSS for compatibility:

Gradient header with brand colors
Responsive table layout
Clean typography
Proper spacing and padding

Order Email Details

The order confirmation email fetches:

Order information from orders table
Customer details from users table
Order items with product names from items table
Variant details (size, color) from item_variants and colors tables

Code reference: /api/src/server.js:292-322

const { data: order } = await supabase
  .from('orders')
  .select('*')
  .eq('id', orderId)
  .single()

const { data: orderItems } = await supabase
  .from('order_items')
  .select(`
    *,
    items:item_id (name),
    variants:variant_id (size, color_id, colors:color_id (name))
  `)
  .eq('order_id', orderId)

Contact Form Features

File attachments supported:

Maximum size: 10MB
All file types allowed
Attachment name and size shown in email

Code reference: /api/src/server.js:514-520

if (attachment) {
  mailOptions.attachments = [{
    filename: attachment.originalname,
    content: attachment.buffer,
  }]
}

Reply-To header: Replies go directly to customer’s email Code reference: /api/src/server.js:509

replyTo: email,

Testing Emails

Without Resend (Development)

If RESEND_API_KEY is not set:

Emails are logged to console instead of sending
Contact form returns success response
No actual emails sent

Code reference: /api/src/server.js:422-425

if (resend) {
  await resend.emails.send(mailOptions)
} else {
  console.log('RESEND_API_KEY not configured, skipping email')
}

With Resend (Production)

Test Order Email

Create a test order in your application
Complete payment with test card: 4242 4242 4242 4242
Check Resend dashboard Logs for delivery status
Verify email arrived at recipient inbox

Test Contact Form

Navigate to contact page
Fill out form with test data
Optionally attach a file
Submit form
Check email inbox and Resend logs

Monitor Deliverability

In Resend dashboard:

Go to Logs to see all sent emails
Click on an email to see:
- Delivery status
- Opens and clicks (if tracking enabled)
- Bounce/complaint status
- Full email content

Customizing Email Templates

To modify email templates, edit the HTML in: Order confirmation: /api/src/server.js:351-412 Contact form: /api/src/server.js:450-504

Tips for Email HTML

Use inline styles - Email clients don’t support <style> tags well
Use tables for layout - Flexbox/Grid not supported in many clients
Test in multiple clients - Gmail, Outlook, Apple Mail render differently
Keep it simple - Complex CSS often breaks
Use web fonts carefully - Many clients fall back to system fonts

Brand Colors

Current brand gradient:

background: linear-gradient(135deg, #8B7355 0%, #A0522D 100%);

Update these in both email templates to match your brand.

Production Checklist

Before going live:

Add and verify custom domain in Resend
Update sender address from onboarding@resend.dev to your domain
Set RESEND_API_KEY in production environment
Test order confirmation email with live payment
Test contact form with attachment
Configure SPF/DKIM/DMARC DNS records
Monitor email deliverability in Resend dashboard
Set up email forwarding/alias for recipient address

Next Steps

Troubleshooting

Emails Not Sending

Check console logs:

[Webhook] Email sent for order abc-123
# or
RESEND_API_KEY not configured, skipping order email

Verify API key:

Check RESEND_API_KEY is set in environment
Ensure key starts with re_
Verify key has send permissions

Emails Going to Spam

Solutions:

Verify custom domain with SPF/DKIM records
Don’t use onboarding@resend.dev in production
Ensure “From” address matches verified domain
Ask recipients to whitelist your sender address
Check Resend deliverability score

HTML Rendering Issues

Common problems:

Styles not applied → Use inline styles, not <style> tags
Layout broken → Use tables instead of divs for structure
Images not loading → Use absolute URLs, not relative paths
Fonts not working → Provide fallback system fonts

Test tools:

Litmus - Test across email clients
Email on Acid - Email testing platform
Send test emails to yourself in Gmail, Outlook, Apple Mail

Attachment Too Large

Maximum attachment size: 10MB Code reference: /api/src/server.js:30-33

const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 10 * 1024 * 1024 },
})

To increase:

Update limits.fileSize in server.js
Verify Resend supports larger attachments
Consider using file hosting instead for very large files

Configuration