Designyff
Build faster. Ship better.
Practical guides for building SaaS, AI products, marketplaces, mobile apps and everything around them.
Featured · SaaS
Building a SaaS with Next.js, Stripe, and PostgreSQL
How to structure a Next.js 15 SaaS with Prisma, PostgreSQL, email-password sessions, and Stripe subscription state.
Launch
Waitlist referral codes and queue position
The Waitlist kit stores a unique refCode and computes position by counting earlier signups.
Stripe
Synchronizing Stripe subscription state with a database
Keep a plan column in Prisma aligned with Stripe subscription status using Checkout metadata and subscription events.
Stripe
Stripe webhooks with Next.js
Verify Stripe webhook signatures in a Next.js route handler and update subscription state from the event.
Stripe
Stripe subscriptions with Next.js
How a Next.js App Router app creates a subscription Checkout session, stores the customer id, and gates a Pro plan.
Marketplaces
Stripe payments for marketplaces
The Marketplace Starter charges with a one-time Checkout Session and price_data in cents. It does not use Stripe Connect.
Stripe
Stripe Customer Portal integration in Next.js
Open Stripe's Customer Portal from a Next.js route so customers can update a card or cancel without you building those forms.
Stripe
Stripe Checkout with Next.js
Create a Stripe Checkout Session from a Next.js route handler, for subscriptions and for one-time payments.
AI
Streaming AI responses in Next.js
Proxy an OpenAI-compatible streaming chat completion through a Next.js route without buffering the full body first.
AI
Storing AI generation history
The AI SaaS Starter writes each finished generation to Prisma: prompt, output, credits, and the user id.
Jobs
SEO for job boards
Public job URLs come from unique slugs. Pending and unpaid jobs should stay out of the sitemap and the index.
Directories
SEO architecture for large Next.js directories
Give each published listing its own metadata, a stable slug URL, and a sitemap without indexing pending submissions.
Marketplaces
Seller and listing architecture
In the Marketplace Starter a seller is a user, and a listing stores priceCents plus a category.
Mobile
Secure token storage with Expo
The Expo starter stores the session token in SecureStore under the key session and reads it back for the API client.
Stripe
SaaS subscription database schema
Which columns a Stripe subscription needs in Prisma, and which subscription statuses the Designyff webhook treats as Pro.
SaaS
SaaS database schema with Prisma
The Prisma user model in the Complete SaaS Starter Kit: identity, plan, and the two Stripe ids the webhook writes.
Dashboards
SaaS dashboard architecture
Where a SaaS dashboard reads plan state, and how the Admin Dashboard Kit's shell, table, and empty states fit around it.
Components
Reusable React landing-page sections
How the React section library is structured so each block is a component you copy with its stylesheet.
AI
OpenAI-compatible API architecture
The AI SaaS Starter calls an OpenAI-compatible chat completions endpoint. The base URL and model are environment variables.
SaaS
Next.js SaaS boilerplate vs starter kit
What the smaller Next.js SaaS Boilerplate includes, and what you only get in the Complete SaaS Starter Kit.
SaaS
Next.js SaaS boilerplate architecture
A small App Router layout for accounts, a dashboard, and a billing route, and how it differs from a full SaaS kit.
SaaS
Next.js authentication architecture
Email and password sessions in the SaaS starter: a hashed password, a session cookie, and routes that refuse anonymous users.
SaaS
Multi-tenant SaaS with Next.js
What the Designyff SaaS kit stores per user, and what you still have to add if each customer needs an isolated workspace.
Marketplaces
Marketplace SEO architecture
Index published listings by slug. Orders and pending checkout state are not public pages.
Marketplaces
Marketplace database schema with Prisma
Users, categories, listings priced in cents, and orders in the Marketplace Starter.
Jobs
Job board database schema
Companies, categories, and jobs in the Job Board Starter. A job stays pending until it is marked paid.
AI
Implementing AI usage limits and credits in Next.js
Enforce a monthly credit cap in Next.js by summing a Prisma generation ledger and reading the user's plan.
Stripe
Handling failed Stripe payments
The Designyff subscription webhook does not listen for invoice.payment_failed. Past-due subscriptions fall back to the free plan.
Mobile
Expo push notifications
What the Expo starter configures for notifications, and the permission call it makes on launch.
Mobile
Expo authentication architecture
How the Expo starter stores a session token in SecureStore and sends it as a bearer token to your API.
Mobile
Expo API client architecture
The Expo starter sends the session token as a bearer token on a small typed client. The screen still renders if the API is down.
Directories
Dynamic sitemap architecture
Build a Next.js sitemap from published slugs only. Pending directory listings and unpaid jobs do not belong in it.
Directories
Directory database schema
Categories and listings in the Directory Starter. New listings stay pending until you publish them.
Components
Composing a page from React sections
The React section library is copy-paste blocks with a shared stylesheet. A page is the sections you import, in order.
AI
Building an AI SaaS with Next.js
Structure a Next.js AI product around a provider adapter, a generation log, monthly credits, and Stripe plan state.
Launch
Building a waitlist with referrals in Next.js
Collect emails, issue a referral code, and compute a queue position with Prisma in a Next.js server action.
Dashboards
Building a React admin dashboard
Compose a Next.js admin shell with a sidebar, a typed sample table, and an SVG bar chart you can replace with an API.
Marketplaces
Building a marketplace with Next.js
Model sellers, listings, and orders in Prisma, and charge for a listing with a one-time Stripe Checkout Session.
Jobs
Building a job board with Next.js
Model companies, categories, and jobs in Prisma and keep unpaid submissions off the public board.
Directories
Building a directory with Next.js
Model listings and categories in Prisma and render public, SEO-friendly listing pages in the Next.js App Router.
Dashboards
Admin table empty, loading, and error states
The Admin Dashboard Kit expects a table to render an empty state, a loading state, and an error state instead of a blank panel.
Jobs
Accepting paid job submissions with Stripe
Create a one-time Stripe Checkout Session for a job posting and publish the job only after payment_status is paid.