Saltar al contenido
Lucas Batista
SaaSBeta2025

Trativa

SaaS de CRM multi-tenant con pipeline kanban, WhatsApp Cloud API y app de escritorio con Electron

Ver proyecto en vivo8 flujos en video
React 18ViteTailwind CSSSocket.IONode.jsExpress
Funciona enWebPWA (celular)Escritorio (Electron · Windows)
trativa.app
etapas en el pipeline, de nuevo a convertido
9
repositorios: app, API, landing y escritorio
4
tipos de campo personalizado por empresa
11
superficies: web, PWA y escritorio con Electron
3

01

Visión General

Trativa es un SaaS multi-tenant construido en 4 repositorios separados: front-end React/PWA, back-end Node.js/MongoDB, landing page y una app de escritorio con Electron instalable para Windows. El sistema tiene multi-tenancy completo por Organization: cada empresa tiene sus leads, usuarios y campos personalizados aislados. El pipeline tiene 9 etapas reales (nuevo → en atención → contactado → interesado → sin respuesta → reunión agendada → propuesta enviada → convertido → perdido), con drag-and-drop mediante dnd-kit y actualizaciones en tiempo real por Socket.IO. Los informes incluyen embudo de conversión, desempeño por vendedor, por origen, por ciudad, leads estancados y serie temporal de conversión.

Mi rol

Desarrollador full-stack en solitario — arquitectura de 4 repositorios, back-end Node.js/Express/MongoDB, front-end React/Vite/PWA, integración con WhatsApp Cloud API, Stripe multiplán, app de escritorio con Electron, landing page con Framer Motion.

Categoría

SaaS

Año

2025

Estado

Beta

Plataformas

WebPWA (celular)Escritorio (Electron · Windows)

Cuatro repositorios, un producto. La app React habla solo con la API; la API es la única que conoce la organización, el plan y WhatsApp. Electron no reimplementa nada: carga la misma app, que ya es responsiva.

App React 18

Vite · PWA · Railway

Tailwind@dnd-kitSocket.IO clientRecharts

API Express

Node · Railway

JWT + refreshSocket.IOStripeMulti-tenant

Datos y canales

MongoDB + integraciones

MongooseWhatsApp Cloud APIResendSentry

App de escritorio

Electron · Windows

NSIScontextIsolationsandboxSin código sensible

Sincronización: scopeQuery aplica Organization + soft delete en cada endpoint: un lead de una empresa nunca aparece en la consulta de otra, aunque el id se filtre.

02

El Problema

Los equipos comerciales brasileños pierden oportunidades por falta de seguimiento estructurado: los leads llegan de distintas fuentes (Google Maps, Instagram, recomendaciones, anuncios), se anotan en un cuaderno o en WhatsApp y quedan sin seguimiento. Los gerentes no tienen visibilidad del embudo en tiempo real.

03 — La Solución

CRM web + PWA + escritorio con pipeline de 9 etapas personalizable, integración con WhatsApp Cloud API para comunicación directa, campos personalizados con más de 10 tipos para adaptarse a la realidad de cada empresa, metas de ventas por vendedor e informes completos de embudo — con suscripción de Stripe en 4 planes y período de prueba de 14 días.

04

Por dentro del producto

El sistema en funcionamiento, grabado de la aplicación real con una tienda de demostración — ninguna pantalla es un mockup.

01

Pipeline

El lead recorre el embudo al arrastrar y soltar

Nueve etapas reales de ventas, del primer contacto al convertido. La tarjeta sale de una columna y entra en otra con @dnd-kit, el contador de cada etapa se ajusta, el estado se guarda al instante y Socket.IO envía el cambio a quien tenga la misma pantalla abierta.

  • Kanban, tabla y tarjetas sobre los mismos datos y filtros
  • Estado también editable desde el selector de la propia tarjeta
  • Cada columna carga 25 leads y trae el resto bajo demanda
Pipeline
02

WhatsApp

La conversación oficial ocurre dentro de la ficha del lead

Integración con la WhatsApp Cloud API de Meta: la conversación vive en una pestaña del lead, con el aviso de la ventana de 24 horas, el historial de mensajes enviados y recibidos con estado de lectura y la opción entre mensaje libre (dentro de la ventana) o plantilla aprobada (fuera de ella).

  • Ventana de atención con su vencimiento visible antes de escribir
  • Seguimiento programado desde la propia conversación
  • Opt-out por lead, respetado en envíos masivos y contacto en lote
WhatsApp
03

Informes

El embudo muestra dónde se traba el proceso

