🔐 Autenticacao e Onboarding
Autenticacao e a porta de entrada do seu SaaS. Sem ela, nao existe conta de usuario, nao existe plano, nao existe cobranca. E o primeiro codigo que voce precisa fazer funcionar antes de qualquer feature.
🎯 Conceito Principal
Autenticacao moderna em SaaS usa Supabase Auth (ou similar como Clerk, Auth.js) para gerenciar todo o ciclo: signup, login, logout, reset password e OAuth com provedores sociais. O resultado e um JWT token que identifica o usuario em cada request.
O fluxo completo: usuario clica "Criar Conta" > preenche email/senha (ou clica "Entrar com Google") > backend valida e cria sessao > frontend recebe token > todas as chamadas subsequentes incluem esse token no header.
- • JWT (JSON Web Token): Token assinado que carrega dados do usuario. O backend verifica a assinatura sem precisar consultar o banco a cada request
- • Session Management: Quanto tempo o token dura, quando refresha, como invalida. Supabase gerencia isso automaticamente com refresh tokens
- • Onboarding: O que acontece no primeiro acesso. Nome, preferencias, tutorial guiado. Primeira impressao define se o usuario volta
📊 Dados Relevantes
- • 86% dos usuarios preferem social login (Google/GitHub) a criar senha nova
- • 40% de abandono acontece no registro se o formulario tem mais de 3 campos
- • Supabase Auth: Setup completo em menos de 30 minutos. OAuth com Google em 5 linhas de codigo
💡 Dica Pratica
Comece com email/senha + Google OAuth. Sao os dois metodos que cobrem 95% dos usuarios. Nao perca tempo implementando 10 provedores no MVP. Adicione GitHub se o publico for dev. O resto vem depois.
✓ O que FAZER
- ✓ Usar Supabase Auth ou Clerk (nao reinvente a roda)
- ✓ Implementar social login desde o dia 1
- ✓ Proteger todas as rotas da API com middleware de auth
✗ O que NAO fazer
- ✗ Guardar senhas em texto puro no banco
- ✗ Criar auth do zero quando existem libs prontas
- ✗ Deixar rotas de API acessiveis sem token
📊 Dashboard e Interface Principal
O dashboard e onde o usuario vive dentro do seu produto. Nao e so uma tela bonita. E a experiencia central que define se o usuario continua usando ou abandona. Em apps de IA, o design do dashboard tem desafios unicos.
🎯 Conceito Principal
Existem dois paradigmas dominantes para SaaS com IA. O conversation-centered (como ChatGPT, Claude) coloca a conversa no centro. O transaction-centered (como Notion AI, Jasper) integra a IA dentro de workflows existentes.
A escolha depende do seu produto. Se o usuario interage primariamente via texto/chat, va de conversation-centered. Se a IA e uma feature dentro de um produto maior, va de transaction-centered. A maioria dos SaaS novos com IA usa o modelo de conversa com sidebar de historico.
🖥️ Anatomia de um Dashboard SaaS com IA
Sidebar
Navegacao, historico, configuracoes
Area Principal
Conversa, conteudo, output da IA
Input Bar
Texto, upload, acoes rapidas
Status Bar
Loading, tokens, modelo ativo
📊 UX Data Points
- • 3 segundos: Tempo maximo que um usuario espera sem feedback visual antes de achar que algo quebrou
- • Streaming: Mostrar resposta sendo gerada em tempo real reduz percepcao de espera em 60%
- • Sidebar colapsavel: Em mobile, sidebar vira drawer. 67% do trafego de SaaS vem de desktop, mas mobile precisa funcionar
💡 Dica Pratica
Copie o layout do ChatGPT ou Claude como base. Serio. Sidebar esquerda com historico + area central de conversa + input bar na base. Usuarios ja sabem usar esse padrao. Nao invente. Inove no conteudo, nao no layout.
⚙️ System Prompts e Fluxo da Aplicacao
O system prompt e o DNA do seu produto. Ele define como a IA se comporta, o que sabe, o que nao faz e como responde. Um SaaS com system prompt generico e um ChatGPT com login. Um SaaS com system prompt bem feito e uma ferramenta especializada.
🎯 Conceito Principal
O pipeline de processamento completo: Input do usuario > System Prompt + Contexto > LLM Processing > Output formatado. Cada etapa tem configuracoes que afetam o resultado final.
- • System Prompt: Instrucoes permanentes enviadas a cada chamada. Definem personalidade, capacidades e limites. E o "manual do funcionario" da IA
- • Temperature: 0.0 = respostas deterministicas (sempre igual). 1.0 = maximo de criatividade. Para SaaS, use 0.1-0.3 para consistencia
- • Context Window: A memoria de curto prazo. Tudo que voce envia (system prompt + historico + input) precisa caber. GPT-4o: 128k tokens. Claude: 200k tokens
💻 Anatomia de um System Prompt para SaaS
Estrutura recomendada:
💡 Dica Pratica
Versione seus system prompts. Guarde cada versao com data e resultado esperado. Quando algo quebrar (e vai), voce consegue voltar. Trate system prompts como codigo: com git, reviews e testes.
✓ O que FAZER
- ✓ Definir identidade, capacidades e limites no prompt
- ✓ Injetar contexto do usuario dinamicamente
- ✓ Usar temperature baixa (0.1-0.3) para consistencia
✗ O que NAO fazer
- ✗ Deixar o system prompt vazio ou generico
- ✗ Enviar todo o historico sem truncar (estoura context window)
- ✗ Hardcodar temperature 1.0 e esperar respostas consistentes
📎 Upload Multimodal
Um SaaS que so aceita texto e como um escritorio que nao aceita documentos impressos. Upload multimodal e o que separa um chatbot de um produto profissional. PDFs, imagens, planilhas, videos -- tudo vira input para a IA processar.
🎯 Conceito Principal
Upload multimodal envolve tres etapas: receber o arquivo, extrair conteudo processavel e enviar para a IA. Cada tipo de arquivo tem seu pipeline.
- • PDF: Extrair texto com pdf-parse ou Apache Tika. Documentos grandes precisam de chunking (dividir em pedacos de ~1000 tokens)
- • Imagens: Enviar direto para vision models (GPT-4o, Claude 3.5) que "enxergam" o conteudo. Ou usar OCR (Tesseract) para extrair texto
- • Video: Extrair frames-chave + transcrever audio (Whisper). Enviar frames para vision model + texto da transcricao
- • Chunking: Documentos grandes nao cabem no context window. Dividir em pedacos, processar cada um, e agregar resultados
📊 Limites Praticos
- • GPT-4o Vision: Ate 20MB por imagem, suporta PNG/JPEG/GIF/WebP. Custo: ~$0.003 por imagem 512x512
- • Claude 3.5: Ate 5 imagens por request, 20MB cada. Processa PDFs nativamente ate 100 paginas
- • Supabase Storage: Free tier: 1GB. Upload direto do frontend com presigned URLs. Integra com auth automaticamente
- • Chunking ideal: 500-1500 tokens por chunk. Overlap de 100-200 tokens entre chunks para manter contexto
💡 Dica Pratica
Para o MVP, suporte apenas PDF e imagens. Sao os formatos que 90% dos usuarios vao enviar. Use Supabase Storage para guardar os arquivos e processar no backend. Video e audio sao features de v2.
✓ O que FAZER
- ✓ Validar tipo e tamanho do arquivo antes do upload
- ✓ Mostrar preview do arquivo e progresso de upload
- ✓ Implementar chunking para documentos grandes
✗ O que NAO fazer
- ✗ Aceitar qualquer arquivo sem validacao (risco de seguranca)
- ✗ Enviar PDF de 200 paginas inteiro para a API (estoura limite)
- ✗ Guardar arquivos no servidor local (nao escala)
🔄 Estados do Sistema e Historico
IA demora. As vezes 2 segundos, as vezes 30. Se o usuario nao sabe o que esta acontecendo, ele acha que bugou e fecha a aba. Gerenciar estados visuais e tao importante quanto a propria resposta da IA.
🎯 Conceito Principal
Todo componente do SaaS precisa comunicar seu estado atual. Os 4 estados fundamentais sao: idle (esperando input), loading (processando), success (concluido) e error (algo deu errado).
Alem dos estados, o historico de conversas e feature obrigatoria. O usuario precisa poder fechar o browser, voltar no dia seguinte e continuar de onde parou. Isso exige persistencia no banco de dados e recuperacao de sessoes.
🔄 Os 4 Estados Fundamentais
Idle
Esperando input do usuario
Loading
IA processando resposta
Success
Resposta entregue com sucesso
Error
Algo falhou, opcao de retry
📊 Dados de UX
- • Skeleton screens reduzem percepcao de espera em 35% comparado a spinners tradicionais
- • Streaming text (resposta aparecendo token por token) e o padrao de ouro para apps de IA. Usuarios preferem 10x mais que esperar a resposta completa
- • Retry automatico: Em caso de erro de API, tentar novamente 1-2 vezes antes de mostrar erro ao usuario reduz falhas visiveis em 70%
💡 Dica Pratica
Implemente streaming desde o dia 1. Tanto OpenAI quanto Anthropic suportam streaming nativamente. O usuario ve a resposta sendo construida em tempo real. Sem streaming, seu SaaS parece travado a cada pergunta.
✓ O que FAZER
- ✓ Mostrar feedback visual em cada estado (idle, loading, success, error)
- ✓ Salvar conversas no banco com session_id e timestamps
- ✓ Implementar retry automatico em erros transientes
✗ O que NAO fazer
- ✗ Mostrar tela em branco enquanto a IA processa
- ✗ Guardar historico apenas em localStorage (desaparece)
- ✗ Ignorar erros da API e deixar o usuario sem feedback
🛠️ Exercicio: SaaS Funcional
Hora de juntar tudo. Este exercicio e a entrega principal da Trilha 3. Voce vai sair daqui com um SaaS funcional: autenticacao, dashboard, fluxo de IA, upload e historico. Um produto que um usuario real consegue usar.
Exercicio: Construir SaaS Funcional
Tempo estimado: 40-60 minutos
Autenticacao funcional
Implementar signup, login e logout com Supabase Auth:
Dashboard com sidebar e area principal
Layout: sidebar esquerda com historico de conversas, area central para o chat, input bar na base:
│ Sidebar │ Area Principal (Chat) │
│ Conv 1 │ Msgs do usuario + IA │
│ Conv 2 │ │
│ Conv 3 │ ┌──────────────────────┐ │
│ │ │ Input + Upload btn │ │
└──────────┴─┴──────────────────────┴─┘
Fluxo de IA com system prompt
Conectar o input do usuario ao LLM com system prompt, temperature e streaming:
Upload de arquivo processado
Implementar upload de PDF/imagem, extrair conteudo e enviar como contexto para a IA. Mostrar preview e progresso.
Historico de conversas persistente
Salvar cada conversa no Supabase com user_id, session_id e timestamps. Listar na sidebar. Clicar carrega a conversa anterior.
✅ Criterios de Sucesso
🌟 Bonus
Adicione dark mode toggle e contagem de tokens no status bar. Mostrar ao usuario quantos tokens ele ja usou naquela conversa ajuda a gerenciar custos e da transparencia ao produto.
📋 Resumo da Trilha
Proxima Trilha:
Trilha 4 - Agentes, MCP e Skills. Adicionar inteligencia real ao SaaS com agentes autonomos e ferramentas.