Completed

Real-Time Order Notifications

A live order-notifications dashboard: an ASP.NET Core API persists each order to SQL Server and pushes it over SignalR, so every open React client updates its feed, category counts and unread badge the moment the order is created — and stays in sync when any client marks something read.

.NET 9ASP.NET CoreSignalREF CoreSQL ServerReact 18TypeScript

Source on GitHub ↗

The problem

A dashboard that polls for new orders wastes requests and still shows stale data between polls. Orders need to appear on every open screen the instant they are created, and unread state has to stay consistent across clients — marking a notification read on one device should clear it everywhere, without a refresh.

Engineering focus

SignalR hub and category groups
Server push from controllers via IHubContext
Read-state sync across clients
EF Core persistence on SQL Server
React context for live state
Browser Notification API

In use

The Notifications Dashboard: 7 unread, category counts of 2 Bakery, 3 Coffee, 2 Lunch and 0 Snacks, a Recent activity feed of new orders with timestamps, and the Create New Orders form — Running locally with two clients connected. Each order was created from the form and pushed over SignalR; Tom Reid's Snacks order was marked read from the second client, and this one cleared it and dropped the count without a refresh.

The same dashboard filtered to Coffee: the Coffee tile is highlighted, the feed shows three Coffee orders, and the Mark as Read button shows a count of 3 — Filtered to one category. Mark as Read now clears only Coffee — the server updates those rows and broadcasts the category, and every client recalculates its own counts.

How it works

Write, then push: POST /api/orders saves the order and its notification in one SaveChanges, then IHubContext<NotificationHub> sends a NewOrder event — clients only hear about orders that are already stored.
Read-state sync: Mark one, mark a category, or mark all: each endpoint updates SQL Server, then broadcasts NotificationMarkedRead or NotificationsMarkedRead so every open client clears the same items.
Optimistic, idempotent UI: The clicking client marks the item read immediately; a ref of the latest list turns the SignalR echo of its own change into a no-op, so the badge never double-decrements.
Connection: One shared HubConnection with automatic reconnect. On connect each client joins a hub group per food category; the unread count is seeded from GET /api/notifications/count, then kept live by events.

Architecture

Real-Time Order Notifications

.NET 9ASP.NET CoreSignalREF CoreSQL ServerReact 18TypeScript

Source on GitHub ↗

The problem

In use

How it works

Write, then push

POST /api/orders saves the order and its notification in one SaveChanges, then IHubContext<NotificationHub> sends a NewOrder event — clients only hear about orders that are already stored.

Read-state sync

Mark one, mark a category, or mark all: each endpoint updates SQL Server, then broadcasts NotificationMarkedRead or NotificationsMarkedRead so every open client clears the same items.

Optimistic, idempotent UI

The clicking client marks the item read immediately; a ref of the latest list turns the SignalR echo of its own change into a no-op, so the badge never double-decrements.

Connection

One shared HubConnection with automatic reconnect. On connect each client joins a hub group per food category; the unread count is seeded from GET /api/notifications/count, then kept live by events.