Plataforma completa para construtora com API dedicada em Node.js/Fastify, painel do cliente com progresso de obras, sistema de magic link implementado do zero e filtros dinâmicos via searchParams.
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 foi construída com Next.js, React e TypeScript no front-end, com uma API dedicada em Node.js e Fastify no back-end. O banco de dados é PostgreSQL via Supabase, com Prisma como ORM. Arquivos e documentos ficam em um bucket do Supabase. O painel usa shadcn/ui, formulários validados com Zod e React Hook Form.
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
Deployei a API em Node.js/Fastify na Vercel, com variáveis de ambiente separadas por contexto e integração direta com o Supabase Storage para uploads. O Prisma centralizou o acesso ao banco e facilitou a modelagem dos relacionamentos entre empreendimentos, clientes, boletos e visitas.
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 foi construído com token UUID gerado por requisição, armazenado no banco com timestamp de expiração e invalidado após uso. Os filtros dinâmicos foram implementados via searchParams no Next.js, com leitura e atualização dos parâmetros sem perda de estado ao navegar — tanto na área pública quanto no painel administrativo.