📘 Notification System: Email and Push

🎯 Introduction

Welcome to this exciting tutorial on building notification systems! 🎉 In this guide, we’ll explore how to create robust email and push notification systems using TypeScript.

You’ll discover how proper notification architecture can transform your application’s user engagement. Whether you’re building social media platforms 📱, e-commerce sites 🛒, or SaaS applications 💼, understanding notification systems is essential for keeping users informed and engaged.

By the end of this tutorial, you’ll feel confident implementing notification systems in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Notification Systems

🤔 What is a Notification System?

A notification system is like a smart postal service 📮. Think of it as your application’s way of sending messages to users through different channels (email, push notifications, SMS) to keep them informed about important events.

In TypeScript terms, a notification system is a structured way to:

• ✨ Send messages across multiple channels
• 🚀 Queue and batch notifications efficiently
• 🛡️ Handle failures and retries gracefully

💡 Why Use TypeScript for Notifications?

Here’s why developers love TypeScript for notification systems:

1. Type Safety 🔒: Ensure notification payloads are always correct
2. Better IDE Support 💻: Autocomplete for notification templates
3. Code Documentation 📖: Types serve as inline documentation
4. Refactoring Confidence 🔧: Change notification structures safely

Real-world example: Imagine building a social media app 📱. With TypeScript, you can ensure every “like” notification has the correct user data, post reference, and timestamp.

🔧 Basic Syntax and Usage

📝 Simple Email Notification

Let’s start with a friendly example:

// 👋 Hello, Notifications!
interface EmailNotification {
  to: string;          // 📧 Recipient email
  subject: string;     // 📝 Email subject
  body: string;        // 💬 Email content
  priority?: 'low' | 'normal' | 'high';  // 🎯 Optional priority
}

// 🎨 Creating a notification service
class NotificationService {
  private emailQueue: EmailNotification[] = [];
  
  // 📮 Send email notification
  async sendEmail(notification: EmailNotification): Promise<void> {
    console.log(`📧 Sending email to ${notification.to}`);
    // Email sending logic here
  }
}

🎯 Push Notification Pattern

Here’s how to structure push notifications:

// 🔔 Push notification interface
interface PushNotification {
  userId: string;      // 👤 Target user
  title: string;       // 📌 Notification title
  message: string;     // 💬 Notification body
  icon?: string;       // 🎨 Optional icon URL
  badge?: number;      // 🔢 Optional badge count
  data?: Record<string, any>;  // 📦 Custom data payload
}

// 📱 Device token management
interface DeviceToken {
  userId: string;
  token: string;
  platform: 'ios' | 'android' | 'web';
  lastActive: Date;
}

💡 Practical Examples

🛒 Example 1: E-commerce Order Notifications

Let’s build a real notification system for an online store:

// 🛍️ Order notification types
interface OrderNotification {
  orderId: string;
  customerEmail: string;
  customerName: string;
  items: Array<{
    name: string;
    quantity: number;
    emoji: string;  // Every product needs an emoji!
  }>;
  total: number;
  status: 'confirmed' | 'shipped' | 'delivered';
}

// 📧 Email template builder
class OrderEmailBuilder {
  // 🎨 Build order confirmation email
  buildConfirmationEmail(order: OrderNotification): EmailNotification {
    const itemsList = order.items
      .map(item => `${item.emoji} ${item.name} x${item.quantity}`)
      .join('\n');
    
    return {
      to: order.customerEmail,
      subject: `🎉 Order Confirmed! #${order.orderId}`,
      body: `
        Hi ${order.customerName}! 👋
        
        Your order has been confirmed! 🎊
        
        📦 Order Details:
        ${itemsList}
        
        💰 Total: $${order.total}
        
        We'll notify you when it ships! 🚚
      `,
      priority: 'high'
    };
  }
  
  // 🚚 Build shipping notification
  buildShippingEmail(order: OrderNotification): EmailNotification {
    return {
      to: order.customerEmail,
      subject: `🚚 Your order is on the way! #${order.orderId}`,
      body: `Great news ${order.customerName}! Your order is shipped! 📦✨`,
      priority: 'normal'
    };
  }
}

// 🔔 Push notification builder
class OrderPushBuilder {
  buildOrderPush(order: OrderNotification): PushNotification {
    const statusEmojis = {
      confirmed: '✅',
      shipped: '🚚',
      delivered: '📦'
    };
    
    return {
      userId: order.customerEmail,  // In real app, use userId
      title: `${statusEmojis[order.status]} Order ${order.status}!`,
      message: `Your order #${order.orderId} is ${order.status}`,
      badge: 1,
      data: {
        orderId: order.orderId,
        deepLink: `/orders/${order.orderId}`
      }
    };
  }
}

// 🎮 Let's use it!
const emailBuilder = new OrderEmailBuilder();
const pushBuilder = new OrderPushBuilder();
const notificationService = new NotificationService();

