# Pedra Brilhante

> Vue.js/Nuxt SPA for a grain trading company, integrating real data via WordPress as an API. My first project where I owned the integration, not just the frontend.

Pedra Brilhante Cereais is a grain trading company — buying from farmers and cooperatives, running its own transport fleet, shipping and selling to the domestic market or for export. Unlike the other institutional projects I built at K13, this was the first one where I didn't just stay on the visual frontend — I also owned the integration, consuming WordPress as an API inside a Vue.js/Nuxt SPA.

## The integration became frontend work

The backend team could turn a site's WordPress into an API in under half an hour. That shifted the division of labor: the time that used to belong to backend for integration fell onto frontend, which was already building the site. I started doing both.

It was more fun and more challenging than I expected — the data was real, changing constantly through the WordPress admin, very different from working with fixed mocks like on earlier projects. But it also exposed a real gap in what I knew at the time: I didn't know anything about technical SEO, Google Search Console, performance, Lighthouse, Schema.org, sitemaps. I built what I knew — an SPA — and integrated it. Visually it turned out great; performance, I know now, was terrible. If this project had the SEO and performance modules ao.dev has, it would be a completely different story.

It wasn't the first site I built in Vue/Nuxt consuming WordPress as an API — but it was one of the early ones, and the first where the integration was my responsibility, not just the visuals.

<table>
<thead>
  <tr>
    <th>
      Layer
    </th>
    
    <th>
      Technology
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Framework
    </td>
    
    <td>
      <a href="https://vuejs.org/guide/introduction.html" rel="nofollow" target="_blank">
        Vue.js
      </a>
      
       + <a href="https://nuxt.com/docs" rel="nofollow" target="_blank">
        Nuxt.js
      </a>
      
       (SPA mode, no SSR)
    </td>
  </tr>
  
  <tr>
    <td>
      CSS framework
    </td>
    
    <td>
      <a href="https://getbootstrap.com/docs/" rel="nofollow" target="_blank">
        Bootstrap
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      JavaScript
    </td>
    
    <td>
      <a href="https://swiperjs.com/get-started" rel="nofollow" target="_blank">
        Swiper.js
      </a>
      
      , <a href="https://github.com/zloirock/core-js" rel="nofollow" target="_blank">
        core-js
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Analytics
    </td>
    
    <td>
      <a href="https://developers.google.com/analytics" rel="nofollow" target="_blank">
        Google Analytics
      </a>
      
      , <a href="https://developers.google.com/tag-platform/tag-manager" rel="nofollow" target="_blank">
        Google Tag Manager
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Data
    </td>
    
    <td>
      <a href="https://developer.wordpress.org/rest-api/" rel="nofollow" target="_blank">
        WordPress REST API
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Maps
    </td>
    
    <td>
      <a href="https://developers.google.com/maps" rel="nofollow" target="_blank">
        Google Maps
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Anti-spam
    </td>
    
    <td>
      <a href="https://developers.google.com/recaptcha/intro" rel="nofollow" target="_blank">
        reCAPTCHA
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Icons
    </td>
    
    <td>
      <a href="https://docs.fontawesome.com/" rel="nofollow" target="_blank">
        Font Awesome
      </a>
    </td>
  </tr>
</tbody>
</table>

## Home

<figure className="rehype-figure">

![Pedra Brilhante home page with an operations photo carousel and the trading flow](/images/pages/projects/pedra-brilhante/pedra-brilhante-home.png)<figcaption>

Pedra Brilhante home page with an operations photo carousel and the trading flow

</figcaption>
</figure>

A hero carousel with real photos of the operation — silos, the truck fleet, harvest, a farmer in the field. Right below, an institutional summary and the business flow visualized in five icons: farmers/cooperatives → transport → grain shipment → domestic market or export → delivery. It closes with a carousel of clients the company has worked with — JBS, BRF, Olfar, BSBIOS, among other big names in Brazilian agribusiness.

## About

<figure className="rehype-figure">

![About page with mission, vision, values, and the company's facilities](/images/pages/projects/pedra-brilhante/pedra-brilhante-sobre.png)<figcaption>

About page with mission, vision, values, and the company's facilities

</figcaption>
</figure>

Mission, vision, and five values (determination, discipline, availability, quality, ethics), followed by a photo gallery of the real facility — warehouses, silos, the truck yard.

## Services

<figure className="rehype-figure">

![Services page with the grain trading flow](/images/pages/projects/pedra-brilhante/pedra-brilhante-servicos.png)<figcaption>

Services page with the grain trading flow

</figcaption>
</figure>

A lean page focused on a single service: grain trading, with the same five-step flow from the home page and a direct WhatsApp quote CTA.

## Blog

<figure className="rehype-figure">

![Blog listing with real posts about the agricultural market](/images/pages/projects/pedra-brilhante/pedra-brilhante-blog.png)<figcaption>

Blog listing with real posts about the agricultural market

</figcaption>
</figure>

A paginated grid of posts — and this blog is living proof the API integration worked: it keeps getting new content years after I left the project, without me touching a single line of code. Commodity prices, crop disease prevention, international trade missions — content the marketing team publishes straight to WordPress, with zero dependency on me.

## Contact

<figure className="rehype-figure">

![Contact page with form, WhatsApp, and map](/images/pages/projects/pedra-brilhante/pedra-brilhante-contato.png)<figcaption>

Contact page with form, WhatsApp, and map

</figcaption>
</figure>

A simple form (name, email, phone, message), a WhatsApp button, and a map — Google Maps and Waze side by side this time, unlike Planta Sul, which only had Waze.