communication-systems

Email, notifications, and messaging system patterns

الانتقال إلى التثبيت

المستودع: miles990/claude-software-skills
آخر نشاط في المصدر: ٨ يناير ٢٠٢٦ في ٠٢:٣٤
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٢٠
التفرعات: ٥

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

العودة إلى البحث العودة إلى التثبيت

name	communication-systems
description	Email, notifications, and messaging system patterns
domain	domain-applications
version	1.0.0
tags	["email","notifications","push","webhooks","messaging"]
triggers	{"keywords":{"primary":["email","notification","push notification","webhook","messaging"],"secondary":["transactional email","fcm","web push","in-app notification","resend"]},"context_boost":["send","alert","notify","communicate"],"context_penalty":["game","frontend","ui"],"priority":"medium"}

Communication Systems

Overview

Building email systems, push notifications, in-app messaging, and webhook integrations.

Email Systems

Transactional Email

import { Resend } from 'resend';

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

interface EmailOptions {
  to: string | string[];
  subject: string;
  html?: string;
  text?: string;
  template?: string;
  data?: Record<string, any>;
  attachments?: Array<{
    filename: string;
    content: Buffer | string;
  }>;
}

async function sendEmail(options: EmailOptions) {
  let html = options.html;

  // Use template if specified
  if (options.template) {
    html = await renderTemplate(options.template, options.data);
  }

  const { data, error } = await resend.emails.send({
    from: 'noreply@example.com',
    to: options.to,
    subject: options.subject,
    html,
    text: options.text,
    attachments: options.attachments,
  });

  if (error) {
    console.error('Email send failed:', error);
    throw error;
  }

  // Log for tracking
  await prisma.emailLog.create({
    data: {
      messageId: data.id,
      to: Array.isArray(options.to) ? options.to.join(',') : options.to,
      subject: options.subject,
      template: options.template,
      status: 'sent',
    },
  });

  return data;
}

// Email templates with React Email
import { render } from '@react-email/render';
import { WelcomeEmail } from './templates/WelcomeEmail';
import { PasswordResetEmail } from './templates/PasswordResetEmail';

const templates = {
  welcome: WelcomeEmail,
  passwordReset: PasswordResetEmail,
};

async function renderTemplate(name: string, data: Record<string, any>) {
  const Template = templates[name];
  if (!Template) throw new Error(`Template ${name} not found`);

  return render(<Template {...data} />);
}

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

