Projekt-Details

Kiremitci Metal / KRM Steel — Mehrsprachiger industrieller B2B-Katalog

Ein mehrsprachiger B2B-Katalog, der Konstruktionsschalungssysteme über zwei Domänen und fünf Sprachen mit Produktvarianten und integrierten Angebotsabläufen präsentiert.

Kunde

Kiremitci Metal

Start

01 Aug 2026

Abgeschlossen

Kiremitci Metal / KRM Steel — Mehrsprachiger industrieller B2B-Katalog – Benutzeroberfläche und Projektansicht
Beschreibung

Ein mehrsprachiger B2B-Katalog, der Konstruktionsschalungssysteme über zwei Domänen und fünf Sprachen mit Produktvarianten und integrierten Angebotsabläufen präsentiert.

Fallstudie

Herausforderung

Kiremitci Metal verkauft in der Türkei unter eigenem Namen und im Ausland als KRM Steel. Zwei getrennte Websites hätten den Pflegeaufwand verdoppelt, eine einzige Website dagegen die Marken vermischt und doppelte Inhalte in Suchmaschinen erzeugt. Zudem mussten Maßoptionen und Sonderanfertigungen der technischen Produkte klar dargestellt und mit einer Angebotsanfrage verknüpft werden.

Vorgehen

Auf einer gemeinsamen Basis aus Next.js, Fastify und MySQL wurde eine domainabhängige Sprach- und Markenlogik umgesetzt: kiremitcimetal.com bietet Türkisch und Englisch, krmsteel.com Englisch, Deutsch, Russisch und Arabisch. Produkte wurden als sprachneutraler Stammdatensatz mit Übersetzungen je Sprache modelliert, Maße als Varianten gespeichert und das Angebotsformular so angebunden, dass es mit der gewählten Variante öffnet.

Ergebnis

Beide Marken sind in fünf Sprachen live – mit einem Katalog, einem Anfrageeingang und einem Admin-Panel. Canonical- und hreflang-Angaben verknüpfen jede Sprache mit der richtigen Domain, und Angebotsanfragen werden im Panel mit Status, Verantwortlichen und Notizverlauf nachverfolgt.

Tools

Next.js, React, TypeScript, Fastify, Bun, Drizzle ORM, MySQL

Hauptfunktionen
  • Zwei Domains: kiremitcimetal.com (TR/EN), krmsteel.com (EN/DE/RU/AR)

  • Marke, Logo und Kontakt-E-Mail je nach Domain

  • 4 Produktgruppen, 17 Maßvarianten, lokalisierte Datenblätter

  • B2B-Angebotsformular mit vorausgewähltem Produkt und Variante

  • Anfragestatus, Zuweisung, interne Notizen und Verlauf

  • Rechts-nach-links-Layout (RTL) für Arabisch

  • Domainübergreifende Canonicals, hreflang und Sitemaps

  • PDF-Katalog (A4) zum Download auf TR, EN und DE

  • Formular mit Honeypot, Rate-Limit und gehashten IPs

Verwendete Technologien
  • Next.js

  • React

  • TypeScript

  • Fastify

  • Bun

  • Drizzle ORM

  • MySQL

Design-Highlights
  • Der Sprachumschalter zeigt nur die Sprachen der aktuellen Domain; nicht angebotene Sprachen leiten per 308 auf die richtige Domain um

  • Markennamen stehen nicht fest im Inhalt, sondern werden serverseitig über einen Platzhalter aufgelöst – derselbe englische Inhalt ist unter beiden Marken korrekt

  • Fehlende Übersetzungen werden nie aus einer anderen Sprache ergänzt; stattdessen erscheint ein leerer Zustand

  • Galerie, Datenblatt, Variantenauswahl und Angebotsbutton bilden auf der Produktseite einen durchgehenden Ablauf

  • Ein hostbezogener HTML-Cache hält die Seiten beider Marken strikt getrennt

Details

