Flows category icon
App Builder
Intermediate

Notification System

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

6 steps19 verify checks60-90 minutesWorks with: emergent · chatgpt · claude · cursor
Start Guided Walkthrough

The Route

0/6 verified

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack
PROJECT CONTEXT:
I am adding in-app notifications so users learn about relevant events (mentions, orders, system messages).

GOAL:
Implement notification records created by real events, an unread badge, and a notification center with read state.

REQUIREMENTS:
- Notification model linked to a recipient user
- At least two real event triggers that create notifications
- Bell icon with accurate unread count
- Notification center listing with read/unread state
- Mark-as-read (single and all) that persists

CONSTRAINTS:
- Notifications must be created by real events, not seeded fakes
- Unread count must match the database truth
- Clicking a notification should lead somewhere relevant

DEFINITION OF DONE:
- Triggering the real event creates a notification for the right user
- The unread badge increments and is accurate
- Opening/reading persists and decrements the badge
- Notifications survive refresh and are user-scoped

COMMON FAILURES TO AVOID:
- A bell with a hardcoded red dot
- Notifications array in local state, lost on refresh
- Everyone receiving everyone's notifications
- Mark-as-read resetting after reload

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More App Builder flows that share ground with this one.

Flows category icon
App Builder
Generated

Add Real-Time Presence Indicators to a Chat App with WebSockets

A step-by-step flow for implementing real-time online, offline, and typing presence in a chat app using WebSockets, including backend presence tracking, frontend updates, reconnect handling, and verification.

01Inspect the existing chat architecture and choose presence data flow
02Define the presence event contract and server-side state model
03Implement authenticated WebSocket connection handling on the server

+7 more steps to Done

Best forbuilders who have shipped a basic app before

10 steps60-120 minutesIntermediate
Flows category icon
App Builder
Generated

Add Team Invites to a SaaS App

Build a real team invitation system for a SaaS app, including invite creation, email/share flow, acceptance, membership creation, role assignment, validation, and end-to-end testing.

01Audit Existing Team, User, and Auth Models
02Add Invitation Data Model and Migration
03Implement Secure Invite Creation API

+7 more steps to Done

Best forbuilders who have shipped a basic app before

10 steps60-120 minutesIntermediate
Flows category icon
App Builder
Generated

Add a Working Team Invite System to a SaaS App

Build a real invite flow for a SaaS app so existing users can invite teammates by email, store invite records, validate tokens, accept invitations, and join the correct workspace with proper permissions.

01Audit the current auth and workspace model
02Add the invite data model and migration
03Build secure invite creation on the server

+6 more steps to Done

Best forbuilders who have shipped a basic app before

9 steps60-120 minutesIntermediate

Made with Emergent