SaaS Starter KitSaaS Starter

This demo runs data for a fictional design studio, entirely in your browser. Switch the sample user above the frame and the screens change to match that role. It opens in English here; press 日本語 to switch to Japanese.

There are three sample users. You can add, edit, and delete projects, rename the organization, change teammates’ roles, create an invitation link, and choose a plan and go through a mock checkout. Signed in as a member, you can’t delete projects others created, and the invitation section doesn’t appear at all.

Who can do what is decided by a single table in the kit. The screens and the server logic read the same table, so you never see a button that looks usable only to be refused. This demo runs that table and logic as they are, not a rewrite for the demo.

The free plan allows up to 3 projects. At the limit you see an upgrade prompt, and choosing a plan takes you to a mock checkout. Once paid, the subscription comes in through the same path as the real thing (the payment webhook), and the limit rises to 50.

In production, Supabase and Stripe connect here. This demo runs only in your browser and makes no network requests at all. Nothing you choose is sent anywhere, and reloading resets the demo. The sign-up screen, the invitation acceptance flow, and the admin screens are not part of the demo.

The kit is built with Next.js (App Router) and TypeScript and includes login, organizations and invitations, role-based permissions, project management, Stripe subscription billing, three legal templates (six documents in Japanese and English), and a Japanese/English switch. The screens and server logic go through just four interfaces, so you can swap the services behind them and keep the screens as they are.

This demo is the actual SaaS Starter Kit (¥19,800, one-time purchase) ── note / BOOTH

Purchases are made in Japanese on BOOTH or note, and priced in Japanese yen.