VCM
Uma aplicação web baseada em funções que reúne tudo o que uma comunidade residencial precisa em uma única interface: proprietários, moradores, financeiro, reservas, solicitações e relatórios.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
Visão geral
O VCM é o front end de uma plataforma de gestão de propriedades e comunidades que atende a dois públicos bastante diferentes a partir da mesma base de código. Administradores o utilizam para gerenciar operações: propriedades, moradores, financeiro, ocorrências, relatórios e comunicação. Proprietários e moradores o utilizam para resolver suas próprias demandas, incluindo pagamentos, solicitações de serviço, reservas de áreas comuns, documentos e informações da comunidade. O produto reúne uma série de fluxos de trabalho manuais e dispersos em um único ambiente consistente.
O Problema
Administrar uma comunidade residencial envolve gerenciar muitos processos simultâneos: cadastros de moradores e proprietários, solicitações de manutenção e serviços, reservas de áreas comuns, reclamações, histórico de pagamentos, extratos, relatórios de vistoria e ocorrências, além de comunicados. Quando essas informações ficam espalhadas por planilhas, trocas de e-mails e ferramentas desconectadas, pontos importantes acabam passando despercebidos. O desafio foi criar uma interface única que atendesse tanto à equipe de operações quanto aos moradores sob seus cuidados, duas experiências genuinamente distintas, mantendo o produto rápido, consistente e fácil de manter à medida que novos fluxos de trabalho são adicionados.
Meu Papel e Abordagem
Liderei a construção do front end: a arquitetura da aplicação, a camada de dados compartilhada, os padrões de UI reutilizáveis e a estrutura baseada em funções que mantém tudo unido. Como o principal contribuidor da base de código, defini as convenções que o restante do trabalho seguiu. Minha prioridade era evitar a armadilha em que esses aplicativos geralmente caem, que é reconstruir a mesma lógica de tabela, filtro e formulário para cada nova entidade. Em vez disso, criei um pequeno conjunto de primitivos fortes e um shell orientado a permissões, para que adicionar um novo fluxo de trabalho se tornasse uma questão de composição em vez de reinvenção.
Stack Tecnológica
Principais Funcionalidades
Galeria
Desafios e Soluções
O desafio central foi a escala da área de superfície: dezenas de tipos de entidades, cada um necessitando listar, filtrar, criar, editar e exportar, por meio de duas funções de usuário. Reescrever isso por recurso teria produzido um aplicativo impossível de manter. Eu resolvi isso com primitivos reutilizáveis e um modelo de navegação configurável e orientado a permissões, de modo que a interface se adapte ao que o backend concede sem fixar menus no código ou duplicar lógica.
A outra necessidade recorrente era um estado que sobreviva ao mundo real. Conduzi a paginação e a filtragem de listas através da query string da URL, o que torna as visualizações compartilháveis, mantém o funcionamento natural de voltar e avançar do navegador e preserva o estado da tabela após recarregamentos. Centralizei a autenticação no estado compartilhado e na camada de requisições para que os componentes de recursos permaneçam leves, e adicionei um limite de erro, estados de carregamento e um redirecionamento elegante na expiração da sessão para que um dashboard denso nunca falhe silenciosamente.
Resultado
O VCM é um único front end que atende genuinamente a ambos os lados da gestão de comunidades. Equipes operacionais gerenciam todo o ciclo de vida da propriedade a partir de um workspace de administração, e moradores usam o autoatendimento para pagamentos, solicitações, reservas e documentos. Porque é construído sobre primitivos compartilhados e um shell orientado a permissões, a base de código continua escalando à medida que novos fluxos de trabalho são adicionados, em vez de se tornar mais pesada a cada um.
Tem um problema de produto semelhante?
Compartilhe o produto atual, o resultado que você precisa e as restrições que já estão no caminho. Usarei isso para definir um primeiro marco sensato.
Serviços de desenvolvimento SaaS