Skip to content
Flows
Library Paths Vault Generate Progress Run Demo Flow
App Builder Intermediate · 60-90 minutes

Notification System

Build an in-app notification system with real triggers, unread counts, and a working notification center.

Start Route · 6 steps

The route

6 steps to Done

  1. 01

    Define notification types and triggers

    Notifications need real causes - name the events first.

    Preview prompt + verify gate ▾

    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
  2. 02

    Create notifications from real events

    Wire the triggers so real actions generate real notifications.

    Preview prompt + verify gate ▾

    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
  3. 03

    Build the unread badge

    The bell must tell the truth from the database.

    Preview prompt + verify gate ▾

    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
  4. 04

    Build the notification center

    A list users can open, scan, and click through.

    Preview prompt + verify gate ▾

    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
  5. 05

    Add mark-all-read and polish

    Bulk actions and edge polish make notifications livable.

    Preview prompt + verify gate ▾

    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
  6. 06

    Notification QA pass

    Verify triggers, counts, and isolation with two accounts.

    Preview prompt + verify gate ▾

    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