Design a Frontend Notification System

Designing a frontend notification system tests queue management, real-time data, accessibility, and cross-cutting UI concerns. Here's a structured approach.

Requirements Clarification

Functional Requirements

• Toasts: Temporary messages (success, error, info, warning); auto-dismiss; manual dismiss; stack when multiple.
• Badge: Unread count on nav icon (e.g., bell); updates in real time.
• Notification Center: Full list of notifications; filter by read/unread, category; mark as read; pagination.
• Real-time: New notifications arrive via SSE or WebSocket without polling.
• Push: Optional browser push notifications when tab is backgrounded.

Non-Functional Requirements

• Max N toasts visible (e.g., 3–5); queue overflow behavior (drop oldest, or show "+N more").
• Screen reader announcements for important toasts (live region).
• Performant with hundreds of notifications in the center.

High-Level Architecture

┌─────────────────────────────────────────────────────────────┐
│                    NotificationProvider (Context)             │
├─────────────────────────────────────────────────────────────┤
│  ToastQueue          │  NotificationCenter (state)           │
│  - active toasts     │  - notifications[]                    │
│  - maxVisible: 5     │  - unreadCount                        │
│  - priority queue    │  - filters, pagination                 │
├─────────────────────┴───────────────────────────────────────┤
│  RealTimeConnection (SSE/WebSocket)  │  useToast(), useNotifications()  │
└─────────────────────────────────────────────────────────────┘