SaaS CRM multi-tenant com pipeline kanban, WhatsApp Cloud API e app desktop Electron
01
O Trativa é um SaaS multi-tenant construído em 4 repositórios separados: front-end React/PWA, back-end Node.js/MongoDB, landing page e app desktop Electron instalável para Windows. O sistema tem multi-tenancy completo por Organization — cada empresa tem seus leads, usuários e campos personalizados isolados. O pipeline tem 9 etapas reais (novo → em atendimento → contatado → interessado → sem resposta → reunião marcada → proposta enviada → convertido → perdido), com drag-and-drop via dnd-kit e updates em tempo real por Socket.IO. Relatórios incluem funil de conversão, desempenho por vendedor, por origem, por cidade, leads parados e série temporal de conversão.
Meu papel
Desenvolvedor full-stack solo — arquitetura de 4 repositórios, back-end Node.js/Express/MongoDB, front-end React/Vite/PWA, integração WhatsApp Cloud API, Stripe multi-plano, app desktop Electron, landing page com Framer Motion.
Categoria
SaaS
Ano
2025
Status
Plataformas
Quatro repositórios, um produto. O app React fala só com a API; a API é a única que sabe de organização, plano e WhatsApp. O Electron não reimplementa nada — carrega o mesmo app, que já é responsivo.
Vite · PWA · Railway
Node · Railway
MongoDB + integrações
Electron · Windows
Sincronização: scopeQuery aplica Organization + soft delete em todo endpoint: um lead de uma empresa nunca aparece na consulta de outra, mesmo que o id vaze.
02
Equipes comerciais brasileiras perdem oportunidades por falta de rastreamento estruturado — leads chegam de fontes diferentes (Google Maps, Instagram, indicação, anúncios), são anotados no caderno ou WhatsApp e ficam sem acompanhamento. Gestores não têm visibilidade do funil em tempo real.
03 — A Solução
CRM web + PWA + desktop com pipeline de 9 etapas personalizável, integração WhatsApp Cloud API para comunicação direta, campos personalizados com 10+ tipos para adaptar à realidade de cada empresa, metas de vendas por vendedor e relatórios completos de funil — com assinatura Stripe em 4 planos e trial de 14 dias.
04
O sistema em funcionamento, gravado da aplicação real com uma loja de demonstração — nenhuma tela é mockup.
Pipeline
Nove etapas reais de comercial, do primeiro contato ao convertido. O card sai de uma coluna e entra na outra com @dnd-kit, o contador de cada etapa se ajusta, o status grava na hora e o Socket.IO empurra a mudança para quem estiver com a mesma tela aberta.
Integração com a WhatsApp Cloud API da Meta: a conversa fica numa aba do lead, com o aviso da janela de 24 horas, o histórico de enviadas e recebidas com status de leitura e a escolha entre mensagem livre (dentro da janela) ou template aprovado (fora dela).
Relatórios
As etapas viram barras proporcionais com a conversão de uma para a outra. Quando uma passagem fica abaixo de 30%, ela é marcada em vermelho e o sistema diz o que está acontecendo ali — o mesmo recorte pode ser lido por vendedor e por origem.
Personalização
Onze tipos de campo (texto, número, moeda, data, sim/não, seleção, múltipla escolha, URL, e-mail, telefone, texto longo). O admin escolhe onde cada um aparece: no card do kanban, como coluna da tabela ou nos filtros de busca — e a mudança vale para a organização inteira na hora.
Entrada de leads
A planilha sobe, o sistema mostra quantas linhas são válidas, quantas são duplicadas e quantas têm erro — e só grava depois do aceite. A mesma rota existe como API com chave própria, para quem prefere mandar os leads direto da automação.
Equipe
O convite define papel e a quais projetos a pessoa tem acesso. As metas são medidas contra o histórico do lead — não contra um contador à parte —, então o progresso de cada vendedor reflete exatamente as mudanças de status do período.
Interface
Cada usuário escolhe a paleta do sistema (azul, roxo, verde, laranja, rosa ou cinza) e ela é aplicada por data-theme na raiz, sobrescrevendo os tokens do Tailwind. A identidade da marca não muda com isso: o azul institucional continua no logo e na comunicação.
05
Cada vídeo mostra uma tarefa completa, de ponta a ponta. Clique para assistir com controles.
06
Drag-and-drop via @dnd-kit com 9 status reais de comercial. Visualizações alternáveis: kanban, tabela e cards. Updates em tempo real via Socket.IO para toda a equipe simultaneamente.
Integração nativa com WhatsApp Cloud API — envio e recebimento de mensagens diretamente na timeline do lead, sem sair do CRM.
10+ tipos de campo (texto, número, moeda, data, boolean, select, multiselect, URL, e-mail, telefone) criados pelo admin e exibíveis no kanban, na tabela ou nos filtros.
8+ endpoints de relatório: funil de conversão com gargalos (<30%), desempenho por vendedor, leads por origem, por cidade, leads parados e série temporal de conversão.
Metas por vendedor com 4 tipos (convertidos, contatados, propostas, reuniões), período configurável e progresso calculado em tempo real contra o LeadHistory.
Versão desktop instalável para Windows (.exe NSIS) via Electron.js — mesma experiência do web app, com notificações nativas e atalhos de teclado. Disponível em trativa.app/download.
07
Capturas reais do produto, organizadas por módulo. Clique em qualquer tela para ampliar.
08
O vendedor abre o CRM entre uma visita e outra: no celular a sidebar vira gaveta, o kanban vira abas por etapa e a conversa de WhatsApp continua dentro da ficha. O mesmo app é instalado como PWA.
09
Front-end
Back-end
Banco de Dados
Deploy
Integrações
Bibliotecas
10
Produto dividido em 4 repositórios com responsabilidades claras: backend (API + regras de negócio), frontend (SPA/PWA), landing page (marketing/SEO) e desktop (Electron wrapper). O Electron não reimplementa nada — carrega o web app, que já é responsivo. Campos personalizados são configurados por admin e propagam para kanban, tabela e filtros automaticamente, sem deploy.
11
Campos personalizados nos filtros e exportação CSV: o campo customFields é um Map<Mixed> no Mongoose, mas chegava como objeto plano do JSON. O frontend precisou lidar com os dois formatos (getCustomValue aceita Map e objeto). No export, Papaparse recebe colunas dinâmicas calculadas a partir dos campos ativos da organização — campos inativos não aparecem mesmo que o lead tenha o valor gravado.
12
13
Tem uma ideia parecida ou quer construir algo diferente? Vamos conversar.
Prévia em vídeoSaaS
Sistema completo de ponto de venda para petshops, casas de ração, mercearias e lojas de bairro: PDV com leitor de código de barras, caixa, estoque, fiado, contas a pagar, PIX, 50+ relatórios e Recebimento Seguro — tudo funcionando sem internet, com sincronização para a nuvem e app de gestão no celular.
Prévia em vídeoSistema Web
Loja B2B de acessórios para celular: catálogo com 349 produtos e filtro por aparelho (293 modelos), preço progressivo por quantidade, carrinho com escolha de cores, frete real e checkout que abre o WhatsApp com o pedido pronto. Painel completo para o lojista, exportação Excel/PDF e medição Meta Pixel + Conversions API.
Prévia em vídeoSaaS
Sistema completo de gestão para petshops: agenda com status em tempo real via Socket.io, clientes, pets, financeiro, colaboradores e assinatura mensal/anual via Stripe — PWA instalável no celular ou computador.