--- title: "Who edits it after I leave, and which map loads in China" description: "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." url: https://riteshkc.com.np/case-studies/marti-china source: https://riteshkc.com.np/case-studies/marti-china.md updated: 2026-07-01 site: "Ritesh KC" --- # Who edits it after I leave, and which map loads in China 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. - Project: [Marti China](https://riteshkc.com.np/work/marti-china) - Year: 2026 - Role: Full-stack developer - Stack: Next.js, React, TypeScript, Tailwind CSS, Strapi, Baidu Maps - Published: 2026-07-01 Marti China is the Chinese arm of Marti Technik AG, part of a Swiss construction group that has been family-owned since 1922. It makes conveyor systems and steel components for tunnelling contractors — idlers, frames, conveyor modules, fabricated steel — out of a works in Zhongshan, Guangdong. The site had to do four jobs: say what the company sells, say what it does, show where its parts are already running, and take a technical enquiry. The design arrived finished. Two months, one developer, frontend and CMS. > Screenshot (home hero): Marti China home page over a photograph of an engineering meeting, with the headline Swiss Engineering Excellence and an Explore Services button. ## Why Strapi, and what it had to beat The first requirement was not a feature. It was that nobody should have to call me to add a product, correct a specification, or fix a typo. That decides the stack before anything else does. Four things had to be true at the same time. Staff in Zhongshan edit everything themselves. Every field exists twice, once in English and once in Chinese. The catalogue is relational — a product belongs to a category, a project carries a country and a coordinate — so it needs content types rather than a page builder. And all of it has to be reachable from inside mainland China. That last condition removes the hosted options. Contentful and Sanity would model this content well. Their APIs and their image CDNs sit outside the country, and I cannot promise a buyer in Shenzhen that they answer. If they do not, the page renders with holes in it. Markdown files in the repository fail the first condition instead: a corrected typo becomes a pull request and a deploy, which is the thing the client was paying to avoid. WordPress could carry the content, but the frontend is Next.js, so WordPress would be a second rendering stack kept alive for its admin screen, with the second language bolted on by plugin. Strapi is self-hosted, so it runs on the client's own machine — the API sits behind nginx on its own subdomain, next to the site it feeds. Its localisation is a core, per-field feature rather than a plugin. And its admin is a plain form, which is what you hand to someone who is never going to read the documentation. ## Forty-nine product pages that nobody wrote Five categories: idler rollers, idler frames and stations, conveyor modules, general steel fabrication, custom engineered equipment. Forty-nine products under them. Nobody hand-builds forty-nine pages. There is one content type and one template: an image set, a category label, the description, and related products pulled from the same category. The catalogue page stacks all five categories with a sticky rail down the left and an anchor per category, so a link can point at conveyor modules and land on conveyor modules. Each category header carries a datasheet download, because the person reading wants a PDF to forward to procurement. > Screenshot (product catalogue): Products page: a sticky rail of five categories on the left, the idler rollers grid on the right, and a download all datasheet button. — Five categories, forty-nine products, one template. The rail is an anchor per category. When the client adds the fiftieth product, the page is already written. > Screenshot (product page): Carrying idlers product page: a numbered image column on the left, the category label, name and description on the right. — The forty-ninth product page and the first one are the same file. ## The map has to be Baidu The projects page is the sales argument. Marti components have run in seventeen tunnelling projects across twelve countries — Gotthard, Brenner, the Follo Line, Grand Paris Express, Changi Terminal 5, Coca Codo Sinclair. Read as a list that is a wall of names. On a map it is a claim about reach. Google Maps is not a dependable choice for a page whose primary reader is inside mainland China. So the map is Baidu's BMapGL. A panel of references floats over it; picking one pans the map and highlights the row, so the list and the map are a single selection rather than two widgets that happen to share a page. > Screenshot (project map): Projects page: a Baidu map of Europe with Chinese labels, a floating panel listing tunnelling references by country and year. — Baidu, not Google. The primary reader is inside mainland China. Baidu brings two costs worth naming. Its tiles are labelled in Chinese, which is right for the primary reader and a curiosity for the European one. And it uses its own coordinate system, so a latitude and longitude copied out of Google sits a few hundred metres from the pin you meant. Coordinates are content here — they go into Strapi with the project — so they have to be correct at the point of entry, not corrected in the browser. > Screenshot (project selected): The same map after picking the Follo Line reference: the map has panned to Norway and the list row is highlighted. — Picking a reference pans the map. The list and the map are one selection. The contact page runs the same map with one pin on the Zhongshan works. ## Two languages, and the toggle says EN and SC Chinese is not a translation layer over an English site. In Strapi it is a second value on every localised field, so the whole site exists twice and the routes are live under both languages today. The Chinese entries are the client's to write. That is the shape of the work: I built the surface for both languages, they own the words that go in it. > Screenshot (language toggle): The header's language control open, showing EN selected and SC beside it. — English and simplified Chinese, per field in the CMS rather than per site. ## One stylesheet, no component library The design was finished before I started, so the CSS job was to name it rather than invent it: a type scale, a fixed palette — charcoal, cloud white, a hairline grey, Marti blue — and Tailwind utilities generated from those names. No component kit. A library would have meant overriding somebody else's defaults on every screen to arrive at a design that had already been decided. > Screenshot (quality inspection): Quality inspection section: four numbered cards over a photograph of two inspectors, covering receipt checks, in-process controls, verification and the report. ## The pages that are not in the brief A brief lists the home page and the product pages. The rest is what makes it a site somebody can work in. A 404 that offers the way back. Privacy and terms. A footer that repeats the whole catalogue, because that is where a reader who has scrolled to the bottom is looking. One work with us band at the foot of every route, so the enquiry is never more than a scroll away. > Screenshot (not found): The site's 404 page: the numerals 404, the line Page Not Found, and a Back to Home Page button. The floating contact widget is a WeChat QR code rather than a chat bubble from a Western SaaS, for the same reason the map is Baidu. ## Where it ended up Nine page templates, a 404, privacy and terms. Forty-nine product pages, four service pages, seventeen project references, two languages, and a contact form that asks for belt width and incline angle instead of a message box. > Screenshot (inquiry form): Contact page: email and phone on the left, a technical inquiry form on the right asking for name, company, email, project location, type and specification. — Six fields. The last one asks for capacity, belt width, incline and operating conditions. Adding a product, a project reference or a service is a form submission now, not a deploy. Everything above is what that one requirement cost.