Marti China
Zweisprachige Unternehmensseite mit 49 Produktseiten auf Next.js und Strapi
Unternehmensseite für die China-Tochter eines Schweizer Tunnelbau-Zulieferers. Next.js vorne, selbst gehostetes Strapi dahinter: 49 Produktseiten, 17 Referenzprojekte, zwei Sprachen.

- problem
- Marti China brauchte eine Seite, die das eigene Team in Zhongshan pflegen kann — Produktkatalog, Referenzprojekte und Leistungsseiten, auf Englisch und Chinesisch, ohne Entwickler.
- meine rolle
- Full-Stack-Entwickler
- ergebnis
- Eine Next.js-Seite über selbst gehostetem Strapi. Das Team legt ein Produkt, ein Projekt oder eine Leistung an, und die Seite existiert. Die Projektkarte läuft auf Baidu und lädt in Festlandchina.
- stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Strapi
- Baidu Maps
Marti China fertigt die Bauteile, die Ausbruchmaterial aus einem Tunnel heraustransportieren. Der Leser ist ein Bauleiter oder ein Einkäufer, meist mitten im Projekt, meist auf der Suche nach einer Spezifikation und einer Referenz, bevor er jemanden anschreibt. Für diesen Leser ist die Seite gebaut: was die Bauteile sind, was das Unternehmen darum herum leistet, wo die Teile bereits laufen, und ein Formular, das nach Gurtbreite fragt statt nach einer Nachricht.
Neun Seiten-Templates decken das ab — Startseite, Über uns, Qualität und Nachhaltigkeit, Leistungen und je eine Seite pro Leistung, Projekte, Katalog und je eine Seite pro Produkt, Kontakt. Jedes Wort auf jeder davon ist ein Feld in Strapi, in zwei Sprachen, damit das Team in Zhongshan das fünfzigste Produkt ohne mich anlegt.

Sechsundachtzig veröffentlichte Einträge stehen hinter der Seite, und die vier zuletzt bearbeiteten sind eine Seite und drei Produkte. Das ist der ganze Test dieses Baus: Die jüngste Aktivität ist die des Kunden, nicht meine.

Vier Leistungen, vier Seiten, ein Template. Jede trägt ihren eigenen Ablauf, ihre eigenen Ergebnisse und den Teil des Geschäfts, in dem sie sitzt — und genau das verhindert, dass vier Seiten aus einer Datei wie vier Kopien derselben Seite wirken.

Das hält bis zur Handybreite, wo die Kategorieleiste über eine einspaltige Liste klappt und die Projektkarte ihr Listen-Panel behält, statt es zu verlieren.
Warum Strapi und kein gehostetes CMS, warum die Karte auf Baidu läuft und wie zwei Sprachen auf einem Content-Modell sitzen, steht in der Case Study.
Zwei Monate an Unternehmensseite und Produktkatalog für die China-Tochter eines Schweizer Tunnelbau-Zulieferers. Entschieden haben das CMS, das Katalog-Template und der Kartenanbieter.
screens
20 screens — click to enlarge