---
title: "Features Overview"
description: "Send emails and notifications to your users."
publishedAt: 2024-04-11
order: 0
status: "published"
---

> **Note:** This is mock/placeholder content for demonstration purposes.

The application includes email functionality for transactional messages and user notifications.

## Email Configuration

### Supabase Email (Default)

By default, emails are sent through Supabase:
- Authentication emails (sign-up, password reset, magic links)
- Email verification
- Email change confirmation

### Custom SMTP

For transactional emails, configure your own SMTP provider:

```bash
# .env
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=your-username
SMTP_PASSWORD=your-password
SMTP_FROM_EMAIL=noreply@yourdomain.com
SMTP_FROM_NAME=Your App Name
```

## Sending Emails

### Using the Email Service

```typescript
import { sendEmail } from '~/lib/email/send-email';

await sendEmail({
  to: 'user@example.com',
  subject: 'Welcome to Our App',
  html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
});
```

### Using Email Templates

Create reusable email templates:

```typescript
// lib/email/templates/welcome-email.tsx
import { EmailTemplate } from '~/lib/email/email-template';

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <EmailTemplate>
      <h1>Welcome, {name}!</h1>
      <p>We're excited to have you on board.</p>
      <a href={loginUrl}>Get Started</a>
    </EmailTemplate>
  );
}

// Send the email
import { render } from '@react-email/render';
import { WelcomeEmail } from '~/lib/email/templates/welcome-email';

const html = render(
  <WelcomeEmail name="John" loginUrl="https://app.com/login" />
);

await sendEmail({
  to: 'john@example.com',
  subject: 'Welcome to Our App',
  html,
});
```

## Email Types

### Transactional Emails

Emails triggered by user actions:
- Welcome emails
- Order confirmations
- Password resets
- Account notifications
- Billing updates

### Marketing Emails

Promotional and engagement emails:
- Product updates
- Feature announcements
- Newsletters
- Onboarding sequences

## Email Providers

### Recommended Providers

**Resend** - Developer-friendly email API
```bash
npm install resend
```

```typescript
import { Resend } from 'resend';

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

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome',
  html: emailHtml,
});
```

**SendGrid** - Comprehensive email platform
```bash
npm install @sendgrid/mail
```

```typescript
import sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

await sgMail.send({
  to: 'user@example.com',
  from: 'noreply@yourdomain.com',
  subject: 'Welcome',
  html: emailHtml,
});
```

**Postmark** - Fast transactional email
```bash
npm install postmark
```

## In-App Notifications

### Notification System

Send in-app notifications to users:

```typescript
import { createNotification } from '~/lib/notifications';

await createNotification({
  userId: user.id,
  title: 'New Message',
  message: 'You have a new message from John',
  type: 'info',
  link: '/messages/123',
});
```

### Notification Types

```typescript
type NotificationType = 'info' | 'success' | 'warning' | 'error';

await createNotification({
  userId: user.id,
  title: 'Payment Successful',
  message: 'Your subscription has been renewed',
  type: 'success',
});
```

### Fetching Notifications

```typescript
import { getUserNotifications } from '~/lib/notifications';

const notifications = await getUserNotifications(userId, {
  limit: 10,
  unreadOnly: true,
});
```

### Marking as Read

```typescript
import { markNotificationAsRead } from '~/lib/notifications';

await markNotificationAsRead(notificationId);
```

## Real-time Notifications

Use Supabase Realtime for instant notifications:

```typescript
'use client';

import { useEffect } from 'react';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';

export function NotificationListener() {
  const supabase = useSupabase();

  useEffect(() => {
    const channel = supabase
      .channel('notifications')
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'notifications',
          filter: `user_id=eq.${userId}`,
        },
        (payload) => {
          // Show toast notification
          toast.info(payload.new.title);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [supabase]);

  return null;
}
```

## Email Templates Best Practices

1. **Keep it simple** - Plain text and minimal HTML
2. **Mobile responsive** - Most emails are read on mobile
3. **Clear CTAs** - Make action buttons prominent
4. **Personalize** - Use user's name and relevant data
5. **Test rendering** - Check across email clients
6. **Include plain text** - Always provide text alternative
7. **Unsubscribe link** - Required for marketing emails

## Testing Emails

### Local Development

In development, emails are caught by InBucket:

```
http://localhost:54324
```

### Preview Emails

Use React Email to preview templates:

```bash
npm run email:dev
```

Visit `http://localhost:3001` to see email previews.

## Deliverability Tips

1. **Authenticate your domain** - Set up SPF, DKIM, DMARC
2. **Warm up your domain** - Start with low volumes
3. **Monitor bounce rates** - Keep below 5%
4. **Avoid spam triggers** - Don't use all caps, excessive punctuation
5. **Provide value** - Only send relevant, useful emails
6. **Easy unsubscribe** - Make it one-click simple