Kiremitci Metal ist ein Hersteller von Schalungszubehör für den Bau mit Sitz in Osmaniye, Türkei. Das Sortiment ist überschaubar, aber technisch: Teleskopstützen, Stahlschalungstafeln, Stützenverbindungselemente und Spannstäbe. Die Kunden sind Bauunternehmen, Schalungsfirmen und Importeure im Ausland – verkauft wird also nicht über einen Warenkorb, sondern über Maße, Mengen und Lieferbedingungen. Dieses Projekt ist eine B2B-Katalog- und Angebotsplattform, die die Inlandsmarke Kiremitci Metal und die internationale Marke KRM Steel aus einer Codebasis, einer Datenbank und einem Admin-Panel heraus auf zwei Domains und in fünf Sprachen veröffentlicht.

Ausgangslage und Anforderungen

Das Unternehmen spricht zwei unterschiedliche Zielgruppen an. Käufer in der Türkei suchen auf Türkisch und kennen den Namen „Kiremitci Metal“; Käufer in Europa, Russland und dem Nahen Osten lesen Englisch, Deutsch, Russisch oder Arabisch und sollen der Marke „KRM Steel“ begegnen. Zwei getrennte Websites hätten die Inhalte aufgeteilt und den Pflegeaufwand verdoppelt. Eine einzige Website hätte dagegen die Marken vermischt und in Suchmaschinen doppelte Inhalte erzeugt.

Auch auf der Produktseite war die Anforderung eindeutig: Für jede Produktgruppe sollten Maßoptionen, Material und Oberfläche, Fotos sowie eine klare Antwort auf die Frage „Ist eine Fertigung nach Sondermaß möglich?“ sichtbar sein – und Besucher sollten für genau die gewählte Größe ein Angebot anfordern können.

Lösung und Umfang

Zwei Domains, fünf Sprachen, eine Plattform

Sprache und Marke ergeben sich aus der aufgerufenen Domain. kiremitcimetal.com bietet ausschließlich Türkisch und Englisch, krmsteel.com ausschließlich Englisch, Deutsch, Russisch und Arabisch. Aufrufe ohne Sprachpräfix werden per 308 auf die Standardsprache der Domain umgeleitet; eine Sprache, die auf einer Domain nicht angeboten wird, führt auf die richtige Domain – kiremitcimetal.com/de etwa auf krmsteel.com/de. Der Sprachumschalter zeigt nur die Sprachen der aktuellen Domain.

Da Englisch auf beiden Domains läuft, steht der Markenname nie als fester Text im Inhalt. Die Texte enthalten einen Marken-Platzhalter, der serverseitig je nach Domain zu „Kiremitci Metal“ oder „KRM Steel“ aufgelöst wird; Logo, Vorschaubild für soziale Netzwerke und Kontakt-E-Mail folgen derselben Regel. So erscheint derselbe englische Inhalt unter beiden Marken korrekt.

Produktkatalog

Der Katalog umfasst vier Produktgruppen und vier Hauptprodukte. Maße sind als Varianten hinterlegt: fünf Längen von 3 m bis 5 m bei den Teleskopstützen, fünf Formate von 20×100 cm bis 50×100 cm bei den Stahlschalungstafeln und sieben Längen von 1 m bis 3–3,5 m bei den Stützenverbindungselementen – insgesamt 17 Varianten. Spannstäbe werden auf Wunschlänge gefertigt und deshalb mit diesem Hinweis statt mit einer festen Liste dargestellt. Technische Merkmale wie Aufbau, Verstellmechanismus, Oberflächenbehandlung, Kompatibilität und Sonderanfertigung werden als eigene Zeilen mit einer Bezeichnung in jeder Sprache gespeichert. Jede Produktseite vereint Galerie, Datenblatt, Variantenauswahl und Angebotsbutton.

Angebotsprozess

Wählen Besucher auf der Produktseite eine Größe und klicken auf „Angebot anfordern“, öffnet sich das Formular mit bereits vorausgewähltem Produkt und passender Variante. Erfasst werden Firmenname, Ansprechpartner, E-Mail, Telefon, Land, Stadt, bevorzugter Kontaktweg (E-Mail, Telefon oder WhatsApp) sowie die gewünschten Positionen mit Menge und Einheit. Jede Anfrage erhält eine lesbare Anfragenummer; Produktname, Artikelcode und Variantenname werden beim Absenden gesichert, sodass die Anfrage auch nach späteren Katalogänderungen so lesbar bleibt, wie sie gestellt wurde. Ausgangsseite und UTM-Parameter werden ebenfalls gespeichert.

Unternehmensseiten und PDF-Katalog

