[ [0x40] Features ] Email With Resend

Email With Resend

> Production-ready email system with React Email templates, queue-based sending, and beautiful transactional emails.

Overview

[ [0x40] STATUS ]

Fabrk uses Resend for email delivery with lightweight HTML templates. The system supports lightweight HTML templates for maximum performance, dual-mode sending (immediate for auth emails, queued for bulk), pre-built templates for common emails, zero-dependency template system, and automatic retry and error handling.

Features

[ [0x01] USER_ONBOARD ]

STATUS: READY

DESC: Queue a series of welcome emails with delays: Day 1 welcome, Day 3 tips, Day 7 feature highlight.

[ [0x02] ORGANIZATION ]

STATUS: READY

DESC: Send branded invite emails with accept/decline links. Include inviter name and organization details.

[ [0x03] PAYMENT_RECE ]

STATUS: READY

DESC: Automatic receipt emails triggered by Stripe webhooks. Include amount, product details, and invoice PDF link.

[ [0x04] ACTIVITY_NOT ]

STATUS: READY

DESC: Notify users of important events: new team member joined, project updated, comment received.

Setup

[ [0x01] SET UP RESEND ]

DESC: Add your Resend API key to .env.local

1$RESEND_API_KEY="re_xxxxxxxxxxxx"
2$EMAIL_FROM="Your App <noreply@yourdomain.com>"

[ [0x02] CONFIGURE DOMAIN ]

DESC: Set up your sending domain in Resend dashboard: Go to Resend Dashboard → Domains, add your domain, add the DNS records (SPF, DKIM, DMARC), and verify domain status.

[ [0x03] START EMAIL WORKER ]

DESC: For queued emails, run the worker

1$npm run email:dev
2$# Watches queue and sends emails with auto-restart

Usage

[ [0x38] EMAIL TEMPLATE EXAMPLE ]

Templates are in src/emails/. Pre-built templates include welcome, verify-email, reset-password, purchase-confirmation, and subscription-update.

1// src/emails/welcome-html.ts
2export interface WelcomeEmailProps {
3  name: string;
4  licenseKey: string;
5  downloadUrl: string;
6}
7
8export function generateWelcomeEmailHTML({
9  name,
10  licenseKey,
11  downloadUrl,
12}: WelcomeEmailProps): string {
13  return `
14<!DOCTYPE html>
15<html lang="en">
16<head>
17  <meta charset="UTF-8">
18  <title>Welcome to Fabrk!</title>
19</head>
20<body style="margin: 0; padding: 0; font-family: system-ui, sans-serif;">
21  <div style="max-width: 600px; margin: 0 auto; padding: 40px;">
22    <h1>Welcome to Fabrk, ${name}!</h1>
23    <p>Thank you for your purchase.</p>
24
25    <div style="background: #f4f4f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
26      <strong>Your License Key:</strong>
27      <code style="display: block; font-size: 18px; margin-top: 10px;">${licenseKey}</code>
28    </div>
29
30    <a href="${downloadUrl}" style="background: #000; color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 6px; display: inline-block;">
31      Download Now
32    </a>
33  </div>
34</body>
35</html>
36  `.trim();
37}

[ [0x05] DIRECT SENDING (AUTH EMAILS) ]

For immediate delivery (verification, password reset)

1import { sendVerificationEmail, sendResetEmail } from "@/lib/email";
2
3// Send verification email
4await sendVerificationEmail({
5  to: user.email,
6  name: user.name,
7  token: verificationToken,
8});
9
10// Send password reset email
11await sendResetEmail({
12  to: user.email,
13  name: user.name,
14  resetUrl: `${config.app.url}/reset-password?token=${token}`,
15});

[ [0x8B] QUEUED SENDING (TRANSACTIONAL) ]

For non-urgent emails (welcome, receipts)

1import { queueWelcomeEmail, queueConfirmationEmail } from "@/lib/email";
2
3// Queue welcome email
4await queueWelcomeEmail({
5  to: user.email,
6  name: user.name,
7  loginUrl: `${config.app.url}/login`,
8});
9
10// Queue payment confirmation
11await queueConfirmationEmail({
12  to: user.email,
13  name: user.name,
14  amount: payment.amount,
15  productName: payment.productName,
16  receiptUrl: payment.receiptUrl,
17});

[ [0xD9] CUSTOM EMAIL SENDING ]

Send any HTML content

1import { Resend } from "resend";
2import { env } from "@/lib/env";
3
4const resend = new Resend(env.server.RESEND_API_KEY);
5
6await resend.emails.send({
7  from: env.server.EMAIL_FROM,
8  to: "user@example.com",
9  subject: "Your Custom Subject",
10  html: "<h1>Hello World</h1><p>This is a custom email.</p>",
11});

[ [0xCC] BATCH SENDING ]

Send to multiple recipients

1import { Resend } from "resend";
2import { env } from "@/lib/env";
3
4const resend = new Resend(env.server.RESEND_API_KEY);
5
6const emails = users.map((user) => ({
7  from: env.server.EMAIL_FROM,
8  to: user.email,
9  subject: "Important Update",
10  html: `<h1>Hello ${user.name}</h1>`,
11}));
12
13// Send up to 100 emails in one API call
14await resend.batch.send(emails);

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use direct send for auth emails, queue for everything else
├─ Always include unsubscribe links for marketing emails
├─ Test emails with real inboxes (Gmail, Outlook) before launch
├─ Keep subjects under 50 characters for mobile
├─ Use preheader text for email preview optimization
├─ Include plain text fallback for accessibility
├─ Monitor delivery rates in Resend dashboard
└─ Set up webhooks for bounce and complaint handling