Las etapas se convierten en barras proporcionales con la conversión de una a otra. Cuando un paso cae por debajo del 30%, se marca en rojo y el sistema explica qué está pasando ahí; el mismo corte se puede leer por vendedor y por origen.

  • Período configurable, desde los últimos 7 días hasta un mes cerrado
  • Lectura por vendedor y por origen sobre los mismos números
  • Informes de leads estancados, por ciudad y serie de conversión
Informes
04

Personalización

Cada empresa crea los campos que usa, sin despliegue

Once tipos de campo (texto, número, moneda, fecha, sí/no, selección, opción múltiple, URL, correo, teléfono, texto largo). El administrador elige dónde aparece cada uno: en la tarjeta del kanban, como columna de la tabla o en los filtros de búsqueda — y el cambio vale para toda la organización al instante.

  • Key generada como slug y guardada en un Map<Mixed> en Mongoose
  • Los campos entran en la exportación e importación CSV
  • Un campo desactivado desaparece de las pantallas sin borrar el dato guardado
Personalización
05

Entrada de leads

Importar antes de guardar: revisión, duplicados y API

Se sube la hoja de cálculo, el sistema muestra cuántas filas son válidas, cuántas están duplicadas y cuántas tienen error — y solo guarda después de la confirmación. La misma ruta existe como API con clave propia, para quien prefiere enviar los leads directamente desde una automatización.

  • Sesión de importación guardada por 30 minutos entre la revisión y la confirmación
  • Detección de duplicados por teléfono, correo, Instagram y sitio web
  • Las columnas desconocidas se convierten en campos personalizados al instante
Entrada de leads
06

Equipo

Invitación con rol y proyecto, metas con progreso real

La invitación define el rol y a qué proyectos tiene acceso la persona. Las metas se miden contra el historial del lead — no contra un contador aparte —, así que el progreso de cada vendedor refleja exactamente los cambios de estado del período.

  • Roles: propietario, administrador y colaborador, cada uno con su propio alcance
  • Cuatro tipos de meta: convertidos, contactados, propuestas y reuniones
  • El colaborador ve solo los leads que están bajo su responsabilidad
Equipo
07

Interfaz

Seis paletas para la interfaz — la marca sigue en azul

Cada usuario elige la paleta del sistema (azul, morado, verde, naranja, rosa o gris) y se aplica mediante data-theme en la raíz, sobrescribiendo los tokens de Tailwind. La identidad de la marca no cambia con eso: el azul institucional se mantiene en el logo y en la comunicación.

  • Preferencia guardada por usuario, aplicada antes del primer renderizado
  • En el celular la barra lateral se convierte en un cajón y el kanban en pestañas por etapa
  • La misma app corre instalada como PWA y como app de escritorio con Electron
Interfaz

05

8 flujos en video

Cada video muestra una tarea completa, de principio a fin. Haz clic para verlo con controles.

06

Funcionalidades Principales

01

Pipeline kanban de 9 etapas

Drag-and-drop con @dnd-kit y 9 estados reales de ventas. Vistas intercambiables: kanban, tabla y tarjetas. Actualizaciones en tiempo real por Socket.IO para todo el equipo al mismo tiempo.

02

WhatsApp Cloud API

Integración nativa con WhatsApp Cloud API: envío y recepción de mensajes directamente en la línea de tiempo del lead, sin salir del CRM.

03

Campos personalizados

Más de 10 tipos de campo (texto, número, moneda, fecha, boolean, select, multiselect, URL, correo, teléfono) creados por el administrador y que se pueden mostrar en el kanban, en la tabla o en los filtros.

04

Informes y embudo de ventas

Más de 8 endpoints de informes: embudo de conversión con cuellos de botella (<30%), desempeño por vendedor, leads por origen, por ciudad, leads estancados y serie temporal de conversión.

05

Metas de ventas

Metas por vendedor con 4 tipos (convertidos, contactados, propuestas, reuniones), período configurable y progreso calculado en tiempo real contra el LeadHistory.

06

App de escritorio con Electron

Versión de escritorio instalable para Windows (.exe NSIS) con Electron.js: la misma experiencia que la app web, con notificaciones nativas y atajos de teclado. Disponible en trativa.app/download.

07

Pantallas del sistema

Capturas reales del producto, organizadas por módulo. Haz clic en cualquier pantalla para ampliarla.

