Emails are a crucial part of any modern web application, enabling communication between your application and users. Dopamine provides a comprehensive email system built with React Email templates and Resend for reliable delivery.
Technology Stack
Resend
Resend is the primary email delivery service used in Dopamine. It provides:
- Developer-first API with simple integration
- High deliverability rates with proper authentication
- Real-time analytics and detailed logging
- Webhook support for tracking email events
- Template management with version control
- Built-in spam protection and compliance
React Email
React Email is used for creating email templates with:
- React components for familiar development experience
- TypeScript support for type-safe template development
- Tailwind CSS integration for consistent styling
- Live preview during development
- HTML compilation for maximum client compatibility
- Component library with pre-built email elements
Architecture Overview
Email Module Structure
The email system is organized within the NestJS API:
apps/api/src/email/
├── email.module.ts # NestJS module configuration
├── email.service.ts # High-level email service
├── resend.service.ts # Resend API integration
├── types/
│ └── email.types.ts # TypeScript interfaces
└── templates/
├── invitation.tsx # Email template components
└── previews/
└── invitation.tsx # Preview components for development
Service Architecture
The email system follows a layered architecture:
┌──────────────┐ ┌───────────────┐ ┌────────────┐
│ EmailService │ ──▶ │ ResendService │ ──▶ │ Resend API │
└──────────────┘ └───────────────┘ └────────────┘
│ │ │
▼ ▼ ▼
High-level Provider-specific External
abstractions implementation service
Development Workflow
Template Development
- Create Template: Build React component in
templates/ - Define Props: Add TypeScript interface for template data
- Create Preview: Add preview component for development
- Test Rendering: Use React Email preview server
- Integrate Service: Add service method for sending
Best Practices
Template Design
- Mobile-first: Design for mobile email clients
- Inline styles: Use Tailwind classes that compile to inline styles
- Fallback content: Provide text alternatives for images
- Clear CTAs: Make action buttons prominent and accessible
- Consistent branding: Use consistent colors and typography
Content Strategy
- Concise messaging: Keep email content focused and brief
- Personal tone: Use recipient's name and personalized content
- Clear purpose: Make the email's purpose immediately clear
- Action-oriented: Include clear next steps for recipients
Technical Considerations
- Error handling: Always handle email sending failures gracefully
- Async processing: Send emails asynchronously to avoid blocking operations
- Logging: Log email events for debugging and analytics
- Testing: Test templates across different email clients
Monitoring and Analytics
Email Delivery Tracking
Resend provides comprehensive analytics:
- Delivery rates: Track successful email delivery
- Open rates: Monitor email engagement
- Click rates: Measure link interactions
- Bounce rates: Identify delivery issues
- Spam reports: Monitor email reputation
Error Handling
Implement robust error handling for email operations:
try {
await this.emailService.sendInvitationEmail(email, props);
this.logger.log(`Invitation sent to ${email}`);
} catch (error) {
this.logger.error(`Failed to send invitation to ${email}:`, error);
// Handle error appropriately (retry, notify admin, etc.)
}Security Considerations
Email Authentication
- SPF Records: Configure Sender Policy Framework
- DKIM Signing: Enable DomainKeys Identified Mail
- DMARC Policy: Set up Domain-based Message Authentication
Content Security
- Sanitize inputs: Validate and sanitize all email content
- Rate limiting: Implement rate limiting for email sending
- Spam prevention: Monitor sending patterns and user feedback
This comprehensive email system provides a solid foundation for all your application's communication needs while maintaining type safety, reliability, and excellent developer experience.