Features Overview

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:

# .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

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:

// 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

npm install resend

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

npm install @sendgrid/mail

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

npm install postmark

In-App Notifications

Notification System

Send in-app notifications to users:

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

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

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

Fetching Notifications

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

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

Marking as Read

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

await markNotificationAsRead(notificationId);

Real-time Notifications

Use Supabase Realtime for instant notifications:

'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:54334

Preview Emails

Use React Email to preview templates:

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