Features Overview

SendGrid - Comprehensive email platform

npm install @sendgrid/mail

import sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

await sgMail.send({
  to: '[email protected]',
  from: '[email protected]',
  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:54324

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