Overview

[ [0x40] STATUS ]

Features

[ [0x01] USER_ONBOARD ]

STATUS: READY

DESC: Queue a series of welcome emails with delays: Day 1 welcome, Day 3 tips, Day 7 feature highlight.

[ [0x02] ORGANIZATION ]

STATUS: READY

DESC: Send branded invite emails with accept/decline links. Include inviter name and organization details.

[ [0x03] PAYMENT_RECE ]

STATUS: READY

DESC: Automatic receipt emails triggered by Stripe webhooks. Include amount, product details, and invoice PDF link.

[ [0x04] ACTIVITY_NOT ]

STATUS: READY

DESC: Notify users of important events: new team member joined, project updated, comment received.

Setup

[ [0x01] SET UP RESEND ]

DESC: Add your Resend API key to .env.local

1$RESEND_API_KEY="re_xxxxxxxxxxxx"
2$EMAIL_FROM="Your App <noreply@yourdomain.com>"

[ [0x02] CONFIGURE DOMAIN ]

DESC: Set up your sending domain in Resend dashboard: Go to Resend Dashboard → Domains, add your domain, add the DNS records (SPF, DKIM, DMARC), and verify domain status.

[ [0x03] START EMAIL WORKER ]

DESC: For queued emails, run the worker

1$npm run email:dev
2$# Watches queue and sends emails with auto-restart

Usage

[ [0x38] EMAIL TEMPLATE EXAMPLE ]

Templates are in src/emails/. Pre-built templates include welcome, verify-email, reset-password, purchase-confirmation, and subscription-update.

1// src/emails/welcome-html.ts
2export interface WelcomeEmailProps {
3  name: string;
4  licenseKey: string;
5  downloadUrl: string;
6}
7
8export function generateWelcomeEmailHTML({
9  name,
10  licenseKey,
11  downloadUrl,
12}: WelcomeEmailProps): string {
13  return `
14<!DOCTYPE html>
15<html lang="en">
16<head>
17  <meta charset="UTF-8">
18  <title>Welcome to Fabrk!</title>
19</head>
20<body style="margin: 0; padding: 0; font-family: system-ui, sans-serif;">
21  <div style="max-width: 600px; margin: 0 auto; padding: 40px;">
22    <h1>Welcome to Fabrk, ${name}!</h1>
23    <p>Thank you for your purchase.</p>
24
25    <div style="background: #f4f4f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
26      <strong>Your License Key:</strong>
27      <code style="display: block; font-size: 18px; margin-top: 10px;">${licenseKey}</code>
28    </div>
29
30    <a href="${downloadUrl}" style="background: #000; color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 6px; display: inline-block;">
31      Download Now
32    </a>
33  </div>
34</body>
35</html>
36  `.trim();
37}

[ [0x05] DIRECT SENDING (AUTH EMAILS) ]

For immediate delivery (verification, password reset)

1import { sendVerificationEmail, sendResetEmail } from "@/lib/email";
2
3// Send verification email
4await sendVerificationEmail({
5  to: user.email,
6  name: user.name,
7  token: verificationToken,
8});
9
10// Send password reset email
11await sendResetEmail({
12  to: user.email,
13  name: user.name,
14  resetUrl: `${config.app.url}/reset-password?token=${token}`,
15});

[ [0x8B] QUEUED SENDING (TRANSACTIONAL) ]

For non-urgent emails (welcome, receipts)

1import { queueWelcomeEmail, queueConfirmationEmail } from "@/lib/email";
2
3// Queue welcome email
4await queueWelcomeEmail({
5  to: user.email,
6  name: user.name,
7  loginUrl: `${config.app.url}/login`,
8});
9
10// Queue payment confirmation
11await queueConfirmationEmail({
12  to: user.email,
13  name: user.name,
14  amount: payment.amount,
15  productName: payment.productName,
16  receiptUrl: payment.receiptUrl,
17});

[ [0xD9] CUSTOM EMAIL SENDING ]

Send any HTML content

1import { Resend } from "resend";
2import { env } from "@/lib/env";
3
4const resend = new Resend(env.server.RESEND_API_KEY);
5
6await resend.emails.send({
7  from: env.server.EMAIL_FROM,
8  to: "user@example.com",
9  subject: "Your Custom Subject",
10  html: "<h1>Hello World</h1><p>This is a custom email.</p>",
11});

[ [0xCC] BATCH SENDING ]

Send to multiple recipients

1import { Resend } from "resend";
2import { env } from "@/lib/env";
3
4const resend = new Resend(env.server.RESEND_API_KEY);
5
6const emails = users.map((user) => ({
7  from: env.server.EMAIL_FROM,
8  to: user.email,
9  subject: "Important Update",
10  html: `<h1>Hello ${user.name}</h1>`,
11}));
12
13// Send up to 100 emails in one API call
14await resend.batch.send(emails);

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use direct send for auth emails, queue for everything else
├─ Always include unsubscribe links for marketing emails
├─ Test emails with real inboxes (Gmail, Outlook) before launch
├─ Keep subjects under 50 characters for mobile
├─ Use preheader text for email preview optimization
├─ Include plain text fallback for accessibility
├─ Monitor delivery rates in Resend dashboard
└─ Set up webhooks for bounce and complaint handling