Site institucional para madeireira com catálogo estruturado por segmentos, relacionamentos customizados entre produtos e categorias no WordPress e gestão autônoma de conteúdo.
DesignAgência Ade!
↗ Ver projeto ao vivo
01
Visão Geral
A Ecoplac é uma madeireira com mais de duas décadas de atuação nos segmentos de compensados e laminados. O site precisava apresentar a empresa e seu catálogo de produtos de forma estruturada, separando as linhas por categoria e relacionando cada produto aos segmentos em que é aplicado — tudo com gestão de conteúdo centralizada para que a equipe atualizasse sem depender do front-end.
O projeto foi construído com Next.js, React e TypeScript, estilizado com Tailwind CSS, com WordPress como CMS. Rotas personalizadas em PHP expõem os relacionamentos entre produtos e segmentos, consumidos pelo front-end via API REST. Formulários validados com Zod e React Hook Form. Hospedagem na Vercel.
02
Desafio
O modelo de dados do projeto tinha uma complexidade que o WordPress não resolve nativamente: um segmento agrupa múltiplos produtos e tipos de madeira; cada tipo de madeira pode se relacionar com outros tipos afins; e um produto pode pertencer a vários segmentos simultaneamente. Representar esses relacionamentos entre produtos, categorias e segmentos exigiu criar estruturas customizadas no CMS — sem isso, o catálogo seria apenas uma lista plana sem navegação por contexto.
Manter o painel administrativo legível para a equipe da cliente enquanto a estrutura de relacionamentos crescia era o segundo ponto: a complexidade técnica no back-end não podia vazar para a interface de edição.
03
Solução
Criei post types customizados no WordPress para produtos, segmentos e categorias de madeira, com campos de relacionamento que permitem vincular entidades entre si diretamente pelo painel. Rotas personalizadas em PHP expõem esses vínculos em formato consumível pelo front-end.
O Next.js consome esses dados estruturados e renderiza o catálogo e as páginas de detalhe dinamicamente. A equipe da Ecoplac gerencia produtos e relações pelo painel do WordPress sem tocar no código — e as páginas públicas refletem essas alterações automaticamente.