65 patterns across 15 groups · 433 working examples
The signed-in-user cache isn't a speed trick — it's the tamper alarm that forces a fresh sign-in when the account no longer matches the session.
65 patterns · 433 working examples
These aren't chapter titles — each one is an enforced rule your AI builds against. And the patterns don't just teach the shape: the working examples are real code that lands in your project.
Foundations
A consistent loading experience across every route, not ad hoc spinners
Choosing between a modal, a route, and a form pattern without one-offs
Getting app-wide providers to mount in an order that doesn't break SSR
The base component set every screen should be built from
The readiness contract every new screen has to satisfy before it ships
Data and caching
Cache keys that don't leak stale data across a tenant switch
Making sure switching accounts actually clears the previous session's data
Why a page can work fine on refresh but break on client-side navigation
Deciding which of several caching layers should actually hold a given read
Wiring Next.js's own cache primitives without a cross-tenant data leak
The step-by-step path to flipping on Next.js caching in a live app
Routing and navigation
Keeping public, tenant, and internal routes from bleeding into each other
A consistent list, create, and manage route shape for any entity
Breadcrumbs that stay correct as routes get nested deeper
Error and not-found pages that know which tenant scope they're in
Adding a new tab without hand-wiring another branch of JSX
Nested tab levels that stay visually distinct instead of blending together
Returning a user to the section they were last on, not the dashboard
A marketing mega-menu that plugs into the app shell without duplicating nav
Tenancy and access
Switching between tenants without the wrong account leaking through
Gating a route group without duplicating the same auth check everywhere
Catching a raw UUID leaking into a route before it ships
A security settings screen with passkeys and per-device sign-out
A branded login screen with a rotating feature showcase panel
Layout and design system
What the app shell owes every screen that renders inside it
Layout rules that keep headers, toolbars, and rows from fighting flexbox
Stopping the page header from scrolling away or the layout from jumping
Keeping brand identity out of components that shouldn't know about it
Getting app icons to look right on desktop, iOS, and Android home screens
Keeping a dense view readable as the data behind it keeps growing
Input and documents
Building a multi-step creation flow without a bespoke wizard every time
Keeping an internal form builder and its public-facing form in sync
A document viewer and e-signature flow that isn't locked to one PDF library
A bulk import flow that catches bad data before it ever commits
Communication surfaces
An in-app video call surface that isn't locked to one vendor SDK
Composing an audience, channel, and schedule broadcast without a rigid wizard
A thread-detail view that has to work for both support chat and AI transcripts
Where conversations, broadcasts, and feedback channels should live relative to each other
Building an AI assistant panel that persists across sessions and shows its work
Entity and workflow surfaces
A calendar view that isn't locked into one heavy charting library
A standard list, detail, and create shape reused across every entity
Configuring different workflow node types through one panel host
A 'connect a service' screen that scales past the first two integrations
A command palette that scopes search without a rebuild per entity
Mobile / Foundations
The base native component set every screen should be built from
Where to draw the line between stock Expo UI and your own brand components
Stopping one provider re-render from cascading through the whole tree
Theming tokens and screen primitives that stay consistent across screens
Mobile / Platform and config
Upgrading an Expo SDK version without breaking native builds
Config choices that matter before a native project's very first commit
Mobile / Navigation and shell
A route structure that keeps auth, tenant, and tabs separate on native
A navigation shell that survives switching between tenants mid-session
Native parity for the pinned-header, scrolling-content page shell
Mobile / Auth and device trust
Biometric sign-in and passkeys without re-implementing the challenge flow
Recognizing a returning device instead of treating every login as new
A native auth shell and form primitives that mirror the web pattern
Mobile / Input and surfaces
Choosing between a bottom sheet, a modal, and a full route on native
Forms that live in a bottom sheet without breaking on multi-step flows
A list-to-detail flow on mobile that does not need a new sheet each time
Mobile / Device capabilities
Registering and routing push notifications per device, not per user
A camera capture flow that also doubles as a barcode scanner
Capturing a signature on-device without pulling in a third-party SDK
Pairing a Bluetooth device without a scan-connect-drop dead end
Mobile / Offline and sync
Telling a user their write queued instead of silently failing offline
Uploading photos from a spotty connection without losing the queue
Someone whose access was revoked keeps acting on stale permissions — possibly forever.