# Notification System Skill Build a comprehensive notification system with email notifications, in-app notifications, push notifications, and real-time updates using WebSockets. ## Overview Implement multi-channel notification system: - Email notifications (transactional and promotional) - In-app notification center - Browser push notifications - Real-time notifications via WebSockets - Notification preferences\/settings - Notification templates - Read\/unread status tracking - Notification history ## Implementation ### Backend - Notification Entity ```typescript \/\/ backend\/src\/entities\/Notification.ts @Entity('notifications') export class Notification { @PrimaryGeneratedColumn() id: number; @ManyToOne(() => User) user: User; @Column() title: string; @Column('text') message: string; @Column({ type: 'enum', enum: ['info', 'success', 'warning', 'error'] }) type: string; @Column() category: string; \/\/ 'course', 'enrollment', 'quiz', 'system' @Column({ type: 'jsonb', nullable: true }) data?: Record; @Column({ default: false }) isRead: boolean; @Column({ nullable: true }) readAt?: Date; @Column({ nullable: true }) actionUrl?: string; @CreateDateColumn() createdAt: Date; } \/\/ backend\/src\/entities\/NotificationPreference.ts @Entity('notification_preferences') export class NotificationPreference { @PrimaryGeneratedColumn() id: number; @ManyToOne(() => User) user: User; @Column({ default: true }) emailEnabled: boolean; @Column({ default: true }) inAppEnabled: boolean; @Column({ default: false }) pushEnabled: boolean; @Column({ type: 'jsonb' }) categories: { course: boolean; enrollment: boolean; quiz: boolean; system: boolean; }; } ``` ### Notification Service ```typescript \/\/ backend\/src\/services\/notificationService.ts import { WebSocketGateway, WebSocketServer } from '@nestjs\/websockets'; import { Server } from 'socket.io'; @WebSocketGateway() export class NotificationService { @WebSocketServer() server: Server; async create( userId: number, title: string, message: string, type: string, category: string, data?: any ) { const notification = await notificationRepository.save({ user: { id: userId }, title, message, type, category, data }); \/\/ Get user preferences const prefs = await this.getPreferences(userId); \/\/ Send in-app notification (WebSocket) if (prefs.inAppEnabled && prefs.categories[category]) { this.server.to(`user_${userId}`).emit('notification', notification); } \/\/ Send email if (prefs.emailEnabled && prefs.categories[category]) { await this.sendEmail(userId, notification); } \/\/ Send push notification if (prefs.pushEnabled && prefs.categories[category]) { await this.sendPushNotification(userId, notification); } return notification; } async markAsRead(notificationId: number) { await notificationRepository.update(notificationId, { isRead: true, readAt: new Date() }); } async markAllAsRead(userId: number) { await notificationRepository.update( { user: { id: userId }, isRead: false }, { isRead: true, readAt: new Date() } ); } async getUserNotifications( userId: number, page: number = 1, limit: number = 20 ) { return await notificationRepository.findAndCount({ where: { user: { id: userId } }, order: { createdAt: 'DESC' }, skip: (page - 1) * limit, take: limit }); } async getUnreadCount(userId: number): Promise { return await notificationRepository.count({ where: { user: { id: userId }, isRead: false } }); } } ``` ### Frontend - Notification Component ```typescript \/\/ src\/app\/shared\/components\/notification-center\/notification-center.component.ts import { io } from 'socket.io-client'; export class NotificationCenterComponent implements OnInit, OnDestroy { notifications$: Observable; unreadCount$: Observable; private socket: any; ngOnInit() { this.loadNotifications(); this.connectWebSocket(); } connectWebSocket() { this.socket = io(environment.apiUrl, { auth: { token: localStorage.getItem('accessToken') } }); this.socket.on('notification', (notification: Notification) => { this.showToast(notification); this.loadNotifications(); \/\/ Refresh list }); } markAsRead(id: number) { this.notificationService.markAsRead(id).subscribe(); } markAllAsRead() { this.notificationService.markAllAsRead().subscribe(); } ngOnDestroy() { this.socket?.disconnect(); } } ``` ### Email Templates ```typescript \/\/ backend\/src\/templates\/email\/courseEnrollment.ts export const courseEnrollmentTemplate = (data: { userName: string; courseTitle: string; courseUrl: string; }) => `

notification-system