const order: OrderNotification = {
  orderId: "12345",
  customerEmail: "[email protected]",
  customerName: "Sarah",
  items: [
    { name: "TypeScript Book", quantity: 1, emoji: "📘" },
    { name: "Coffee Mug", quantity: 2, emoji: "☕" }
  ],
  total: 49.99,
  status: 'confirmed'
};

// Send notifications
const email = emailBuilder.buildConfirmationEmail(order);
await notificationService.sendEmail(email);

🎮 Example 2: Social Media Engagement Notifications

Let’s create a notification system for social interactions:

// 🌟 Social notification types
type NotificationType = 
  | 'like' 
  | 'comment' 
  | 'follow' 
  | 'mention' 
  | 'share';

interface SocialNotification {
  id: string;
  recipientId: string;
  actorName: string;
  actorAvatar: string;
  type: NotificationType;
  targetId: string;  // Post ID, comment ID, etc.
  timestamp: Date;
  read: boolean;
}

// 📊 Notification aggregator
class NotificationAggregator {
  private notifications = new Map<string, SocialNotification[]>();
  
  // 🎯 Add notification with smart batching
  addNotification(notification: SocialNotification): void {
    const key = `${notification.recipientId}-${notification.type}-${notification.targetId}`;
    
    if (!this.notifications.has(key)) {
      this.notifications.set(key, []);
    }
    
    this.notifications.get(key)!.push(notification);
  }
  
  // 📦 Get batched notifications
  getBatchedNotifications(userId: string): Array<{
    type: NotificationType;
    count: number;
    actors: string[];
    message: string;
    emoji: string;
  }> {
    const userNotifications: any[] = [];
    
    this.notifications.forEach((notifs, key) => {
      if (key.startsWith(userId)) {
        const type = notifs[0].type;
        const actors = [...new Set(notifs.map(n => n.actorName))];
        
        userNotifications.push({
          type,
          count: notifs.length,
          actors: actors.slice(0, 3),
          message: this.buildMessage(type, actors, notifs.length),
          emoji: this.getEmoji(type)
        });
      }
    });
    
    return userNotifications;
  }
  
  // 💬 Build aggregated message
  private buildMessage(
    type: NotificationType, 
    actors: string[], 
    count: number
  ): string {
    const othersCount = count - actors.length;
    const actorString = actors.join(', ');
    const others = othersCount > 0 ? ` and ${othersCount} others` : '';
    
    const messages = {
      like: `liked your post`,
      comment: `commented on your post`,
      follow: `started following you`,
      mention: `mentioned you`,
      share: `shared your post`
    };
    
    return `${actorString}${others} ${messages[type]}`;
  }
  
  // 🎨 Get emoji for notification type
  private getEmoji(type: NotificationType): string {
    const emojis = {
      like: '❤️',
      comment: '💬',
      follow: '👥',
      mention: '@',
      share: '🔄'
    };
    return emojis[type];
  }
}

// 🔔 Real-time notification dispatcher
class RealtimeNotificationDispatcher {
  private subscribers = new Map<string, (notification: any) => void>();
  
  // 📡 Subscribe to notifications
  subscribe(userId: string, callback: (notification: any) => void): void {
    this.subscribers.set(userId, callback);
    console.log(`👤 ${userId} subscribed to notifications`);
  }
  
  // 📤 Dispatch notification
  dispatch(notification: SocialNotification): void {
    const callback = this.subscribers.get(notification.recipientId);
    if (callback) {
      callback({
        ...notification,
        formattedTime: this.formatTime(notification.timestamp)
      });
    }
  }
  
