SupportDesk

O SupportDesk é uma plataforma fullstack para gerenciamento de chamados de suporte.

O projeto foi desenvolvido para explorar principalmente controle de acesso por perfil, arquitetura de API REST, máquina de estados, cache de dados no frontend, testes de integração e infraestrutura containerizada.

A aplicação possui dois perfis principais: clientes, responsáveis por abrir chamados, e agentes, responsáveis pelo atendimento e resolução.

O fluxo da aplicação gira em torno do ciclo de vida dos tickets.

Cliente

O cliente pode criar chamados, acompanhar seus tickets, adicionar comentários e cancelar seus próprios chamados quando permitido.

Agente

O agente pode visualizar tickets, assumir chamados, liberar a atribuição, responder e encerrá-los de acordo com as regras de negócio.

Ciclo de vida

Aberto
  │
  ▼
Em atendimento
  │
  ▼
Fechado

Aberto ─────────► Cancelado

As transições são controladas pelo backend de acordo com o perfil do usuário e o estado atual do ticket.

O projeto reúne frontend, backend, banco de dados e proxy reverso em uma infraestrutura baseada em Docker Compose.

Backend

O backend utiliza uma arquitetura em camadas:

Routes
   ↓
Controllers
   ↓
Services
   ↓
Models
   ↓
MongoDB

A API utiliza:

• Node.js;
• Express;
• TypeScript;
• Zod;
• JWT;
• Mongoose;
• tratamento global de erros;
• Jest e Supertest.

Frontend

O frontend utiliza React e Vite.

O estado remoto é gerenciado através do TanStack React Query, enquanto o React Router organiza as rotas públicas e protegidas.

Infraestrutura

Os serviços são executados através do Docker Compose:

• frontend;
• backend;
• MongoDB;
• NGINX.

O NGINX funciona como reverse proxy, encaminhando as requisições para os serviços correspondentes.

• Autenticação com JWT.
• RBAC para separar permissões entre clientes e agentes.
• Criação e gerenciamento de tickets.
• Atribuição de tickets para agentes.
• Comentários dentro dos chamados.
• Controle de transições de estado.
• Validação de requisições com Zod.
• Cache e sincronização de dados remotos com TanStack React Query.
• Testes de integração com Jest e Supertest.
• Infraestrutura containerizada com Docker Compose.
• Reverse proxy utilizando NGINX.

Máquina de estados para tickets

O ciclo de vida dos chamados possui regras próprias para cada transição. Centralizar essas regras evita que a aplicação aceite combinações inválidas de estados.

RBAC

As permissões são determinadas pelo papel do usuário. Isso evita depender apenas da interface para esconder operações que não deveriam estar disponíveis para determinado perfil.

TanStack React Query

O projeto utiliza o React Query para lidar com estado remoto, cache e sincronização das informações vindas da API.

NGINX como reverse proxy

O NGINX centraliza a entrada das requisições e encaminha o tráfego para frontend e backend dentro da infraestrutura Docker.

Supertest

Os testes de integração verificam o comportamento da API de forma próxima ao fluxo real de utilização, incluindo autenticação e ciclo completo dos tickets.

Capturas de tela da interface do SupportDesk.

O SupportDesk foi importante principalmente para aprofundar conceitos que vão além da implementação de endpoints.

Entre os principais aprendizados estão:

• aplicação prática de cache e sincronização de estado remoto;
• utilização de reverse proxy com NGINX;
• modelagem de regras através de uma máquina de estados;
• separação de responsabilidades em uma API em camadas;
• testes de integração com Supertest;
• aplicação de autorização tanto na API quanto na interface;
• execução de uma aplicação fullstack através de Docker Compose.