Notification System
Build an in-app notification system with real triggers, unread counts, and a working notification center.
Add this plan to a project to track work and checks.Open workspace
The route
6 steps to Done
- 01
Define notification types and triggers
Notifications need real causes - name the events first.
Preview prompt + verify gate ▾Hide ▴
Define the notification spec. Specify: the notification model (id, recipient userId, type, title, body, link, read flag, createdAt); the 2-4 real app events that create notifications (e.g. new order received, comment on your item, system announcement) and who receives each; where each notification links to; and retention/ordering rules (newest first).
- ✓Model includes recipient, read flag, and link
- ✓Each trigger names its real source event
- ✓Recipient logic is defined per event
- 02
Create notifications from real events
Wire the triggers so real actions generate real notifications.
Preview prompt + verify gate ▾Hide ▴
Implement notification creation. Requirements: in the backend handlers of the chosen events, create the notification record for the correct recipient with type, title, body, and link; do not notify the actor about their own action; verify by performing each real event and checking the record appears for the right user and not others.
- ✓Performing the event creates a record for the recipient
- ✓The actor is not self-notified
- ✓Other users receive nothing
- 03
Build the unread badge
The bell must tell the truth from the database.
Preview prompt + verify gate ▾Hide ▴
Implement the notification bell. Requirements: a header bell icon with an unread-count badge fetched from a backend count endpoint for the logged-in user; the badge hides at zero; count refreshes on relevant navigation orperiodic polling (state the mechanism); the count must equal the database unread count exactly.
- ✓Badge equals a hand-checked unread count
- ✓Zero unread hides the badge
- ✓A new event increments the badge
- 04
Build the notification center
A list users can open, scan, and click through.
Preview prompt + verify gate ▾Hide ▴
Implement the notification center. Requirements: opening the bell shows a dropdown/page listing the user's notifications newest-first with title, body snippet, relative time, and read/unread styling; clicking a notification marks it read, decrements the badge, and navigates to its link; loading and empty states; pagination or sensible cap; refresh preserves all states.
- ✓Unread styling distinguishes items
- ✓Click marks read and navigates to the link
- ✓States persist after refresh
- 05
Add mark-all-read and polish
Bulk actions and edge polish make notifications livable.
Preview prompt + verify gate ▾Hide ▴
Finish the center. Requirements: a mark-all-read action persisting for all the user's unread items and zeroing the badge; per-item mark-as-read without navigating (e.g. hover action) if feasible; sensible truncation of long bodies; correct behavior at zero notifications; keyboard/escape closes the dropdown.
- ✓Mark-all-read zeroes the badge and persists
- ✓Empty state is graceful
- ✓Long content truncates cleanly
- 06
Notification QA pass
Verify triggers, counts, and isolation with two accounts.
Preview prompt + verify gate ▾Hide ▴
Run notification QA and report PASS/FAIL with evidence: account A's action notifies account B (and only B); badge counts match the database at each stage; read and mark-all-read persist across refresh; links navigate correctly; empty state renders for a fresh account; mobile layout works. Fix all failures and re-run.
- ✓Two-account trigger test executed
- ✓Counts verified against the database
- ✓Read persistence verified via refresh
- ✓All failures fixed