Click-by-click tour of saas.otf-kit.dev proves its true production readiness

A working SaaS app you can click through before paying is vanishingly rare. saas.otf-kit.dev ships the whole 11-screen workflow, with real database, real Stripe checkout (test and live), and solid authentication. That’s what “production-ready” means — not just a Figma mock, a video, or a dead-end storybook. No lock-in, no handwaving. The screens, flows, and code you preview are what you get, minus the demo banner.

This is a click-by-click tour of the shipped product — exactly as it runs, before you buy. Every screen, every mutation, with real data wired. Proof of concept? No — this is the concept as shipped.

The demo is the product — one-for-one

You don’t get a half-built playground or a bundle of canned screenshots. The public link at saas.otf-kit.dev runs the same code and flow you get when you buy the SaaS Dashboard kit. No sale required, no NDA.

Every button, modal, and data edge-case in the demo is live-backed. This isn’t a static deploy. Hit “Subscribe” and the Stripe integration prompts a real checkout (test card or live card — your choice); invite a user and the membership updates in Postgres and the perf border animates.

The point is simple: no buried “some assembly required” gap between demo and code. Try first, buy later.

11 screens, drilled through — the shape of a real SaaS

Let’s make it explicit: here are the screens you can step through, exactly as they ship.

1. Landing (public home): Clean marketing page. “Sign in”, “Sign up”, pricing, FAQ. All text and plans pulled from the repo config — edit once, lands everywhere.

2. Sign in / Sign up / Forgot password: Battle-tested flows. Enter any email; real OTP magic-link login (no password). You’ll see one-time codes in your inbox, just like prod.

3. Dashboard: The post-auth, default route. Live stats from your user in Postgres. Table of organizations you belong to, last-accessed projects, stored preferences.

4. Billing: Click “Manage Billing” for a direct handoff to Stripe’s hosted customer portal. No iframe, no hack — just the live Stripe-native page tied to your user ID.

5. Organization Management: List, rename, delete orgs. Invite members. Accept invites (real email flow, not a dummy). Leave and switch orgs — updates everywhere.

6. Team: Tabbed modal showing current members, pending invites (read from the DB), links to edit roles, and “Remove” that kills the membership and immediately reflects in the UI.

7. Settings: Update your account: name, email, notification prefs. Change avatar (upload works — goes to storage, links in DB, rehydrates everywhere).

8. Project Table: Create, rename, archive projects. The table respects your org membership; permissions enforced via row-level security. Add a hundred, bulk-select, delete.

9. API Keys: Generate, revoke, and copy live API tokens (actually stored and checked in the DB). No fake keys — these are usable on the endpoint you control.

10. Activity Feed: Live-updating audit log. Every mutation, stored in Postgres, displayed with diffing — filterable by user/action.

11. Logout: Obvious, but here for completeness: terminates session everywhere. Re-auth via magic link, instant invalidate.

Screens behave the same in demo and your fork. Copy-paste tweaks content; the flows and data round-trip are unchanged.

Real integrations: not a stub in sight

A production SaaS app fails not on UI but at the edges: where payments, DB, and auth wire in. Here, every wire is real.

• Postgres: All mutations reflect in a production-grade DB. Invite someone, create a project, revoke a key — every write is live. ACID, RLS, and index strategies mirror what ships.
• Stripe: “Subscribe” is not a tease — you get the real Stripe checkout. Card entry, plan switch, cancel, portal return: all tested. Use any test card you like (in demo), or wire your own Stripe key to run live.
• Auth: Built on solid providers — expect email magic link (no password), session tokens, CSRF guarded. Flows are spec’d for replay and black-boxed by test.
• Storage: Avatars, files, document upload endpoints — real object store, not base64 or inline. File links persist, permissioned by user/org/project.
• Notifications: The demo ships with email triggers (invite, passwordless login). Integrate other providers in prod; the pipeline is ready.

If you see a connected button, it does what it says. If it mutates data, it survives logout. The same workflow you preview is the workflow your users will run.

Edge cases, errors, and UX polish: enforced by checklist

Show me a SaaS kit that fails on error boundary or toast handling and I’ll show you a conversion hole. The shipped demo meets a 24-point design and UX checklist enforced before every release:

• Error states: Invalid OTP, wrong email, deleted org — every error is catchable, friendly, recoverable.
• Disabled buttons: Loading and fail states are visually distinct; nav never jumps on save.
• Empty/failure views: Tables show “No data yet” with path forward. Modal closes animate in/out, restoring scroll position.
• Accessibility: Tab through, screen-reader-complete, color contrast scores passing on every state.
• Performance: Animations and inputs are 60fps in Chrome and Safari, JS footprint trimmed — measured and capped before ship.

Run through the demo and deliberately break flows: wrong email, close tab on checkout, invite yourself. Every branch you take is handled as it will be in prod.

Stripe checkout: from click to test card to portal

This is not “coming soon”. It’s fully wired and matches the real Stripe flow.

• Step 1 — Choose a plan: On the Billing screen, select “Upgrade” to kick off the checkout.
• Step 2 — Stripe opens: The demo uses Stripe’s hosted flow (test mode in the preview; wire your own key for live).
• Step 3 — Complete with a test card: Use a Stripe test card to pay (4242 4242 4242 4242). Receipt lands in the email you used.
• Step 4 — Portal access: After payment, return to “Manage Billing” — taken to the linked Stripe portal. Update/cancel your subscription from there; flow matches production.

The point: you can stress every part of your revenue path before buying the code. No handwaving around payment or refund mechanics — it's your plan, your login, your checkout.

// Stripe config: swap these for your own keys in prod
STRIPE_PUBLIC_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
// Live flow is instant on your real keys

Better Auth: passwordless, solid, and demo-backed

Passwordless magic links just work. Sign in with any email, receive a code (check spam — the demo server can be slow on outbound), click from your email or paste the code. No password reset, support overhead, or account confusion.

Invite flows issue unique join links (one per email, expiration respected), and role changes persist to DB and reflect in real time for that user. See your org/team/roles switch instantly. Try re-inviting, revoking, or mutating role mid-session — the flows mirror real SaaS at scale.

No stubbed-out auth pages or “this email domain isn’t allowed” blocks unless configured by you.

POST /api/auth/magic-link
{
  email: "your@email.com"
}
// Triggers send, persists session token, directs to dashboard on success

Postgres: every action is live-backed, every row survives reload

The demo DB is real. Create projects, invite users, revoke API keys, update settings — then log out and in again. It all sticks.
Row-level security applies: only your user/org see their data, enforced at query. Simultaneous demo sessions in different browsers keep changes in sync, not just local.

You can query your org/projects/keys in the demo. If your flows need an edge-field or custom logic, fork and go — you own the code.

-- Example: fetch projects for an org, RLS applied
select * from projects where org_id = $1 and deleted_at is null;

Behaves the same if you drop this into your own Postgres.

No “wait for hand-off” — you own the deploy flow

Some kits bait and switch with “hand-off” or “setup required” after you pay. Not here. After buy, you get code, CLI, and deploy script:

npx otf-kit deploy \
   --kit saas-dashboard \
   --domain yourdomain.com \
   --db-url postgres://... \
   --stripe-key sk_live_... \
   --email-provider=your-smtp
# Wires app, TLS, domain, checks setup, rolls production

A one-line config flips the theme or swaps AB test copy:

export const PRICING_PLANS = [
  { name: "Starter", price: 19, ... },
  { name: "Pro", price: 49, ... },
]

Copy-paste edits content. The skeleton and flows remain solid.

What “production-ready” really means

“Production-ready” is measurable — not marketing. At OTF, it means:

• Shippable with your Stripe and Postgres keys, no rewiring
• Polished on 11+ screens, edge cases covered, error boundaries in place
• Flows are the same in the live demo and your fork
• Deploy in minutes, not days; own the CI, DNS, TLS from the first step
• AI-tool configs included (Claude, Cursor, GPT): agent can extend or mutate the kit

Anything less is a prototype.

The durable layer: adopt, fork, ship — the click-through difference

Try every flow at saas.otf-kit.dev before you spend $99. You see exactly what your users will. Then fork, hook up your own providers, and ship.
Code that matches the demo, UI that matches web and mobile, flows that never stub: that’s the OTF layer — the piece that doesn’t change no matter how the market moves or which tool you slot in next.

Don’t buy until you’ve broken every edge in the demo. That’s how production-ready is supposed to feel.