  // ⏰ Format time for display
  private formatTime(date: Date): string {
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    
    if (minutes < 1) return 'just now ⚡';
    if (minutes < 60) return `${minutes}m ago 🕐`;
    if (minutes < 1440) return `${Math.floor(minutes / 60)}h ago 🕑`;
    return `${Math.floor(minutes / 1440)}d ago 📅`;
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Notification Queuing

When you’re ready to level up, implement advanced queuing:

// 🎯 Advanced notification queue with retry logic
interface QueuedNotification<T> {
  id: string;
  payload: T;
  channel: 'email' | 'push' | 'sms';
  attempts: number;
  maxAttempts: number;
  nextRetry?: Date;
  priority: number;
  status: 'pending' | 'processing' | 'completed' | 'failed';
}

// 🪄 Priority queue implementation
class NotificationQueue<T> {
  private queue: QueuedNotification<T>[] = [];
  private processing = false;
  
  // ➕ Add to queue with priority
  enqueue(
    notification: T, 
    channel: QueuedNotification<T>['channel'],
    priority: number = 5
  ): void {
    const queued: QueuedNotification<T> = {
      id: Date.now().toString(),
      payload: notification,
      channel,
      attempts: 0,
      maxAttempts: 3,
      priority,
      status: 'pending'
    };
    
    // Insert based on priority
    const insertIndex = this.queue.findIndex(n => n.priority < priority);
    if (insertIndex === -1) {
      this.queue.push(queued);
    } else {
      this.queue.splice(insertIndex, 0, queued);
    }
    
    this.processQueue();
  }
  
  // 🔄 Process queue with exponential backoff
  private async processQueue(): Promise<void> {
    if (this.processing || this.queue.length === 0) return;
    
    this.processing = true;
    const notification = this.queue.shift()!;
    
    try {
      notification.status = 'processing';
      await this.sendNotification(notification);
      notification.status = 'completed';
      console.log(`✅ Sent ${notification.channel} notification`);
    } catch (error) {
      notification.attempts++;
      if (notification.attempts < notification.maxAttempts) {
        notification.status = 'pending';
        notification.nextRetry = new Date(
          Date.now() + Math.pow(2, notification.attempts) * 1000
        );
        this.queue.push(notification);
        console.log(`🔄 Retry scheduled for ${notification.id}`);
      } else {
        notification.status = 'failed';
        console.log(`❌ Failed to send ${notification.id}`);
      }
    }
    
    this.processing = false;
    setTimeout(() => this.processQueue(), 100);
  }
  
  // 📤 Send notification (implement based on channel)
  private async sendNotification(
    notification: QueuedNotification<T>
  ): Promise<void> {
    // Simulate sending
    await new Promise(resolve => setTimeout(resolve, 1000));
    if (Math.random() > 0.8) {
      throw new Error('Simulated failure');
    }
  }
}

🏗️ Advanced Topic 2: Template System

For the brave developers, here’s a template system:

// 🚀 Type-safe template system
type TemplateVars<T extends string> = 
  T extends `${infer _Start}{{${infer Var}}}${infer Rest}`
    ? Var | TemplateVars<Rest>
    : never;

type TemplateData<T extends string> = Record<TemplateVars<T>, string>;

// 🎨 Template engine
class NotificationTemplateEngine {
  private templates = new Map<string, string>();
  
  // 📝 Register template
  registerTemplate<T extends string>(
    name: string, 
    template: T
  ): void {
    this.templates.set(name, template);
  }
  
  // 🔄 Render template with type safety
  render<T extends string>(
    templateName: string,
    data: TemplateData<T>
  ): string {
    let template = this.templates.get(templateName) || '';
    
    Object.entries(data).forEach(([key, value]) => {
      template = template.replace(
        new RegExp(`{{${key}}}`, 'g'),
        value as string
      );
    });
    
    return template;
  }
}

// 🎯 Usage with type safety
const engine = new NotificationTemplateEngine();
engine.registerTemplate(
  'welcome',
  'Welcome {{name}}! 🎉 Your account {{email}} is ready.'
);

// TypeScript ensures all variables are provided!
const rendered = engine.render('welcome', {
  name: 'Alice',
  email: '[email protected]'
});

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Notification Spam

// ❌ Wrong way - sending too many notifications!
users.forEach(user => {
  notifications.forEach(notification => {
    sendNotification(user, notification); // 💥 Spam alert!
  });
});

// ✅ Correct way - batch and throttle!
class NotificationThrottler {
  private lastSent = new Map<string, Date>();
  private minInterval = 60000; // 1 minute
  
  canSend(userId: string): boolean {
    const last = this.lastSent.get(userId);
    if (!last) return true;
    
    return Date.now() - last.getTime() > this.minInterval;
  }
  
  markSent(userId: string): void {
    this.lastSent.set(userId, new Date());
  }
}

🤯 Pitfall 2: Missing Error Handling

// ❌ Dangerous - no error handling!
async function sendPushNotification(token: string, message: string) {
  const response = await fetch('/api/push', {
    method: 'POST',
    body: JSON.stringify({ token, message })
  });
  // 💥 What if this fails?
}

// ✅ Safe - proper error handling!
async function sendPushNotification(
  token: string, 
  message: string
): Promise<{ success: boolean; error?: string }> {
  try {
    const response = await fetch('/api/push', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token, message })
    });
    
    if (!response.ok) {
      console.log(`⚠️ Push failed: ${response.status}`);
      return { success: false, error: response.statusText };
    }
    
    return { success: true };
  } catch (error) {
    console.log(`❌ Push error: ${error}`);
    return { success: false, error: String(error) };
  }
}

🛠️ Best Practices

1. 🎯 Use Queues: Always queue notifications for reliability
2. 📝 Template Everything: Use templates for consistent messaging
3. 🛡️ Handle Failures: Implement retry logic with backoff
4. 🎨 Batch Similar Notifications: Aggregate to reduce noise
5. ✨ Respect User Preferences: Always check notification settings

