Name: Vibestacks
Price: 149 USD
Availability: InStock
Author: Vibestacks

Learn how Vibestacks handles transactional emails using Resend and React Email. Build type-safe, responsive email templates with ease.

The application uses Resend as the email delivery service, paired with React Email for building templated, responsive emails. This provides a developer-friendly way to send transactional emails with consistent branding.

What's Included

Magic link emails - Passwordless authentication
Email verification - Confirm email ownership
Password reset - Secure account recovery
Type-safe templates - React components with full TypeScript support
Local preview - See emails before sending
Responsive design - Works across all email clients

Email Types

Vibestacks includes these transactional email templates:

Email	Purpose	Trigger
Magic Link	Passwordless authentication	User requests sign-in via email
Email Verification	Confirm email ownership	New user registration
Password Reset	Account recovery	User requests password reset

All templates are customizable React components that you can modify to match your brand.

How It Works

1. Template System

Emails are built as React components using React Email:

emails/magic-link.tsx

import { Body, Button, Container, Head, Html, Text } from '@react-email/components';

interface MagicLinkEmailProps {
  url: string;
  userName?: string;
}

export default function MagicLinkEmail({ url, userName }: MagicLinkEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={main}>
        <Container style={container}>
          <Text style={heading}>Sign in to Vibestacks</Text>
          <Text style={paragraph}>
            Hi {userName || 'there'},
          </Text>
          <Text style={paragraph}>
            Click the button below to sign in. This link expires in 10 minutes.
          </Text>
          <Button style={button} href={url}>
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Templates are:

Fully typed - TypeScript validates props at build time
Dynamic - Support personalization with user data
Consistent - Shared styles ensure brand consistency

2. Delivery Flow

┌──────────────────────────────────────────────────────────────────┐
│  1. User action triggers email (sign up, password reset, etc.)    │
│                              ↓                                    │
│  2. Auth system calls email service with template + data          │
│                              ↓                                    │
│  3. React Email template renders to HTML                          │
│                              ↓                                    │
│  4. Resend API delivers email to recipient                        │
│                              ↓                                    │
│  5. User receives email in inbox                                  │
└──────────────────────────────────────────────────────────────────┘

Delivery Tracking

Resend provides delivery analytics in their dashboard. You can track opens, clicks, bounces, and complaints.

3. Authentication Emails

Better Auth handles authentication emails automatically:

Magic Links

One-click sign-in links sent to user's email
Valid for a limited time (configurable)
No password required

Email Verification

Sent when a new user registers
Confirms the user owns the email address
Can gate features until verified

Password Reset

Secure tokenized links for account recovery
Expires after use or timeout
Prevents token reuse attacks

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        Your Application                          │
├─────────────────────────────────────────────────────────────────┤
│   User Action          Auth System           Email Service       │
│   └─ Sign up           └─ Better Auth        └─ sendEmail()     │
│   └─ Reset password    └─ Triggers email     └─ Template +      │
│   └─ Request magic     └─ With user data          data          │
│        link                                                      │
├─────────────────────────────────────────────────────────────────┤
│                      React Email Templates                       │
│   └─ magic-link.tsx    └─ verify-email.tsx   └─ reset.tsx       │
│   └─ Renders to HTML   └─ Inline styles      └─ Responsive      │
├─────────────────────────────────────────────────────────────────┤
│                         Resend API                               │
│   └─ Delivery          └─ Analytics          └─ Webhooks        │
│   └─ Retry logic       └─ Bounce handling    └─ Compliance      │
└─────────────────────────────────────────────────────────────────┘

Key Features

Type-Safe Templates

Email content is validated at build time. If you forget a required prop or pass the wrong type, TypeScript catches it:

// ✅ Correct - all required props provided
<MagicLinkEmail url="https://..." userName="John" />

// ❌ Error - missing required 'url' prop
<MagicLinkEmail userName="John" />

Local Preview

Preview emails during development without sending:

pnpm email:dev

This starts a local server where you can view and iterate on email designs with hot reload.

Responsive Design

React Email components are designed to work across email clients:

Gmail (web & mobile)
Apple Mail
Outlook (desktop & web)
Yahoo Mail
And more

The templates use inline styles and table-based layouts for maximum compatibility.

Dynamic Content

Personalize emails with user data:

<MagicLinkEmail
  url={signInUrl}
  userName={user.name}
  expiresIn="10 minutes"
/>

Sending Emails

Use the email service to send emails programmatically:

lib/email.ts

import { Resend } from 'resend';
import MagicLinkEmail from '@/emails/magic-link';

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

export async function sendMagicLink(to: string, url: string, userName?: string) {
  await resend.emails.send({
    from: 'Vibestacks <noreply@yourdomain.com>',
    to,
    subject: 'Sign in to Vibestacks',
    react: MagicLinkEmail({ url, userName }),
  });
}

Better Auth Integration

Authentication emails (magic links, verification, password reset) are handled automatically by Better Auth. You only need to customize the templates.

Development vs Production

Environment	API Key	From Address	Behavior
Development	`re_test_xxx`	Any (sandboxed)	Emails only sent to verified addresses
Production	`re_live_xxx`	Your verified domain	Emails sent to anyone

Domain Verification Required

In production, you must verify your domain with Resend. This involves adding DNS records (SPF, DKIM) to ensure deliverability and prevent emails landing in spam.

File Structure

├── emails/
│   ├── magic-link.tsx      # Magic link authentication
│   ├── verify-email.tsx    # Email verification
│   ├── reset-password.tsx  # Password reset
│   └── components/         # Shared email components
│       ├── footer.tsx
│       ├── header.tsx
│       └── button.tsx
├── lib/
│   └── email.ts            # Email sending utilities

Why Resend + React Email?

Feature	Traditional Email	Resend + React Email
Template authoring	HTML strings or external editor	React components
Type safety	None	Full TypeScript
Local preview	Limited	Hot reload preview
Deliverability	Varies	Excellent (managed infrastructure)
Analytics	Basic	Opens, clicks, bounces
Developer experience	Poor	Excellent

Summary

This setup separates:

Email presentation (React components) - Easy to design and update
Email delivery (Resend) - Reliable infrastructure you don't manage

You can update email designs without touching business logic, while Resend handles deliverability, compliance, and analytics.

Email System