Modulo 3.7 - SaaS Funcional (Exercicio Integrador)

🔗 Integrando Auth + Dashboard + AI

Ate agora, cada peca foi construida separadamente. Auth funciona. Dashboard renderiza. IA responde. Upload processa. O desafio agora e diferente: fazer tudo conversar. O login alimenta o dashboard, o dashboard mostra conversas, as conversas usam o pipeline de IA. Nenhuma peca funciona isolada num produto real.

🎯 Conceito Principal

A integracao segue um fluxo linear que precisa ser bulletproof: se qualquer elo da corrente quebra, o usuario fica preso. O fluxo e:

• Auth → Session: Login com Supabase retorna JWT. Esse token e armazenado e enviado em todo request subsequente. Sem token valido, nenhuma rota funciona
• Session → Dashboard: O token carrega o user_id. O dashboard busca conversas WHERE user_id = token.sub. Sidebar popula automaticamente. Row Level Security (RLS) no Supabase garante que usuario A nunca ve dados de B
• Dashboard → AI Pipeline: Quando o usuario envia mensagem, o frontend passa o token + conversation_id + message. O backend valida o token, busca o historico da conversa, monta o array de messages com system prompt, e chama a API da LLM
• AI Pipeline → Storage: A resposta e salva no banco (messages table) e streamada para o frontend. Anexos vao para o Supabase Storage com referencia na tabela attachments

🏗️ Arquitetura de Integracao

Fluxo completo de um request:

┌─────────┐ JWT ┌──────────┐ query ┌──────────┐

│ Login │ ───────→ │ Session │ ────────→ │Dashboard│

└─────────┘ └──────────┘ └────┬─────┘

│ msg

▼

┌─────────┐ stream ┌──────────┐ messages ┌──────────┐

│Response │ ◀──────── │ LLM API │ ◀──────── │ Backend │

└─────────┘ └──────────┘ └────┬─────┘

│ save

▼

┌──────────┐

│ Supabase │

└──────────┘

💻 Middleware de Auth para API Routes

// middleware/auth.ts - protege todas as rotas da API

export async function requireAuth(req, res, next) {

const token = req.headers.authorization?.split('Bearer ')[1];

if (!token) return res.status(401).json({

error: 'Voce precisa estar logado para acessar isso.'

});

const { data: { user }, error } = await supabase.auth.getUser(token);

if (error || !user) return res.status(401).json({

error: 'Sessao expirada. Faca login novamente.'

});

req.user = user; // disponivel em todas as rotas

next();

}

💡 Dica Pratica

Teste o fluxo completo em sequencia, nao cada peca isolada. Crie uma conta nova, faca login, crie uma conversa, envie uma mensagem com arquivo, receba a resposta, feche o browser, reabra e veja se tudo esta la. Se qualquer etapa falhar, e um bug de integracao que testes unitarios nunca pegam.

🔀 Fluxo Completo do Usuario

O fluxo end-to-end e o teste definitivo do seu SaaS. Cada etapa precisa funcionar perfeitamente e transicionar para a proxima sem friccao. Se o usuario sentir um "bump" entre o registro e o primeiro uso, voce esta perdendo gente.

🎯 O Fluxo End-to-End

Cada etapa tem seus proprios desafios de UX e pontos de falha. Mapeie todos antes de comecar a implementar:

Register

Formulario com email + senha ou OAuth (Google). Validacao em tempo real (email valido, senha forte). Enviar email de confirmacao. Redirecionar para onboarding apos confirmar.

Ponto critico: 40% de abandono se pedir mais de 3 campos

Onboard

Coletar nome, caso de uso principal, preferencias. Pode ser 1-3 telas com progress bar. Mostrar o valor do produto imediatamente. "Qual e seu primeiro projeto?" ja cria uma conversa automaticamente.

Ponto critico: Nao pedir info que nao sera usada nas proximas 24 horas