🧪 Hands-On Exercise

🎯 Challenge: Build a Complete Notification System

Create a notification system for a task management app:

📋 Requirements:

• ✅ Support email and push notifications
• 🏷️ Different notification types (task assigned, due soon, completed)
• 👤 User preference management
• 📅 Schedule notifications for future delivery
• 🎨 Each notification type needs custom templates!

🚀 Bonus Points:

• Add SMS support
• Implement notification history
• Create an unsubscribe system

💡 Solution

// 🎯 Complete notification system for task management!
interface Task {
  id: string;
  title: string;
  assigneeId: string;
  dueDate: Date;
  priority: 'low' | 'medium' | 'high';
  emoji: string;
}

interface UserPreferences {
  userId: string;
  email: boolean;
  push: boolean;
  sms: boolean;
  quietHours: { start: number; end: number };
  frequency: 'instant' | 'hourly' | 'daily';
}

// 📧 Notification service
class TaskNotificationService {
  private preferences = new Map<string, UserPreferences>();
  private scheduled = new Map<string, Date>();
  
  // 🎯 Send task assigned notification
  async notifyTaskAssigned(task: Task, assignerName: string): Promise<void> {
    const prefs = this.preferences.get(task.assigneeId);
    if (!prefs) return;
    
    const notification = {
      title: `${task.emoji} New task assigned!`,
      message: `${assignerName} assigned you: ${task.title}`,
      priority: task.priority,
      data: { taskId: task.id }
    };
    
    if (this.canSendNow(prefs)) {
      if (prefs.email) await this.sendEmail(task.assigneeId, notification);
      if (prefs.push) await this.sendPush(task.assigneeId, notification);
    } else {
      this.scheduleForLater(task.assigneeId, notification);
    }
  }
  
  // ⏰ Check quiet hours
  private canSendNow(prefs: UserPreferences): boolean {
    const hour = new Date().getHours();
    const { start, end } = prefs.quietHours;
    
    if (start < end) {
      return hour < start || hour >= end;
    } else {
      return hour < start && hour >= end;
    }
  }
  
  // 📅 Schedule for later
  private scheduleForLater(userId: string, notification: any): void {
    const prefs = this.preferences.get(userId)!;
    const now = new Date();
    const hour = now.getHours();
    const { end } = prefs.quietHours;
    
    let scheduledHour = end;
    if (hour < end) {
      scheduledHour = end;
    } else {
      now.setDate(now.getDate() + 1);
      scheduledHour = end;
    }
    
    const scheduled = new Date(now);
    scheduled.setHours(scheduledHour, 0, 0, 0);
    
    this.scheduled.set(`${userId}-${Date.now()}`, scheduled);
    console.log(`📅 Scheduled notification for ${scheduled.toISOString()}`);
  }
  
  // 📊 Get notification stats
  getStats(userId: string): {
    sent: number;
    scheduled: number;
    preferences: UserPreferences | undefined;
  } {
    const scheduled = Array.from(this.scheduled.keys())
      .filter(key => key.startsWith(userId)).length;
    
    return {
      sent: 0, // Would track this in real implementation
      scheduled,
      preferences: this.preferences.get(userId)
    };
  }
  
  // Stub methods for sending
  private async sendEmail(userId: string, notification: any): Promise<void> {
    console.log(`📧 Email sent to ${userId}: ${notification.title}`);
  }
  
  private async sendPush(userId: string, notification: any): Promise<void> {
    console.log(`🔔 Push sent to ${userId}: ${notification.title}`);
  }
}

// 🎮 Test it out!
const notificationService = new TaskNotificationService();

// Set user preferences
notificationService['preferences'].set('user123', {
  userId: 'user123',
  email: true,
  push: true,
  sms: false,
  quietHours: { start: 22, end: 8 },
  frequency: 'instant'
});

// Send notification
await notificationService.notifyTaskAssigned({
  id: 'task456',
  title: 'Review TypeScript PR',
  assigneeId: 'user123',
  dueDate: new Date(),
  priority: 'high',
  emoji: '👨‍💻'
}, 'Alice');

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Build notification systems with confidence 💪
• ✅ Implement multiple channels (email, push, SMS) 📱
• ✅ Handle queuing and retries like a pro 🔄
• ✅ Respect user preferences and quiet hours 🌙
• ✅ Create scalable architectures with TypeScript! 🚀

Remember: Good notification systems enhance user experience without being annoying! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered notification systems!

Here’s what to do next:

1. 💻 Build the exercise notification system
2. 🏗️ Add real email/push providers (SendGrid, Firebase)
3. 📚 Learn about notification analytics
4. 🌟 Implement A/B testing for notification content

Remember: Every great app has a thoughtful notification system. Keep building, keep notifying wisely! 🚀

Happy coding! 🎉🚀✨