Institutional website for a lumber company featuring a segment-structured product catalog, custom relationships between products and categories in WordPress, and autonomous content management.
DesignAgência Ade!
↗ View live project
01
Overview
Ecoplac is a lumber company with over two decades of experience in plywood and laminates. The website needed to present the company and its product catalog in a structured way, organizing lines by category and linking each product to the segments it serves — all with centralized content management so the team could update it without depending on front-end code changes.
The project was built with Next.js, React, and TypeScript, styled with Tailwind CSS, with WordPress as a CMS. Custom routes in PHP expose the relationships between products and segments, consumed by the front-end via REST API. Forms validated with Zod and React Hook Form. Hosted on Vercel.
02
Challenge
The project's data model had a complexity that WordPress doesn't solve natively: a segment groups multiple products and wood types; each wood type can relate to other related types; and a product can belong to several segments simultaneously. Representing these relationships between products, categories, and segments required creating custom structures in the CMS — without that, the catalog would be just a flat list with no contextual navigation.
Keeping the admin panel readable for the client's team as the relationship structure grew was the second challenge: the technical complexity on the back end couldn't leak into the editing interface.
03
Solution
I created custom post types in WordPress for products, segments, and wood categories, with relationship fields that allow linking entities to each other directly from the panel. Custom PHP routes expose these links in a format the front-end can consume.
Next.js consumes this structured data and renders the catalog and detail pages dynamically. The Ecoplac team manages products and relationships through the WordPress panel without touching code — and public pages reflect those changes automatically.