We use Resend for sending transactional emails and React Email for building templates.

Setup

1. Environment Variables: Ensure RESEND_API_KEY is set in apps/backend/.env. Optionally set EMAIL_FROM (defaults to onboarding@resend.dev).

2. Dependencies:

   • resend: The official Node.js SDK.
   • @react-email/components: React components for building emails.
   • @react-email/render: Renders React templates to HTML.

Adding New Emails

1. Create a Template: Add a new .tsx file in apps/backend/src/emails/. Export a component that accepts props for dynamic content.

2. Update Service: Add a new function in apps/backend/src/services/email.ts. This function should:

   • Render the template using render().
   • Call resend.emails.send().
   • Handle errors gracefully.

3. Usage: Import the service function in your route or background job and call it.

Example

// apps/backend/src/services/email.ts
export async function sendInviteEmail({ email, inviteLink }) {
  const html = await render(InviteEmail({ inviteLink }));
  await resend.emails.send({ to: email, subject: 'Join the team', html });
}

Scalability & Extensibility

• Templates: React Email allows for reusable components (Header, Footer, Button) to maintain consistency.
• Service Layer: The email.ts service abstracts the provider. If we switch providers, we only update this file.
• Async Sending: Emails are sent asynchronously in the route handlers to avoid blocking the response. For high volume, we should move this to a background job (BullMQ).