Add Real-Time Notification System Using SignalR

[mohab-elshamy]

Real-Time Notifications

Motivation

AnalySim is a collaborative platform where users interact through projects and social features. Currently, users must manually refresh the application to become aware of important events. This limits responsiveness and reduces the sense of active collaboration.

This change introduces a real-time notification system to improve user awareness and interaction.

---

Contribution

The system enables users to receive instant notifications for:

• Being added to a project
• Receiving a new follower
• Login from a new location

The design allows additional event types to be added with minimal changes.

---

UI Preview

The following screenshots demonstrate the implemented user interface:

• Notification dropdown with unread indicator
• Real-time toast notification triggered upon an event

---

Implementation

• Integrated SignalR to push notifications to connected clients in real time.
• Added a new Notifications database table to persist events.
• Implemented a GET endpoint to retrieve stored notifications when a user loads the application.
• Added UI support for unread indicators and live toast notifications.

---

Setup Instructions

1. Apply Database Migration

After pulling the changes, run:

dotnet ef database update

2. Install SignalR Client Package

Navigate to the frontend project directory:

cd src/Analysim.Web/ClientApp

Then install dependencies (including the SignalR client package):

npm install

This enhancement improves responsiveness, strengthens collaboration, and provides a foundation for future real-time features within AnalySim.