Founderflow Logo

Email Integration

Complete guide to email integration in your Founderflow Boilerplate. Learn how to send transactional emails, notifications, and automated messages using Resend and other email providers.

Overview

📬

Email Integration with Resend

The boilerplate uses Resend for reliable email delivery with support for transactional emails, templates, and advanced features like email tracking and analytics.

✓

Transactional Emails

Welcome emails, password resets, notifications

✓

Email Templates

Reusable HTML and React email templates

✓

Email Tracking

Open rates, click tracking, and delivery status

✓

Bulk Emails

Send emails to multiple recipients efficiently

✓

Email Scheduling

Schedule emails for future delivery

✓

Webhook Support

Real-time email event notifications

Setup & Configuration

Environment Variables

Configure your email integration with these environment variables:

.env.local
# Email Configuration
RESEND_API_KEY=re_...
FROM_NAME=Your App Name
# Optional: SMTP Configuration
# SMTP_HOST=smtp.gmail.com
# SMTP_PORT=587
# SMTP_PASS=your-app-password

Resend Client Configuration

Set up the Resend client for email operations:

lib/resend.ts
import { Resend } from 'resend';
if (!process.env.RESEND_API_KEY) {
throw new Error('RESEND_API_KEY is not set');
}
export const resend = new Resend(process.env.RESEND_API_KEY);
export const fromEmail = process.env.FROM_EMAIL!;
export const fromName = process.env.FROM_NAME!;

Email Templates

Welcome Email Template

Create a welcome email template for new users:

lib/email-templates/welcome.tsx
import { Html, Head, Body, Container, Section, Text } from '@react-email/components';
interface WelcomeEmailProps {
name: string;
email: string;
}
export default function WelcomeEmail({ name, email }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: 'Arial, sans-serif' }}>
<Container style={{ maxWidth: '600px', margin: '0 auto' }}>
<Section style={{ padding: '20px' }}>
<Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
Welcome to our platform, {name}!
</Text>
<Text>
Thank you for signing up with email: {email}
</Text>
</Section>
</Container>
</Body>
</Html>
);
}

Sending Emails

Send Welcome Email

Send a welcome email to new users:

app/api/emails/welcome/route.ts
import { resend, fromEmail, fromName } from '@/lib/resend';
import WelcomeEmail from '@/lib/email-templates/welcome';
export async function POST(request: Request) {
try {
const { name, email } = await request.json();
const data = await resend.emails.send({
from: `{fromName} <{fromEmail}>`,
to: [email],
subject: 'Welcome to our platform!',
react: WelcomeEmail({ name, email })
});
return Response.json({ success: true, id: data.id });
} catch (error) {
return Response.json({ error: error.message }, { status: 500 });
}
}

Next Steps

Now that you understand email integration, explore these related areas:

Mailchimp Integration

Learn about email marketing and campaign management.

Customization Guide

Customize your email templates and workflows.