Doce indicadores del embudo, del lead nuevo al convertido
Leads por estado, por origen y por responsable
Mensajes recibidos, conversiones, tareas del día y leads estancados
Kanban de 9 etapas con conteo por columna
Reunión agendada, propuesta enviada, convertido y perdido
Los mismos datos en tabla, con columnas de campos personalizados
Filtros por estado, responsable, origen, ciudad y campos propios
Búsqueda por nombre, teléfono, correo o Instagram
Ficha con datos, campos personalizados y seguimientos pendientes
Conversación de la Cloud API con ventana de 24 h y estado de lectura
Fuera de la ventana, el envío pasa a ser por plantilla aprobada
Historial de acciones: creación, asignación y cada cambio de estado

08

En el celular

El vendedor abre el CRM entre una visita y otra: en el celular la barra lateral se convierte en un cajón, el kanban en pestañas por etapa y la conversación de WhatsApp sigue dentro de la ficha. La misma app se instala como PWA.

Inicio
Menú
Leads
Kanban
Ficha del lead
WhatsApp
Embudo
Metas
Notificaciones
Nuevo lead
Inicio de sesión

09

Tecnologías

Front-end

React 18ViteTailwind CSSSocket.IO

Back-end

Node.jsExpressMongoDBMongoose

Base de datos

MongoDBMongoose

Despliegue

Railway

Integraciones

StripeWhatsApp Cloud APIResendSocket.IOElectron.jsSentry

Bibliotecas

@dnd-kit/coreRechartsReact Router 6vite-plugin-pwaFramer MotionPapaparse

10

Decisiones de Diseño

Un producto dividido en 4 repositorios con responsabilidades claras: backend (API + reglas de negocio), frontend (SPA/PWA), landing page (marketing/SEO) y escritorio (wrapper de Electron). Electron no reimplementa nada: carga la app web, que ya es responsiva. Los campos personalizados los configura un administrador y se propagan automáticamente al kanban, la tabla y los filtros, sin despliegue.

11

Desafíos Técnicos

Campos personalizados en los filtros y en la exportación CSV: el campo customFields es un Map<Mixed> en Mongoose, pero llegaba como objeto plano desde el JSON. El frontend tuvo que manejar ambos formatos (getCustomValue acepta Map y objeto). En la exportación, Papaparse recibe columnas dinámicas calculadas a partir de los campos activos de la organización: los campos inactivos no aparecen aunque el lead tenga el valor guardado.

12

Resultados

  • SaaS multi-tenant funcional con 4 planes de Stripe (R$49 a R$397) y período de prueba de 14 días
  • App de escritorio instalable para Windows con Electron + PWA para el celular: un producto, tres superficies
  • Pipeline con 9 etapas, informes de embudo, metas por vendedor y WhatsApp integrado en producción

13

Aprendizajes

  • Multi-tenancy real en MongoDB: scopeQuery aplica automáticamente Organization + soft delete en todos los endpoints, sin riesgo de fuga de datos entre empresas
  • WhatsApp Cloud API: integración directa con la API oficial de Meta para enviar y recibir mensajes en la línea de tiempo del lead
  • Campos personalizados flexibles: un CustomField por organización con key generada como slug, visualización configurable en el kanban/tabla/filtros y almacenamiento como Map<Mixed> en Mongoose
  • Importación/exportación CSV con campos personalizados: dos pasos (vista previa → confirmación) con una sesión en memoria de 30 minutos para validar antes de guardar
  • Electron como wrapper seguro: nodeIntegration false, contextIsolation true, sandbox true — JWT y autenticación gestionados por las cookies de Chromium, cero código sensible en el cliente

¿Te gustó este proyecto?

¿Tienes una idea parecida o quieres construir algo diferente? Hablemos.

WhatsAppEnviar mensaje

Otros proyectos

Ver todos
Portada — VendaíVista previa en video

SaaS

Vendaí

Sistema completo de punto de venta para pet shops, tiendas de alimento para animales, almacenes y comercios de barrio: POS con lector de código de barras, caja, inventario, fiado (venta a crédito), cuentas por pagar, PIX (el sistema de pagos instantáneos de Brasil), más de 50 informes y Recepción Segura — todo funcionando sin internet, con sincronización a la nube y una app de gestión en el celular.

Portada — EA CentralVista previa en video

Sistema web

EA Central

Tienda B2B de accesorios para celulares: catálogo con 349 productos y filtro por dispositivo (293 modelos), precio progresivo por cantidad, carrito con elección de colores, flete real y un checkout que abre WhatsApp con el pedido listo. Panel completo para el comerciante, exportación a Excel/PDF y medición con Meta Pixel + Conversions API.

Portada — PetzaraVista previa en video

SaaS

Petzara

Sistema completo de gestión para petshops: agenda con estado en tiempo real mediante Socket.io, clientes, mascotas, finanzas, colaboradores y suscripción mensual/anual con Stripe — PWA instalable en el celular o en la computadora.