Clientes da M3H acompanham o andamento da própria obra — porcentagem de conclusão, boletos, visitas e documentos — sem precisar ligar para a construtora. Toda a gestão fica em um painel administrativo central.
DesignAgência Ade!
Ver projeto ao vivo
01
Visão Geral
A M3H Construtora é uma empresa de construção civil que precisava de uma plataforma centralizada para acompanhamento de obras — tanto para clientes quanto para administradores. O site público apresenta cada empreendimento com informações de progresso; a área do cliente exibe porcentagem de conclusão, boletos pendentes, observações e documentos; o painel administrativo permite criar empreendimentos, emitir boletos, agendar visitas e vinculá-los a clientes específicos.
A plataforma elimina a necessidade de o cliente ligar para a construtora: toda atualização de progresso, documento ou boleto é gerenciada pelo painel administrativo e reflete imediatamente na área do cliente.
02
Desafio
Construir e deployar uma API dedicada do zero — separada do front-end — foi o primeiro ponto fora da curva. Exigiu aprender sobre deploy de APIs Node.js na Vercel, configuração de ambientes de produção e staging, e integração com o bucket do Supabase para armazenamento de imagens, boletos e documentos de clientes e empreendimentos.
Os formulários de criação de empreendimentos e clientes eram complexos: múltiplos campos relacionados, uploads de arquivo e validação cruzada entre front-end e back-end usando os mesmos schemas Zod nos dois lados. Manter a consistência das regras em ambas as camadas sem duplicação foi um ponto de atenção constante.
O sistema de recuperação de senha por magic link foi implementado do zero, sem biblioteca de terceiros: geração de token UUID por requisição, armazenamento no banco com expiração de uma hora, envio por e-mail e validação no acesso. Qualquer falha nessa cadeia — token reutilizado, expirado, ou de usuário inválido — precisava ser detectada e rejeitada antes de liberar o acesso.
Tanto a área pública quanto o painel administrativo contavam com filtros dinâmicos para listagem de empreendimentos, clientes, boletos e visitas. Toda a lógica de busca e paginação foi estruturada via searchParams, mantendo o estado dos filtros na URL e permitindo compartilhamento direto de listagens filtradas.
03
Solução
O painel centraliza empreendimentos, clientes, boletos e visitas em uma estrutura clara — sem ambiguidade sobre o estado de cada obra ou documento. A API dedicada em Node.js/Fastify mantém o front-end e o back-end desacoplados, com integração direta ao Supabase Storage para uploads de arquivos e documentos.
Usar os mesmos schemas Zod no front-end e no back-end eliminou a necessidade de manter duas camadas de validação independentes — qualquer alteração na regra propagava automaticamente para os dois lados. O React Hook Form gerenciou o estado dos formulários complexos sem rerenders desnecessários, incluindo os campos de upload.
O sistema de magic link garante que cada acesso seja único e temporário — o token expira após uso e nenhuma senha permanente fica armazenada. Os filtros dinâmicos mantêm o estado da busca na URL, permitindo que listagens filtradas sejam compartilhadas diretamente — tanto na área pública quanto no painel administrativo.