Webapp Parts & Types

Production Essentials

webmobiledesktopadmin

Auth, payments, error tracking, analytics, transactional email. The boring bones beneath the design.

  • Variation 01

    Auth Stack

    Screenshot of clerk.comclerk.com

    What real auth looks like: providers, session storage, RBAC, magic links.

    When to use

    Day one. Do not roll your own.

    Anatomy

    • Email + OAuth (Google, GitHub, Apple)
    • Magic links or passkeys preferred over passwords
    • Session in HTTP-only cookies
    • RBAC at the route + UI level

    Prompt

    Set up a production auth stack for a Next.js 15 app. Use Auth.js (NextAuth) with Google + GitHub OAuth providers plus an email magic-link provider via Resend. Store sessions as HTTP-only cookies. Provide a middleware that gates /app routes and redirects unauthenticated users to /login. Build a useSession hook for client components and a getSession helper for server components. Add a basic RBAC check (user.role === 'admin') with a typed helper.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 02

    Payments Stack

    Screenshot of stripe.comstripe.com

    Subscriptions, one-time payments, webhooks, customer portal.

    When to use

    The moment you charge anyone for anything.

    Anatomy

    • Stripe Checkout for new subscriptions
    • Customer Portal for plan changes / cancel
    • Webhook handler verifying signature
    • Local Prisma table for subscription state

    Prompt

    Preview · Pro to copy
    Pro

    Unlock the full prompt.

    Buy Pro

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 03

    Observability

    Screenshot of sentry.iosentry.io

    Errors, logs, traces, real user metrics. What you reach for when things break.

    When to use

    Before launch. After is too late. You won't have data on the first outage.

    Anatomy

    • Sentry SDK in app + edge + server
    • Structured logs to Axiom or Datadog
    • PostHog or Plausible for product analytics
    • Status page (Instatus or hand-rolled)

    Prompt

    Set up observability for a Next.js app. Install @sentry/nextjs with auto-instrumentation for App Router and edge runtime; mask PII; capture release tags from git SHA. Pipe structured logs (pino with redact for secrets) to Axiom via their Vercel integration. Add PostHog with autocapture disabled and explicit posthog.capture() events for key product moments. Add a /status route consuming Instatus's component-status API.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 04

    Transactional Email

    Screenshot of resend.comresend.com

    Magic links, receipts, alerts. The mail your product must send.

    When to use

    Day one. Unsent email is silently broken auth.

    Anatomy

    • Domain auth: SPF, DKIM, DMARC
    • React Email templates
    • Idempotency keys on every send
    • Separate transactional vs marketing streams

    Prompt

    Set up transactional email with Resend. Configure SPF, DKIM, DMARC on the sending domain. Build three React Email templates: magic-link, receipt, password-changed. Create a sendEmail() helper that takes a template + props, attaches an idempotency key derived from the user + event, and queues sends through a single transactional stream. Add a separate marketing stream for any opt-in broadcast email so transactional reputation is never poisoned.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 05

    Database Stack

    Screenshot of neon.techneon.tech

    Primary DB, ORM, migrations, connection pooling, and a query-debug surface.

    When to use

    Day one. Pick boring tech here. Postgres is the answer unless you have a reason it isn't.

    Anatomy

    • Postgres as the default
    • Prisma or Drizzle for typed queries
    • Migration scripts checked into source
    • Connection pooling (PgBouncer or platform built-in)
    • Read replica + RLS for tenanted data

    Prompt

    Set up the database layer for a Next.js app. Provision Postgres (Neon for serverless or Supabase if you also need auth/realtime). Use Drizzle ORM with TypeScript-first schema definitions. Migrations live in /drizzle and run via 'drizzle-kit migrate' in CI before deploy. Wrap Postgres queries with a typed db client; for tenanted data, enforce row-level security via session-variable-based policies. Add Postgres connection pooling and use the unpooled URL only for migrations.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 06

    File Storage Stack

    Screenshot of cloudflare.comcloudflare.com

    Uploads, CDN delivery, signed URLs, image transforms.

    When to use

    The moment users upload anything. Don't store binaries in your DB.

    Anatomy

    • S3-compatible storage (R2, Vercel Blob, S3)
    • Signed upload URLs (no server-proxy uploads)
    • Image CDN with on-the-fly transforms
    • Lifecycle: TTL on temp uploads, audit trail on permanent

    Prompt

    Preview · Pro to copy
    Pro

    Unlock the full prompt.

    Buy Pro

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 07

    Search Stack

    Screenshot of algolia.comalgolia.com

    Full-text or vector search across your product data - typeahead, ranking, synonyms.

    When to use

    Anywhere users need to find one record among many. Don't ship LIKE %query%. Search latency and quality compound.

    Anatomy

    • Indexer: pushes data to search engine on writes
    • Typeahead endpoint with debounced queries
    • Faceted filters + boolean operators
    • Vector embedding option for semantic search

    Prompt

    Set up search for a product. Use Algolia or Typesense. On every write to the indexed entities (Issue, Doc, User), enqueue an indexer job that pushes the latest record to the search index. Build a /api/search endpoint that proxies queries with a per-tenant API key (never expose admin keys to the browser). On the client, render a typeahead component that debounces 120ms and shows grouped results. Configure synonyms, stop-words, and a custom ranking that weights recent and owner-authored records higher.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 08

    Background Jobs Stack

    Screenshot of inngest.cominngest.com

    Queues, retries, schedulers, and a UI to introspect job status.

    When to use

    When any user action triggers something that takes >300ms or could fail. Email sends, webhooks, image processing.

    Anatomy

    • Job definitions with retries + timeouts
    • Scheduled jobs via cron triggers
    • Idempotent handlers (safe to retry)
    • Dead-letter queue + alerting

    Prompt

    Preview · Pro to copy
    Pro

    Unlock the full prompt.

    Buy Pro

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 09

    Feature Flag Stack

    Screenshot of growthbook.iogrowthbook.io

    Server + client-evaluated flags, percentage rollouts, per-user targeting.

    When to use

    As soon as you have more than one engineer or one customer. Decouple deploy from release.

    Anatomy

    • Server-side evaluator with sticky bucketing
    • Client SDK that hydrates flags from server
    • Target by user ID, plan, or geo
    • Percentage rollouts + kill switches
    • Audit log of flag changes

    Prompt

    Set up feature flags with PostHog or GrowthBook. Server-side: evaluate flags in route handlers with the user ID + plan + geo as context; cache evaluations per request to avoid hammering the service. Client-side: ship the hydrated flag snapshot down with the SSR response so the first render doesn't flicker. Implement a flag-changed audit log: every flag toggle from the admin UI writes a record with who/when/what. Use kill-switch flags around risky features so you can disable a path without a deploy.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro
  • Variation 10

    Rate Limiting Stack

    Screenshot of upstash.comupstash.com

    Per-user, per-IP, and per-endpoint rate limits with informative 429 responses.

    When to use

    Before the first abuse incident. Rate-limit auth and any expensive endpoint by default.

    Anatomy

    • Token-bucket or sliding-window algorithm
    • Identifier: user ID > API key > IP
    • Per-endpoint quota config
    • Retry-After header in 429 responses
    • Allowlist for internal traffic

    Prompt

    Set up rate limiting in a Next.js API. Use @upstash/ratelimit with a Redis backend. Create a limiter factory that returns a configured limiter per endpoint (e.g. auth: 5/min, /api/checkout: 20/min, public reads: 60/min). In each route handler, identify the actor (userId > apiKey > ip), call limit(identifier), and on rejection return a 429 with Retry-After + a JSON body explaining the limit. Add an internal allowlist (e.g. internal cron user IDs) that bypasses the limiter.

    Polish & tuning

    2 of 4 unlocked

    Motion

    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

    Spacing

    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

    Pro

    Unlock the rest of the tuning notes.

    Buy Pro