Product EngineeringFeaturesNotification SystemFrontend

Overview

High-level architecture and notification flow in LiveHealth frontend

👤 Development Team📅 Updated: Mar 13, 2026📁 Services🏷️ notifications🏷️ frontend🏷️ architecture🏷️ fcm

Overview

Architecture Diagram

The LiveHealth notification system follows a layered architecture:

Data Flow Diagram

Key Features

1. Notification Inbox

  • Location: Accessible from sidebar navigation
  • Features:
    • Unread count badge
    • Filter by read/unread/all
    • Search functionality
    • Date range filtering
    • Pagination (load more)
    • Mark individual notifications as read/unread

2. Background Notifications

  • FCM Integration: Receives push notifications via Firebase Cloud Messaging
  • Service Worker: Background notification handling
  • Badge Updates: Automatic unread count updates

3. Notification Types

  • Report Ready (Type 1): Lab report is ready for review
  • Critical Report (Type 2): Urgent alert requiring attention

4. User Actions

  • Click notification to view details
  • Mark as read/unread
  • Filter and search
  • Open associated report
  • Close/dismiss notifications

Component Structure

OrganisationLogin/Notification/
├── Container/
│   └── index.tsx                    # Main container component
├── Components/
│   ├── Filters/
│   │   └── index.tsx                # Filter controls
│   ├── List/
│   │   └── index.tsx                # Notification list grid
│   ├── ShowNotificationAlert/
│   │   └── index.tsx                # Alert display
│   └── CriticalNotification/
│       └── CriticalNotificationForm.tsx
├── Utils/
│   ├── helpers.ts                   # API calls
│   ├── constant.ts                  # Constants
│   └── interface.ts                 # TypeScript interfaces
├── styles.module.scss               # Styling
└── index.tsx                        # Component export

Redux State Structure

interface NotificationState {
  loader: boolean; // Loading state
  notificationList: JsonObject[]; // List of notifications
  notificationTypeMaster: JsonObject[]; // Available notification types
  userNotificationPreferences: JsonObject[]; // User preferences
  unreadNotificationCount: number; // Unread count
  pushNotificationData: JsonObject | null; // Current push notification
  fcmToken: string | null; // FCM token
  orgNotificationList: JsonObject[]; // Organization notifications
  orgNotificationLimitReached: boolean; // Pagination limit
}

API Endpoints

Fetch Notifications

GET /api-v3/notifications/all?from={date}&to={date}&page={number}&limit={number}
Response: {
  data: [
    {
      id: number,
      notification_type_id: number,
      message: { title, body, data },
      created_at: number,
      read_on: number | null,
      notification_activities: [],
      read_by_username: string
    }
  ]
}

Update Notification Status

POST /api-v3/notifications/notification/{id}/read
Response: {
  success: boolean,
  message: string,
  notification_data: { ...notification }
}

Fetch Notification Types

GET / api - v3 / notifications / notification - type / all;
Response: {
  data: {
    notification_types: [
      {
        id: number,
        category: string,
        name: string,
        description: string,
        is_disabled: number,
      },
    ];
  }
}

User Journey

1. Login and Setup

  1. User logs in to the application
  2. registerFcmServiceWorker() is called
  3. FCM token is generated
  4. Token is stored in Redux (setFcmToken)
  5. User subscribes to relevant topics

2. View Notifications

  1. User clicks notification icon in sidebar
  2. Notification container fetches initial data
  3. getInitialData() calls getNotificationList()
  4. Notifications are displayed in a grid
  5. Unread count badge is updated

3. Interact with Notification

  1. User clicks on a notification
  2. onRowClickHandler() is triggered
  3. If notification is unread, handleReadUnread() marks it as read
  4. openReportHandler() opens the associated report
  5. Notification status is updated in Redux
  1. User applies filters (read/unread, date range)
  2. filterNotifications() filters the list
  3. Search text filters by title, body, or data
  4. UI updates to show filtered results

Technology Stack

TechnologyPurposeVersion
ReactUI Framework16.13+
ReduxState Management4.0+
Redux-ThunkAsync Actions2.3+
AxiosHTTP Client0.21+
FirebasePush Notifications (FCM)9.0+
Moment.jsDate Handling2.29+
AG-GridData Grid26.0+
React-i18nextInternationalization11.0+

Best Practices

Performance

  • ✅ Lazy load notification components
  • ✅ Paginate large notification lists
  • ✅ Memoize components to prevent re-renders
  • ✅ Debounce search/filter inputs

UX

  • ✅ Show loading states during API calls
  • ✅ Display error messages for failed operations
  • ✅ Update unread count in real-time
  • ✅ Provide clear visual feedback for user actions

Code Quality

  • ✅ Use TypeScript for type safety
  • ✅ Follow Redux best practices
  • ✅ Separate concerns (components, services, utils)
  • ✅ Write unit tests for critical functions

Next Steps:

On this page