Tutoriais
Intermediário
Você Aprenderá
- Requisitos complexos de apps
- Arquitetura multi-tenant
- Assinatura e faturamento
- Recursos de colaboração em equipe
- Painel de análise
- Implantação na Cloudflare
Construa uma Aplicação Web SaaS
Crie um SaaS multi-tenant pronto para produção em 30 minutos
Pronto para construir algo mais complexo? Neste tutorial, você criará uma aplicação SaaS completa - uma ferramenta de gerenciamento de projetos com equipes, assinaturas e análises. Veja como o Conductor planeja e o Virtuoso constrói toda a sua aplicação em containers Docker reais.
O Que Vamos Construir
Um SaaS de gerenciamento de projetos pronto para produção com: workspaces de equipe, permissões baseadas em funções, assinaturas Stripe, colaboração em tempo real, painel de análise e isolamento de dados multi-tenant - tudo implantado na edge global.
Pré-requisitos
- Concluiu o tutorial de Primeiros Passos
- Conta Nxcode Pro ($20/mês) recomendada para apps complexos
- Entendimento básico de conceitos SaaS (opcional)
Descrevendo uma Aplicação Complexa
Para aplicações SaaS, fornecer requisitos detalhados ao Conductor leva a melhores resultados. Veja como descrever nosso projeto de gerenciamento de projetos:
Construa uma aplicação SaaS de gerenciamento de projetos:
Recursos Principais:
- Workspaces de equipe com sistema de convite
- Projetos com tarefas, subtarefas e prazos
- Visualizações em quadro Kanban e lista
- Atualizações em tempo real quando membros da equipe fazem alterações
- Anexos de arquivos e comentários
- Feed de atividades e notificações
Gerenciamento de Usuários e Equipes:
- Cadastro de usuário com verificação de e-mail
- Criação de equipe e convites para membros
- Acesso baseado em funções: Proprietário, Administrador, Membro, Visualizador
- Workspaces pessoais e de equipe
Sistema de Assinatura:
- Nível Gratuito: 1 projeto, 3 membros de equipe
- Nível Pro ($10/mês): Projetos ilimitados, 10 membros
- Nível Business ($25/mês): Tudo ilimitado + suporte prioritário
- Integração com Stripe para faturamento
Análises:
- Acompanhamento do progresso do projeto
- Métricas de produtividade da equipe
- Rastreamento de tempo por tarefa
- Exportação de relatórios para PDF/CSV
Design: Interface limpa e moderna com suporte a modo escuroComo o Conductor Lida com Requisitos Complexos
Para uma aplicação SaaS, o Conductor criará um plano abrangente com múltiplas fases:
Fase 1: Fundação
- 1Configurar Next.js com TypeScript
- 2Configurar esquema de banco de dados para multi-tenancy
- 3Implementar autenticação com JWT
- 4Criar isolamento de dados de workspace/equipe
Fase 2: Recursos Principais
- 1Construir CRUD de projeto com permissões
- 2Criar sistema de gerenciamento de tarefas
- 3Implementar UI de quadro Kanban
- 4Adicionar atualizações em tempo real com WebSocket
Fase 3: Colaboração
- 1Convite de equipe e gerenciamento de membros
- 2Comentários e feed de atividades
- 3Upload de arquivos e anexos
- 4Sistema de notificações
Fase 4: Monetização
- 1Configuração de integração com Stripe
- 2Gerenciamento de assinaturas
- 3Aplicação de limites de uso
- 4Portal de faturamento
Fase 5: Análises e Refinamento
- 1Painel de análise
- 2Geração de relatórios
- 3Implementação de modo escuro
- 4Configuração de implantação na Cloudflare
Conductor
Estou planejando seu app SaaS de gerenciamento de projetos. Algumas perguntas: 1. Para atualizações em tempo real, todos os membros da equipe devem ver as mudanças instantaneamente ou apenas atualizar sob demanda? 2. Limite de armazenamento de arquivos por nível? 3. O nível gratuito deve ter acesso a análises básicas? 4. Alguma necessidade específica de tratamento de webhooks do Stripe?
User
Tempo real para todos. Nível Gratuito: 100MB, Pro: 5GB, Business: ilimitado. Análises básicas para todos. Webhooks padrão do Stripe estão ok.
Conductor
Entendido! Criei 24 tarefas em 5 fases com critérios de aceitação claros. Cada tarefa será executada no Docker com builds e testes reais. Este é um projeto maior, então a execução levará cerca de 15-20 minutos. Começando agora!
Entendendo a Arquitetura Multi-Tenant
O Virtuoso implementará o isolamento multi-tenant adequado. Aqui está o que será construído:
Isolamento de Workspace
Cada equipe recebe um workspace exclusivo. Todas as consultas são delimitadas para evitar vazamento de dados entre locatários.
Acesso Baseado em Funções
Permissões verificadas tanto no nível da API quanto da UI. Proprietários podem fazer tudo, Visualizadores são apenas leitura.
Aplicação de Assinatura
O middleware verifica o nível de assinatura antes de permitir ações. Usuários do nível gratuito recebem avisos amigáveis para upgrade.
Portabilidade de Dados
Usuários podem exportar seus dados a qualquer momento. Isso gera confiança e é exigido em muitas regiões.
Observando Builds Complexos no Docker
Para um app SaaS, o Virtuoso executa muito mais etapas de build:
Esquema criado e migrado em container isolado
Webhooks testados com Stripe CLI no Docker
Funcionalidade em tempo real testada com clientes simulados
Todas as combinações de função/ação testadas automaticamente
Testes básicos de desempenho garantem que o app escale
Ao contrário de geradores de código simples, o Nxcode realmente executa o modo de teste do Stripe, cria equipes simuladas e verifica se as atualizações em tempo real funcionam. Se algo falhar, o Virtuoso corrige automaticamente.
Assinatura e Faturamento
O Virtuoso constrói uma integração completa com o Stripe:
- Fluxo de checkout com seleção de preço
- Portal do cliente para gerenciamento de autoatendimento
- Tratamento de webhooks para alterações de assinatura
- Medição de uso para faturamento de excedentes
- Geração de faturas e histórico
- Prorrata para upgrades no meio do ciclo
O Conductor pergunta sobre os requisitos do Stripe antecipadamente porque o código de faturamento é crítico. Cada caminho de pagamento é testado no Docker antes da tarefa ser aprovada.
Painel de Análise
Seu SaaS inclui um painel de análise integrado:
Progresso do Projeto
Tarefas concluídas vs. total, gráficos de burndown
Atividade da Equipe
Quem está contribuindo, mapas de calor de atividade
Rastreamento de Tempo
Tempo gasto por tarefa, totais do projeto
Métricas de Assinatura
MRR, taxa de cancelamento, taxa de upgrade (para administradores)
Implantando seu SaaS
Implantação com um clique na edge global da Cloudflare:
- Clique em "Deploy" quando todas as tarefas passarem
- O app é compilado para produção (minificado, otimizado)
- Implanta em mais de 300 locais de edge da Cloudflare
- Obtenha sua URL pública com HTTPS automático
Recursos Prontos para Produção
- CDN global para tempos de carregamento rápidos em qualquer lugar
- Certificado SSL automático
- Proteção contra DDoS inclusa
- Conecte um domínio personalizado a qualquer momento
- Variáveis de ambiente para chaves de API
Monetize com a Economia do Criador
Transforme seu SaaS em receita recorrente:
Publicar
Liste no marketplace do Nxcode com seu preço
Definir Níveis
Configure teste gratuito e níveis de assinatura pagos
Ganhe 70%
Fique com 70% de toda a receita de assinatura
Exemplo: 200 usuários no nível Pro de $10/mês = $1.400/mês de renda passiva (após a parte de 70%)
Seu SaaS vem com Stripe integrado - os usuários pagam através da sua conta Stripe, você fica com 100% menos as taxas do Stripe. Ou use a Economia do Criador para faturamento gerenciado.
O Que Você Construiu
- Arquitetura SaaS multi-tenant
- Workspaces de equipe com acesso baseado em funções
- Faturamento de assinatura Stripe
- Recursos de colaboração em tempo real
- Painel de análise com relatórios
- Implantação de produção na edge global
Seu SaaS não foi montado a partir de modelos - cada componente foi construído, testado e verificado em containers Docker reais. Isso é qualidade de nível empresarial sem o cronograma empresarial.
Próximos Passos
Pronto para Construir seu SaaS?
Comece a construir sua aplicação SaaS pronta para produção agora.