Institutional website for a gas station network with an interactive map synced to WordPress via WPGraphQL, Google Maps API, and a careers section with automated HR submission.
DesignAgência Ade!
↗ View live project
01
Overview
Posto Guapo is a fuel station network with multiple locations spread across a region. The website needed to present the network institutionally, display all units on a navigable map, and offer a direct job application channel — with automated forwarding of candidate information to HR.
The technical highlight is an interactive map powered by the Google Maps API, displaying all network units. Users locate the nearest stations and view each unit's details directly on the site. All unit management — adding, editing, removing — is done through the WordPress panel, with changes reflected on the map in real time, without any code changes required.
The "Work With Us" section displays available job openings and allows candidates to submit their applications directly through the site. The form is integrated with an email API that automatically forwards candidate data to the network's HR department.
02
Challenge
The main challenge was synchronizing the interactive map with the CMS: each unit registered in WordPress needed to appear automatically on the map with correct coordinates, name, and details — and the admin panel had to enable that control without requiring technical knowledge from the network's team. Any unit added or removed in the panel needed to reflect on the map without a redeploy or front-end code change.
03
Solution
I modeled the units as custom post types in WordPress with geographic location fields. The front-end queries that data via WPGraphQL and renders the markers on the Google Maps map dynamically — any change in the panel is immediately reflected on the map without code intervention.
The careers section was integrated with an email API via a form validated with Zod and React Hook Form, automatically forwarding applications to HR. Job openings are managed as post types in WordPress, letting the team update available positions through the panel without touching code.