​
Email Service

TurboStack uses Resend for transactional emails with React Email for beautiful, responsive templates.

​
Features

React Email

Build emails with React components

Responsive

Works on all email clients

Type Safe

Full TypeScript support

​
Email Templates

TurboStack includes these pre-built email templates:

Welcome Email

Sent after successful registration.Contains:
  • Personalized greeting
  • Quick start tips
  • Link to dashboard
await sendWelcomeEmail({
  to: user.email,
  name: user.name,
});
Sent to verify user’s email address.Contains:
  • Verification link (valid 24 hours)
  • App branding
await sendVerificationEmail({
  to: user.email,
  name: user.name,
  token: verificationToken,
});
Sent when user requests password reset.Contains:
  • Secure reset link (valid 1 hour)
  • Security notice
await sendPasswordResetEmail({
  to: user.email,
  name: user.name,
  token: resetToken,
});

​
Setup

1

Create Resend Account

Sign up at resend.com and get your API key.
2

Configure Environment

Add to your .env file:
RESEND_API_KEY=re_your_api_key_here
FROM_EMAIL=noreply@yourdomain.com
APP_NAME=TurboStack
FRONTEND_URL=http://localhost:4100
3

Verify Domain (Production)

Add DNS records in Resend dashboard to send from your domain.
In development without RESEND_API_KEY, emails are logged to console instead of being sent.

​
Using the Email Service

// apps/backend/src/services/email.service.tsx
import { Resend } from "resend";
import { VerificationEmail } from "../emails/verification";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendVerificationEmail({
  to,
  name,
  token,
}: {
  to: string;
  name: string;
  token: string;
}) {
  const verificationUrl = `${process.env.FRONTEND_URL}/verify-email?token=${token}`;

  await resend.emails.send({
    from: `${process.env.APP_NAME} <${process.env.FROM_EMAIL}>`,
    to,
    subject: "Verify your email address",
    react: <VerificationEmail name={name} url={verificationUrl} />,
  });
}

​
Creating Custom Templates

1

Create Template Component

// apps/backend/src/emails/invoice.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";

interface InvoiceEmailProps {
  customerName: string;
  amount: number;
  invoiceId: string;
}

export function InvoiceEmail({
  customerName,
  amount,
  invoiceId
}: InvoiceEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Your invoice #{invoiceId}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading>Invoice #{invoiceId}</Heading>
          <Text>Hi {customerName},</Text>
          <Text>
            Your payment of ${amount} has been received.
          </Text>
          <Section style={footer}>
            <Text>Thank you for your business!</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

const main = { backgroundColor: "#f6f9fc" };
const container = { padding: "40px" };
const footer = { marginTop: "32px" };
2

Add Send Function

// email.service.tsx
export async function sendInvoiceEmail({
  to,
  customerName,
  amount,
  invoiceId,
}) {
  await resend.emails.send({
    from: `Billing <${process.env.FROM_EMAIL}>`,
    to,
    subject: `Invoice #${invoiceId}`,
    react: (
      <InvoiceEmail
        customerName={customerName}
        amount={amount}
        invoiceId={invoiceId}
      />
    ),
  });
}
3

Use in Routes

// In your route handler
await sendInvoiceEmail({
  to: customer.email,
  customerName: customer.name,
  amount: 99.99,
  invoiceId: "INV-001",
});

​
Available Components

React Email provides these components:
ComponentDescription
HtmlRoot component
HeadDocument head
BodyEmail body
ContainerCentered container
SectionContent section
Row / ColumnLayout components
Headingh1-h6 headings
TextParagraph text
LinkHyperlink
ButtonCTA button
ImgImage
HrHorizontal rule
PreviewPreview text (inbox snippet)
Preview your emails during development by rendering them in a test route or using the React Email preview tool.