Marti China
Bilingual corporate site and 49-page product catalogue on Next.js and Strapi
A corporate site for the China arm of a Swiss tunnelling supplier. Next.js on the front, self-hosted Strapi behind it: 49 product pages, 17 project references, two languages.
- problem
- Marti China needed a site its own staff in Zhongshan could keep current — a product catalogue, project references and service pages, in English and Chinese, with no developer in the loop.
- my role
- Full-stack developer
- outcome
- A Next.js site over self-hosted Strapi. Staff add a product, a project or a service and the page exists. The project map runs on Baidu, so it loads inside mainland China.
- stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Strapi
- Baidu Maps
Marti China makes the components that move excavated rock out of a tunnel. The reader is a contractor's engineer or a procurement lead, usually mid-project, usually after a specification and a reference before they email anyone. The site is built for that reader: what the parts are, what the company does around them, where the parts already run, and a form that asks for belt width rather than for a message.
Nine page templates cover it — home, about, quality and sustainability, services and a page per service, projects, the catalogue and a page per product, contact. Every word on every one of them is a field in Strapi, in two languages, so the team in Zhongshan adds the fiftieth product without me.
Eighty-six published entries behind the site, and the last four edited are a page and three products. That is the whole test of this build: the recent activity is the client's, not mine.
Four services, four pages, one template. Each carries its own process, its own deliverables and the part of the business it sits in, which is what keeps four pages built from one file from reading as four copies of a page.
It holds down to phone width, where the category rail collapses above a single column and the project map keeps its list panel rather than losing it.
Why Strapi rather than a hosted CMS, why the map is Baidu, and how two languages sit on one content model are in the case study.
Two months on a corporate site and product catalogue for the China arm of a Swiss tunnelling supplier. The decisions that mattered were the CMS, the catalogue template and the map provider.
screens
20 screens — click to enlarge