Create Conversation

Botao "Nova Conversa" cria registro no banco e abre a area de chat. Auto-titulo gerado apos a primeira interacao. Conversa aparece imediatamente na sidebar.

Ponto critico: A primeira conversa pode ser criada automaticamente no onboarding

Send Message

Usuario digita e envia. Mensagem aparece no chat imediatamente (optimistic update). State transiciona para loading. Input e desabilitado. Typing indicator aparece.

Ponto critico: Optimistic update faz parecer instantaneo mesmo em conexao lenta

Get AI Response

Backend monta messages array, chama LLM com streaming, tokens chegam ao frontend em tempo real. Resposta completa e salva no banco. State transiciona para success e depois idle.

Ponto critico: Streaming e obrigatorio. Sem ele, 5-15s de tela parada

View History

Sidebar lista todas as conversas. Clicar carrega as mensagens com paginacao. Busca por texto. Fechar e reabrir o browser mantem tudo. Multi-device sincronizado.

Ponto critico: Sem historico, seu SaaS e descartavel

📊 Metricas de Referencia para o Fluxo

• Time to first value: Do registro ate a primeira resposta da IA em menos de 2 minutos. Se demorar mais, simplifique o onboarding
• Completion rate: 80%+ dos que comecam o registro devem chegar a enviar a primeira mensagem. Menos que isso indica friccao no fluxo
• Return rate (D1): 30%+ dos usuarios devem voltar no dia seguinte. Se nao voltam, o historico e a qualidade da IA nao estao bons o suficiente

✨ Polishing a Interface

O "polishing" e a diferenca entre um projeto de portfolio e um produto que alguem pagaria para usar. Nao e sobre redesign, e sobre 10 ajustes rapidos que elevam drasticamente a percepcao de qualidade. Cada um leva 5-15 minutos.

🎯 10 Quick UX Wins

Dark mode toggle - localStorage para persistir. Transicao suave com CSS transition. Respeitar prefers-color-scheme do sistema como default

Responsive audit - Testar em 320px, 768px e 1440px. Sidebar vira drawer no mobile. Input bar fixa na base. Textos nao quebram

Loading states review - Verificar que TODAS as chamadas de API tem loading state. Nenhum botao sem feedback ao clicar

Error handling audit - Desconectar internet e testar. Enviar request invalido. Verificar que toda mensagem de erro e user-friendly

Keyboard shortcuts - Enter para enviar, Shift+Enter para nova linha, Cmd+K para busca, Escape para fechar modais. Usuarios power adoram

Empty states - Quando nao tem conversas, nao mostrar lista vazia. Mostrar "Comece sua primeira conversa!" com botao de acao

Copy to clipboard - Botao de copiar em cada resposta da IA. Feedback visual "Copiado!" por 2 segundos. Formatar como markdown para paste

Auto-scroll inteligente - Scroll automatico para baixo durante streaming. Mas se o usuario scrollou para cima manualmente, nao forcar scroll

Favicon e titulo dinamico - Mudar o titulo da aba para "Nova mensagem..." quando IA responder com a aba em background. Notificacao sutil

Textarea auto-resize - O input cresce conforme o usuario digita. Max 6 linhas, depois scroll interno. Muito melhor que textarea fixa

💡 Dica Pratica

Nao tente implementar os 10 de uma vez. Escolha os 3 que mais impactam a primeira experiencia do usuario: loading states, empty states e responsive. O resto e iteracao pos-lancamento.

🧪 Testes de Integracao Rapidos

Voce nao precisa de um framework de testes sofisticado para validar que seu SaaS funciona. O que voce precisa e de um checklist de QA manual que cobre os fluxos criticos. Teste como um usuario, nao como um dev.

🎯 Checklist de QA Manual

Auth Flow

☐ Criar conta com email/senha funciona

☐ Login com Google OAuth funciona

☐ Logout limpa sessao e redireciona

