Site institucional para rede de postos com mapa interativo sincronizado ao WordPress via WPGraphQL, Google Maps API e seção de vagas com candidatura e envio automatizado ao RH.
DesignAgência Ade!
↗ Ver projeto ao vivo
01
Visão Geral
A Rede de Postos Guapo é uma rede de postos de combustível com múltiplas unidades distribuídas geograficamente. O site precisava apresentar a rede de forma institucional, exibir todas as unidades em um mapa navegável e oferecer um canal direto de candidatura a vagas — com envio automatizado das informações para o RH.
O destaque técnico é o mapa interativo, alimentado pela API do Google Maps, que exibe todas as unidades da rede. Os usuários localizam os postos mais próximos e visualizam os detalhes de cada unidade diretamente pelo site. Toda a gestão das unidades — adicionar, editar, remover — é feita pelo painel do WordPress, com as alterações refletidas no mapa em tempo real, sem necessidade de alteração no código.
A seção "Trabalhe Conosco" exibe as vagas disponíveis e permite que candidatos enviem suas candidaturas diretamente pelo site. O formulário é integrado a uma API de e-mail, que encaminha os dados do candidato de forma automática para o departamento de recursos humanos da rede.
02
Desafio
O principal desafio foi sincronizar o mapa interativo com o CMS: cada unidade cadastrada no WordPress precisava aparecer automaticamente no mapa, com coordenadas, nome e detalhes corretos — e o painel administrativo tinha que permitir esse controle sem exigir conhecimento técnico do time da rede. Qualquer unidade adicionada ou removida no painel precisava refletir no mapa sem necessidade de redeploy ou alteração no front-end.
03
Solução
Modelei as unidades como post types customizados no WordPress, com campos de localização geográfica. O front-end consulta esses dados via WPGraphQL e renderiza os marcadores no mapa do Google Maps dinamicamente — qualquer alteração feita no painel é refletida no mapa sem intervenção no código.
A seção de vagas foi integrada a uma API de e-mail via formulário validado com Zod e React Hook Form, encaminhando as candidaturas automaticamente ao RH. As vagas em si são gerenciadas como post types no WordPress, permitindo que o time atualize as posições disponíveis pelo painel sem tocar no código.