CloudChat - Livechat Dashboard

2026 Plataforma SaaS
React Node.js Socket.IO Redis PostgreSQL
Código Fechado Ler Estudo de Caso
Voltar para o Portfólio

O Problema

Muitas plataformas de atendimento ao cliente (como chatbots de WhatsApp) focam inteiramente na automação por bots e carecem de uma interface intuitiva para o transbordo humano.

O desafio do CloudChat era evoluir um simples dashboard de estatísticas para uma plataforma completa de Livechat em tempo real. Era necessário permitir que atendentes reais pudessem assumir conversas de bots instantaneamente, visualizando o histórico e conversando com o cliente pelo WhatsApp de forma fluida.

Além disso, o painel original precisava ser modernizado para lidar com milhares de requisições concorrentes, entregando mensagens sem delay de rede (Real-time bidirecional).

Dashboard Principal do CloudChat Tela de Atendimento Livechat Gerenciamento de Contatos Configurações e Integrações

A Solução

A solução envolveu uma migração arquitetural completa para a separação do Front-end (React) e Back-end (Node.js).

Implementei o Socket.IO para garantir um canal de comunicação via WebSocket ativo e persistente, permitindo o recebimento instantâneo das mensagens provenientes das APIs oficiais do WhatsApp direto na tela do agente.

Para o armazenamento inteligente de informações e alta disponibilidade, utilizei uma abordagem híbrida de banco de dados:

  • Redis (Em Memória): Utilizado como cache principal para armazenar conversas ativas e sessões, diminuindo o tempo de resposta das consultas do frontend.
  • PostgreSQL (Prisma ORM): Banco relacional principal para persistência histórica (mensagens antigas, leads, agendamentos).

Arquitetura e Desafios Técnicos

Modernizar um sistema para uma plataforma real-time de alto tráfego trouxe desafios técnicos significativos.

Principais decisões técnicas:

  • Migração do layout antigo mantendo a paleta de cores original (verde e roxo) com estética moderna (Glassmorphism).
  • Adoção do Docker para orquestrar serviços do Redis e PostgreSQL localmente de forma isolada.
  • Uso do Prisma ORM para facilitar as consultas e garantir o Data Integrity no PostgreSQL.

Desafios enfrentados:

1. Conexões Concorrentes no Redis Foi identificado o erro ECONNREFUSED ao tentar acessar o Redis nas primeiras implementações devido a configurações do Docker Virtualization.
→ Solução: Correção das flags de hardware virtualization na BIOS e habilitação do WSL2.
2. Ordenação de Threads (Chat List) Era necessário que a conversa mais recente na tela de livechat sempre saltasse para o topo automaticamente, sem recarregar a página.
→ Solução: Implementei a propriedade dinâmica "lastTime" monitorada via WebSockets no React para reordenar o componente dinamicamente.

Resultados e Conclusão

A evolução para o novo CloudChat entregou uma plataforma robusta capaz de lidar com picos de atendimento.

  • Latência quase zero via WebSockets
  • Alta Disponibilidade (Redis)
  • UX Moderna e Fluida

Principais aprendizados:

  • Orquestração de Containers com Docker e ecossistema WSL2.
  • Gerenciamento avançado de cache em memória (Redis) integrado com bancos relacionais (PostgreSQL).
  • Comunicação bidirecional e assíncrona usando WebSockets para chat real-time.