Dirstarter uses Resend for email delivery and React Email for creating beautiful, responsive email templates. This combination provides a modern, developer-friendly way to handle email communications.

Resend is a modern email API that offers:

• High deliverability rates
• Real-time analytics
• Simple API
• TypeScript support
• Marketing email service
• Webhook support
• React Email integration

Setup

1. Create a Resend account at resend.com
2. Get your API key from the dashboard
3. Add the following environment variables:

RESEND_API_KEY=your_api_key
RESEND_SENDER_EMAIL=[email protected]

Transactional Emails

Usage

The boilerplate provides a simple email sending utility that supports both single and batch sending:

import { sendEmail } from "~/lib/email"

// Send an email to [email protected]
await sendEmail({
  to: "[email protected]",
  subject: "Welcome to our platform",
  react: WelcomeEmail({ name: "John" }),
})

React Email

React Email allows you to create beautiful, responsive email templates using React components. The boilerplate includes several pre-built templates for different use cases:

Pre-built Templates

1. Authentication

   • magic-link.tsx - Passwordless authentication emails
   • verify-domain.tsx - Domain ownership verification

2. Submissions

   • submission.tsx - Confirmation for new submissions
   • submission-published.tsx - Notification when a submission is published
   • submission-scheduled.tsx - Confirmation when a submission is scheduled
   • submission-premium.tsx - Notification for premium submissions
   • admin-submission-premium.tsx - Admin notification for premium submissions

Creating Custom Templates

1. Create a new template in the emails directory:

import { Button, Text } from "@react-email/components"
import { EmailWrapper } from "./components/wrapper"

export function EmailWelcome({ name }: { name: string }) {
  return (
    <EmailWrapper>
      <Text>Welcome, {name}!</Text>
      <Button href="https://example.com">Get Started</Button>
    </EmailWrapper>
  )
}

2. Preview your template locally:

npm run email

3. Use the template in your code:

import CustomEmail from "~/emails/custom"

await sendEmail({
  to: "[email protected]",
  subject: "Welcome to our platform",
  react: CustomEmail({ name: "John", actionUrl: "https://example.com/start" }),
})

Email Components

The boilerplate includes reusable email components in emails/components/ that use Tailwind CSS for styling:

• wrapper.tsx - Base wrapper component that provides consistent layout and styling
• button.tsx - Styled button component with Tailwind classes
• action-nudge.tsx - Call-to-action nudge component
• expedite-nudge.tsx - Nudge component for expedited submissions
• feature-nudge.tsx - Feature highlight nudge component

Marketing Emails

Dirstarter offers a marketing email service that allows you to send newsletters to your audience. It provides:

• Newsletter subscription handling
• Email validation and spam prevention
• Subscriber analytics
• Admin dashboard integration

Admin Dashboard Integration

The admin dashboard includes a subscribers card that shows:

• Total subscribers
• Average daily subscriptions
• Subscription trends

Alternatives

While Resend is our recommended choice, here are some alternatives:

1. SendGrid

   • Pros: Established, feature-rich
   • Cons: More complex setup, higher pricing

2. Mailgun

   • Pros: Good deliverability, developer-friendly
   • Cons: Less modern API, more complex pricing

3. AutoSend

   • Pros: Simple API, modern interface
   • Cons: Newer service, smaller community

4. Amazon SES

   • Pros: Very cost-effective, high scalability
   • Cons: Basic features, requires more setup

5. PostMark

   • Pros: Excellent deliverability, simple API
   • Cons: Higher pricing, fewer features

6. Plunk

   • Pros: Affordable, privacy-focused, open source
   • Cons: Developer experience is not as good as Resend