Tech stack

Ship & Scale brings your app, backend services and deployment workflow into one connected starting point. You get a single Next.js codebase with the integrations in place, ready to extend with your own features.

We use this stack to keep product development in code you control, with hosted services handling the infrastructure behind it. Here's what each part contributes to your SaaS.

App and interface

Next.js

Next.js is the React framework that runs your application. Its App Router keeps pages, server actions and API routes in one project, so a feature's interface and server logic can live together. You'll use it for both the public website and protected dashboard.

React

React builds the interface from reusable components. A form, sidebar or settings panel can be defined once and used across your app. This makes new screens easier to maintain as your product grows, and gives your coding agent existing patterns to build on.

TypeScript

TypeScript adds type checking to JavaScript. It catches mismatched data and component props while you're working, helping you change code with clearer expectations about what each function receives and returns. It supports safer refactoring; runtime validation and tests still matter.

Tailwind CSS

Tailwind CSS styles layouts, spacing, colors and responsive behavior through utility classes. The starter combines those classes with shared design tokens, so you can change the brand and build new screens with a consistent appearance. Most visual work happens alongside the component you're editing.

shadcn/ui

shadcn/ui supplies the source for buttons, dialogs, forms and other interface components. Those files live in your repository, so you and your agent can adapt their appearance and behavior. The starter uses Base UI interaction primitives and Lucide icons; UI customization shows where to start.

Data and services

Supabase

Supabase provides hosted Postgres, Auth, Storage and Edge Functions. It gives your SaaS a relational database with sign-in and access controls connected to it. The starter uses server checks and database policies to isolate workspace data, giving you a permission model to follow when adding features.

Stripe

Stripe handles subscription payments through hosted Checkout and the customer billing portal. Your app uses verified webhooks to keep each workspace's subscription state in sync. This gives you a billing workflow to extend with your own plans, while keeping payment collection with Stripe. See subscriptions and webhooks.

Resend

Resend sends your app's transactional emails. The starter includes five editable templates for welcome, verification, password reset, magic-link sign-in and workspace invitations. Keeping these templates in source lets you review email changes alongside the app; Kickstart publishes them to your Resend account.

OpenRouter

OpenRouter connects your app to AI models through one API. The chat example uses it with the Vercel AI SDK to stream responses, giving you a starting point for AI features and a shared integration for trying different models. Add a server-only key and fund your provider account using the AI setup guide.

Documentation and publishing

Fumadocs

Fumadocs turns MDX files into product documentation with navigation, search and code examples. You can update guides in the same repository as the features they explain. The starter includes a documentation site for your customers, separate from the Ship & Scale manual you're reading now.

GitHub

GitHub stores your private repository and its Git history. It gives you a place to review changes, collaborate and trace how a feature evolved, including changes made by an agent. Deployment Kickstart creates that repository when you deploy.

Vercel

Vercel builds and hosts your Next.js app from its connected GitHub repository. Deployment Kickstart configures that connection and the runtime settings; later pushes to the production branch trigger new deployments. This keeps releasing code part of your normal Git workflow. Follow deployment after local setup.

Where your app runs

During development, Next.js runs on your computer against your hosted services. After deployment, Vercel runs the app. Supabase holds your data and handles Auth in both cases, while Stripe, Resend and OpenRouter serve the features that use them. No local database or Docker setup is required.

The integrations give you a foundation for a production-ready SaaS. Your provider accounts have their own costs and limits, and your app still needs testing and the launch checks. Exact dependency versions live in package.json and package-lock.json; install those versions when following Setup.

Repository map

Use this map to find the main parts of your app when you open the starter. Most feature work will touch app/, components/ and lib/; database changes belong in supabase/migrations/.

app/
  (auth)/             sign-in, signup and account recovery pages
  (public)/           blog and public legal pages
  actions/            authenticated server mutations
  admin/              admin panel for app operators
  api/                HTTP, AI and integration endpoints
  dashboard/          protected product pages
  docs/               your customers' product-documentation UI
  oauth/              consent page for connected MCP clients
  onboarding/         account survey
  preview/            development-only UI fixtures
  setup/              development-only setup information
components/           feature UI and all 61 installed UI primitives
config/               site, marketing, SEO, billing seed, integrations
content/docs/         your product docs in MDX
emails/               source HTML email templates
hooks/                shared React hooks
lib/                  auth, workspace, billing and feature services
public/               images, icons and other public files
scripts/kickstart/    account checks, provisioning and retry state
supabase/migrations/  versioned hosted SQL changes
supabase/functions/   hosted email/billing function source
tests/                setup fixtures, database and browser checks
docs/                 engineering notes for you and your agent
proxy.ts              refreshes the signed-in session on each request

The root marketing pages also include app/page.tsx, app/pricing, app/faq and app/contact. Next.js folder groups in parentheses organize routes without adding URL segments. Generated .source, .next, setup records and dependencies are not code you edit.

When you start building features, Architecture explains how requests, permissions and commands fit together. You don't need it before Setup.