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.

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.

---

Originally published at otf-kit.dev — full-stack kits your AI coding agent can actually ship to production. See the kits →