☐ Rota protegida redireciona para login sem token

☐ Token expira e refresh funciona silenciosamente

AI Pipeline

☐ Mensagem enviada e resposta recebida com streaming

☐ System prompt esta sendo aplicado (IA se comporta como configurado)

☐ Historico da conversa e enviado (IA lembra do contexto)

☐ Erro de API mostra mensagem amigavel com retry

File Upload

☐ Upload de PDF funciona e conteudo e extraido

☐ Upload de imagem funciona e IA "ve" o conteudo

☐ Arquivo grande demais mostra erro claro (nao crash)

☐ Formato invalido e rejeitado com mensagem

Conversation CRUD

☐ Criar nova conversa funciona

☐ Clicar em conversa da sidebar carrega mensagens

☐ Deletar conversa remove da sidebar e do banco

☐ Fechar browser e reabrir: historico persiste

💡 Dica Pratica

Grave a tela enquanto testa. Use o gravador de tela nativo do seu OS. Quando encontrar um bug, o video ja esta la. E tambem serve como material para o Demo Day (topico 6).

⚡ Performance Basica

Performance nao e otimizacao prematura quando afeta a experiencia do usuario. Um dashboard que leva 5 segundos para carregar parece quebrado. 4 ajustes basicos resolvem 80% dos problemas de performance sem complexidade.

🎯 Os 4 Pilares de Performance para SaaS

•
Image Optimization:
Usar WebP ao inves de PNG/JPEG. Lazy loading com loading="lazy" em imagens fora da viewport. Next.js Image component faz isso automatico. Avatares: max 100x100px, nao 500x500.
•
Lazy Loading de Componentes:
Nao carregar o editor de codigo se o usuario esta na pagina de login. React.lazy() + Suspense para code splitting. Reduz bundle inicial em 30-50%.
•
API Response Caching:
Conversas ja carregadas nao precisam ser buscadas novamente. Cache local com SWR ou React Query. Stale-while-revalidate: mostra cache primeiro, atualiza em background.
•
Database Query Optimization:
Indices nas colunas usadas em WHERE (user_id, conversation_id, created_at). Paginacao com cursor ao inves de OFFSET. Select apenas colunas necessarias, nao SELECT *.

💻 Lighthouse Audit Basico

Abra o Chrome DevTools > Lighthouse > Generate report. Os numeros que importam para MVP:

90+

Performance

LCP < 2.5s

90+

Accessibility

Alt texts, contrast

80+

Best Practices

HTTPS, console clean

80+

SEO

Meta tags, viewport

💡 Dica Pratica

SWR (stale-while-revalidate) e o melhor amigo de SaaS com IA. A sidebar carrega conversas do cache instantaneamente enquanto busca atualizacoes em background. O usuario nunca ve loading na sidebar apos a primeira vez. npm install swr e 10 linhas de codigo.

✓ O que FAZER

✓ Lazy load de imagens e componentes pesados
✓ Cache de API responses com SWR/React Query
✓ Indices no banco para queries frequentes

✗ O que NAO fazer

✗ Otimizar prematuramente antes de medir (profile first)
✗ Carregar 500 conversas na sidebar de uma vez
✗ Ignorar o Lighthouse ate o lancamento

🎬 Exercicio: Demo Day

Este e o exercicio final da Trilha 3. Voce vai gravar um video de 2 minutos demonstrando seu SaaS funcional. Nao precisa ser perfeito. Precisa funcionar de ponta a ponta. Se funciona no video, funciona na vida real.

🎬

Exercicio Final: Gravar Demo de 2 Minutos

Tempo de preparacao: 45-60 minutos | Gravacao: 2 minutos

O video deve cobrir o fluxo completo do usuario. Use o gravador de tela nativo (QuickTime no Mac, OBS no Windows/Linux). Nao edite, nao adicione musica, nao faqa intro. Direto ao ponto.