Über uns, Kontakt, FAQ (sieben Fragen je Sprache), Datenschutz, Cookie-Richtlinie und Nutzungsbedingungen liegen in allen fünf Sprachen vor. Standort- und Teamdaten stammen aus der Datenbank. Aus den Katalogdaten erzeugte A4-PDF-Kataloge stehen auf der Website auf Türkisch, Englisch und Deutsch zum Download bereit.

Admin-Panel

Das Panel ist eine eigenständige Next.js-Anwendung. Im Bereich Produktverwaltung finden Sie Produktgruppen, Produkte, Angebotsanfragen, Team und Standorte. Angebotsanfragen lassen sich auflisten, durchsuchen und einzeln öffnen; jede Anfrage durchläuft die Status neu, in Prüfung, kontaktiert, qualifiziert, abgeschlossen, Spam, kann einer verantwortlichen Person zugewiesen und mit internen Notizen ergänzt werden. Jeder Statuswechsel wird mit der ausführenden Person in einer Ereignishistorie protokolliert. Website-Einstellungen, Menüs, Startseitenlayout, eigene Seiten, Medienspeicher, FAQ, Cache-Leerung, Audit-Protokoll und rollenbasierte Benutzerverwaltung werden im selben Panel gepflegt.

Technische Architektur

  • Frontend: Next.js, React und TypeScript mit serverseitigem Rendering; arabische Seiten werden mit dir="rtl" von rechts nach links dargestellt.
  • Backend: Fastify auf Bun mit Drizzle ORM und MySQL. Öffentliche Endpunkte und per JWT und Rollenprüfung geschützte Admin-Endpunkte liegen in getrennten Schichten.
  • Datenmodell: Produkte, Varianten, Bilder, technische Merkmale, Standorte und Team sind in einen sprachneutralen Stammdatensatz und je einen Übersetzungsdatensatz pro Sprache aufgeteilt. Fehlende Übersetzungen werden nie stillschweigend aus einer anderen Sprache ergänzt.
  • SEO: Canonical- und hreflang-Angaben folgen der Zuordnung von Sprache zu Domain; türkische Seiten verweisen auf kiremitcimetal.com, alle anderen Sprachen auf krmsteel.com. Domainabhängige Sitemap, robots.txt und llms.txt, strukturierte Daten für Organization, Product und BreadcrumbList sowie ein IndexNow-Schlüsselendpunkt sind eingerichtet.
  • Performance: Ein Nginx-HTML-Cache mit dem Hostnamen im Cache-Schlüssel, direkt von der Festplatte ausgelieferte Uploads und regelmäßiges Cache-Vorwärmen sorgen dafür, dass beide Marken dieselbe Anwendung nutzen, ohne jemals die Seiten der anderen anzuzeigen.
  • Sicherheit: Das Angebotsformular nutzt ein Honeypot-Feld und ein Limit pro Minute; IP-Adressen werden nur als schlüsselbasierter Hash gespeichert, nie im Klartext. Der Endpunkt zur Cache-Revalidierung akzeptiert keinen fest eingebauten Standardschlüssel.

Integrationen

Die Infrastruktur setzt auf Cloudflare, Let's-Encrypt-Zertifikate und PM2-Prozessverwaltung. Das Panel bietet Ansichten für GA4, die Google Search Console und die Anbindung von Google-Workspace-Konten sowie ein Modul zur Verwaltung der Prompt-Vorlagen für KI-gestützte Texterstellung. Produkt- und Unternehmensinhalte wurden über Seed-Skripte in die Datenbank übernommen, die auf den eigenen Fotos und Markendateien des Unternehmens basieren.

Ergebnis und heutiger Stand

Die Plattform ist unter kiremitcimetal.com und krmsteel.com live. Käufer in der Türkei sehen Kiremitci Metal auf Türkisch, Käufer im Ausland sehen KRM Steel in ihrer eigenen Sprache – dahinter arbeiten ein Katalog, ein Anfrageeingang und ein Panel. Auf der Roadmap stehen strukturierte FAQPage-Daten, die Ergänzung des Produktschemas um Beschreibung und Angebotsangaben, ein LocalBusiness-Schema sowie visuelle Abnahmetests der arabischen Rechts-nach-links-Oberfläche.