function WelcomeEmail({ name, actionUrl }: { name: string; actionUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Container>
          <Img src="https://example.com/logo.png" width="120" height="40" alt="Logo" />
          <Text>Hi {name},</Text>
          <Text>Welcome to our platform! Get started by setting up your account.</Text>
          <Button
            href={actionUrl}
            style={{ background: '#007bff', color: '#fff', padding: '12px 24px' }}
          >
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Email Queue

import Bull from 'bull';

const emailQueue = new Bull('email', process.env.REDIS_URL);

// Add to queue
async function queueEmail(options: EmailOptions, delay?: number) {
  return emailQueue.add('send', options, {
    delay,
    attempts: 3,
    backoff: { type: 'exponential', delay: 60000 },
  });
}

// Process queue
emailQueue.process('send', async (job) => {
  await sendEmail(job.data);
});

// Handle failures
emailQueue.on('failed', async (job, error) => {
  console.error(`Email job ${job.id} failed:`, error);

  await prisma.emailLog.update({
    where: { jobId: job.id },
    data: { status: , : error. },
  });
});


  () {
   jobs = recipients.( ({
    : ,
    : { to, template, data },
    : { : index *  }, 
  }));

   emailQueue.(jobs);
}

Push Notifications

Web Push

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:admin@example.com',
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

interface PushSubscription {
  endpoint: string;
  keys: {
    p256dh: string;
    auth: string;
  };
}

// Store subscription
async function saveSubscription(userId: string, subscription: PushSubscription) {
  await prisma.pushSubscription.upsert({
    where: { endpoint: subscription.endpoint },
    update: { keys: subscription.keys },
    create: {
      userId,
      endpoint: subscription.endpoint,
      keys: subscription.keys,
    },
  });
}

// Send push notification
async function sendPush(userId: string, payload: {
  title: string;
  body: string;
  icon?: ;
  url?: ;
  data?: Record<, >;
}) {
   subscriptions =  prisma..({
    : { userId },
  });

   results =  .(
    subscriptions.( (sub) => {
       {
         webpush.(
          { : sub., : sub. },
          .(payload)
        );
      }  (error) {
         (error. === ) {
          
           prisma..({ : { : sub. } });
        }
         error;
      }
    })
  );

   results;
}



self.(,  {
   data = event..();

  event.(
    self..(data., {
      : data.,
      : data. || ,
      : data,
    })
  );
});

self.(,  {
  event..();

   (event...) {
    event.(clients.(event...));
  }
});

Mobile Push (FCM)

import admin from 'firebase-admin';

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

interface MobileNotification {
  title: string;
  body: string;
  imageUrl?: string;
  data?: Record<string, string>;
}

async function sendMobilePush(
  tokens: string[],
  notification: MobileNotification
) {
  const message: admin.messaging.MulticastMessage = {
    tokens,
    notification: {
      title: notification.title,
      body: notification.body,
      imageUrl: notification.imageUrl,
    },
    data: notification.data,
    android: {
      priority: 'high',
      notification: {
        sound: 'default',
        clickAction: 'OPEN_ACTIVITY',
      },
    },
    apns: {
      payload: {
        aps: {
          : ,
          : ,
        },
      },
    },
  };

   response =  admin.().(message);

  
  response..( {
     (!resp.) {
       errorCode = resp.?.;
       (
        errorCode ===  ||
        errorCode === 
      ) {
        
        (tokens[idx]);
      }
    }
  });

   response;
}

In-App Notifications

interface Notification {
  id: string;
  userId: string;
  type: string;
  title: string;
  message: string;
  data?: Record<string, any>;
  read: boolean;
  createdAt: Date;
}

// Create notification
async function createNotification(params: {
  userId: string;
  type: string;
  title: string;
  message: string;
  data?: Record<string, any>;
}) {
  const notification = await prisma.notification.create({
    data: {
      ...params,
      read: false,
    },
  });

  // Send real-time update
  await pubsub.publish(`notifications:${params.userId}`, {
    type: 'NEW_NOTIFICATION',
    notification,
  });

  return notification;
}

// Get notifications with pagination
async function getNotifications() {
   { page = , limit = , unreadOnly =  } = options;

   where = {
    userId,
    ...(unreadOnly && { :  }),
  };

   [notifications, total, unreadCount] =  .([
    prisma..({
      where,
      : { :  },
      : (page - ) * limit,
      : limit,
    }),
    prisma..({ where }),
    prisma..({ : { userId, :  } }),
  ]);

   { notifications, total, unreadCount };
}


  () {
   prisma..({
    : {
      : { : notificationIds },
      userId,
    },
    : { :  },
  });
}


 () {
   [notifications, setNotifications] = useState<[]>([]);
   [unreadCount, setUnreadCount] = ();

  ( {
    
    ().( {
      (notifications);
      (unreadCount);
    });

    
     unsubscribe = ( {
      ( [notification, ...prev]);
      ( prev + );
    });

     unsubscribe;
  }, []);

   { notifications, unreadCount, markAsRead };
}

Webhooks

interface Webhook {
  id: string;
  url: string;
  secret: string;
  events: string[];
  active: boolean;
}

// Register webhook
async function registerWebhook(params: {
  url: string;
  events: string[];
}) {
  const secret = crypto.randomBytes(32).toString('hex');

  return prisma.webhook.create({
    data: {
      url: params.url,
      events: params.events,
      secret,
      active: true,
    },
  });
}

// Send webhook
async function sendWebhook(webhookId: string, event: string, payload: any) {
  const webhook = await prisma.webhook.findUnique({ where: { id: webhookId } });
  if (!webhook || !webhook.) ;

   timestamp = .().();
   body = .({ event, : payload, timestamp });

  
   signature = crypto
    .(, webhook.)
    .(body)
    .();

   {
     response =  (webhook., {
      : ,
      : {
        : ,
        : signature,
        : timestamp,
      },
      body,
    });

     prisma..({
      : {
        webhookId,
        event,
        payload,
        : response.,
        : response.,
      },
    });

    
     (!response.) {
       (webhookId);
    }
  }  (error) {
     prisma..({
      : {
        webhookId,
        event,
        payload,
        : error.,
        : ,
      },
    });

     (webhookId);
  }
}


 ():  {
   expected = crypto
    .(, secret)
    .(body)
    .();

   crypto.(
    .(signature),
    .(expected)
  );
}

Related Skills

[[realtime-systems]] - Real-time messaging
[[backend]] - API development
[[reliability-engineering]] - Delivery guarantees