Lançador de MVP de SaaS

Visão Geral

Esta habilidade guia você na construção de um MVP de SaaS pronto para produção no menor tempo possível. Ela cobre tudo, desde validação de ideias e seleção de stack de tecnologia até autenticação, pagamentos, design de banco de dados, implantação e lançamento — usando ferramentas modernas e comprovadas.

Quando Usar Esta Habilidade

• Use ao iniciar um novo produto SaaS do zero
• Use quando precisar escolher uma stack de tecnologia para uma aplicação web
• Use ao configurar autenticação, faturamento ou banco de dados para um SaaS
• Use quando quiser uma lista de verificação de lançamento estruturada antes de ir ao ar
• Use ao projetar a arquitetura de uma aplicação multi-tenant
• Use ao fazer uma revisão técnica de um SaaS existente em estágio inicial

Guia Passo a Passo

1. Valide Antes de Construir

Antes de escrever qualquer código, valide a ideia:

Validation checklist:
- [ ] Can you describe the problem in one sentence?
- [ ] Who is the exact customer? (not "everyone")
- [ ] What do they pay for today to solve this?
- [ ] Have you talked to 5+ potential customers?
- [ ] Will they pay $X/month for your solution?

Regra: Se você não conseguir que 3 pessoas paguem antecipadamente ou assinem uma carta de intenção, não construa ainda.

2. Escolha Sua Stack de Tecnologia

Stack SaaS moderna recomendada (2026):

3. Estrutura do Projeto

my-saas/
├── app/                    # Next.js App Router
│   ├── (auth)/             # Auth routes (login, signup)
│   ├── (dashboard)/        # Protected app routes
│   ├── (marketing)/        # Public landing pages
│   └── api/                # API routes
├── components/
│   ├── ui/                 # shadcn/ui components
│   └── [feature]/          # Feature-specific components
├── lib/
│   ├── db.ts               # Database client (Prisma/Drizzle)
│   ├── stripe.ts           # Stripe client
│   └── email.ts            # Email client (Resend)
├── prisma/
│   └── schema.prisma       # Database schema
├── .env.local              # Environment variables
└── middleware.ts           # Auth middleware

4. Schema Principal do Banco de Dados (SaaS Multi-tenant)

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  createdAt     DateTime  @default(now())
  subscription  Subscription?
  workspaces    WorkspaceMember[]
}

model Workspace {
  id        String    @id @default(cuid())
  name      String
  slug      String    @unique
  plan      Plan      @default(FREE)
  members   WorkspaceMember[]
  createdAt DateTime  @default(now())
}

model Subscription {
  id                 String   @id @default(cuid())
  userId             String   @unique
  user               User     @relation(fields: [userId], references: [id])
  stripeCustomerId   String   @unique
  stripePriceId      String
  stripeSubId        String   @unique
  status             String   # active, canceled, past_due
  currentPeriodEnd   DateTime
}

enum Plan {
  FREE
  PRO
  ENTERPRISE
}

5. Configuração de Autenticação (Clerk)

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher([
  '/',
  '/pricing',
  '/blog(.*)',
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api/webhooks(.*)',
]);

export default clerkMiddleware((auth, req) => {
  if (!isPublicRoute(req)) {
    auth().protect();
  }
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

6. Integração Stripe (Assinaturas)

// lib/stripe.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2025-01-27.acacia',
});

// Criar sessão de checkout
export async function createCheckoutSession(userId: string, priceId: string) {

…