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]
RESEND_AUDIENCE_ID=your-audience-id

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

   • login-link.tsx - Passwordless authentication emails

2. Tool Management

   • tool-published.tsx - Notification when a tool is published
   • tool-scheduled.tsx - Confirmation when a tool is scheduled
   • tool-claim-otp.tsx - OTP verification for tool claims
   • tool-expedite-reminder.tsx - Reminder for expedited submissions

3. Submissions

   • submission.tsx - Confirmation for new tool submissions
   • submission-expedited.tsx - Admin notification for expedited submissions

Creating Custom Templates

1. Create a new template in the emails directory:

import { Text } from "@react-email/components"
import { EmailWrapper, type EmailWrapperProps } from "~/emails/components/wrapper"
import { Button } from "~/emails/components/button"
 
type EmailProps = EmailWrapperProps & {
  name: string
  actionUrl: string
}
 
 
const CustomEmail = ({ name, actionUrl, ...props }: EmailProps) => {
  return (
    <EmailWrapper {...props}>
      <Text className="text-base leading-6 text-gray-900 mb-5">
        Hey {name}!
      </Text>
      <Text className="text-base leading-6 text-gray-900 mb-5">
        Thanks for joining our platform. Click the button below to get started.
      </Text>
      <Button href={actionUrl}>Get Started</Button>
    </EmailWrapper>
  )
}
 
export default CustomEmail

2. Preview your template locally:

npm run email

3. Use the template in your code:

import CustomEmail from "~/emails/custom"
 
await sendEmails({
  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:

• EmailWrapper - Base wrapper component that provides consistent layout and styling
• Button - Styled button component with Tailwind classes
• Container - Responsive container with Tailwind classes
• Footer - Standard footer with social links and Tailwind styling
• Header - Email header with logo and Tailwind classes
• Section - Content section with consistent spacing using Tailwind

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. Amazon SES

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

4. PostMark

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

5. Plunk

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