Aurora Global — B2B-Wälzlagerkatalog und Angebotswebsite
Eine mehrsprachige B2B-Website mit technischem Wälzlagerkatalog und Angebotsanfrage für einen britischen Lieferanten von Automobil- und Industrieersatzteilen.

Beschreibung
Eine mehrsprachige B2B-Website mit technischem Wälzlagerkatalog und Angebotsanfrage für einen britischen Lieferanten von Automobil- und Industrieersatzteilen.
Fallstudie
Herausforderung
Die bisherige Website von Aurora Global war eine reine Unternehmenspräsentation ohne Produktliste und Angebotsprozess; der Angebotsbutton öffnete WhatsApp. Das Unternehmen lud seinen Bestand täglich zu BearingNet hoch, auf der eigenen Website war er jedoch nicht sichtbar. Käufer kamen zugleich mit Teilenummern und in mehreren Sprachen.
Vorgehen
Wir haben auf Next.js, Fastify und MySQL eine viersprachige B2B-Katalog- und Angebotswebsite gebaut, deren Inhalte vollständig über das Admin-Panel gepflegt werden. Das Excel-Format von BearingNet lässt sich direkt im Panel importieren: Jede Datei wird zunächst ohne Schreibzugriff geprüft, der Upload-Schlüssel wird nirgends gespeichert. Produktseiten erhielten technische Datentabellen, Vertrauensangaben, strukturierte Daten und produktspezifische Sharing-Bilder.
Ergebnis
Die Website ist mit 5.715 aktiven Produktdatensätzen, 11 Produktgruppen und 4 Marken auf Englisch, Deutsch, Russisch und Arabisch online. Jedes Produkt führt zu einer Angebotsanfrage, die im Panel mit ihrem Status verfolgt wird. Die tägliche Bestandsaktualisierung erfolgt, indem der Kunde die ohnehin vorbereitete Datei ins Panel zieht.
Tools
Next.js 16, React 19, TypeScript, Tailwind CSS 4, Fastify, Bun, Drizzle ORM, MySQL, Nginx, PM2
Hauptfunktionen
5.715 aktive Produkte, 11 Gruppen, 4 Marken (SKF, Timken, NTN, SNR)
Erweiterte Suche nach Teilenummer, Marke und Kategorie (⌘K)
Angebotsanfrage für mehrere Produkte mit Vorgangsnummer
Statusablauf, Zuständigkeit, Notizen und Verlauf je Anfrage
Täglicher BearingNet-Excel-Import mit Vorschau ohne Schreiben
EN/DE/RU/AR mit lokalisierten URLs und Arabisch von rechts
Produkt-Sitemaps je Sprache, hreflang und Product-Schema
Serverseitig erzeugtes Social-Sharing-Bild für jedes Produkt
llms.txt, IndexNow und strukturierte FAQPage-Daten
Verwendete Technologien
Next.js 16
React 19
TypeScript
Tailwind CSS 4
Fastify
Bun
Drizzle ORM
MySQL
Nginx
PM2
Design-Highlights
Kantige Industrieoptik auf Basis der Markenfarben; helles und dunkles Theme
Katalogzähler aus Live-Daten statt geschätzter Werbezahlen
Produktseiten nennen Prüfteam, Aktualisierungsdatum und Herstellerquelle
Rechts-nach-links-Layout für Arabisch und eigene Slugs je Sprache
Filterbarer Suchdialog, per Tastenkürzel aufrufbar
Details
Aurora Global ist ein in Großbritannien ansässiger B2B-Lieferant für Automobil- und Industrieersatzteile mit klarem Schwerpunkt auf Wälzlagern. Zu den Kunden zählen technische Einkaufsteams von OEMs, MRO- und Instandhaltungsabteilungen, Einkaufsleiter und Industriehändler – nicht nur in Großbritannien, sondern in Europa, dem Nahen Osten, Asien und Afrika. Mit diesem Projekt wurde der Lagerbestand des Unternehmens zu einem technischen Katalog, der sich nach Teilenummer durchsuchen lässt und bei dem jedes Produkt zu einer Angebotsanfrage führt.
Ausgangslage und Anforderungen
Die bisherige Website war eine reine Unternehmenspräsentation: keine Produktliste, kein Angebotsprozess, und der Button „Request a quote“ öffnete lediglich WhatsApp. Wälzlagerkäufer kommen jedoch mit einer Teilenummer und einer Frage: Haben Sie diese Referenz, wie schnell und zu welchem Preis? Aurora Global lädt seinen Bestand täglich in das BearingNet-Netzwerk hoch, und Käufer fanden die Teile dort und fragten Angebote an. Die Aufgabe war eindeutig: Derselbe Bestand sollte auf der eigenen Website erscheinen, jede Produktseite sollte zur Angebotsanfrage führen, und die Site musste in mehreren Sprachen für Suchmaschinen und KI-Suche auffindbar sein.
Lösung und Umfang
Technischer Wälzlagerkatalog
Der Live-Katalog umfasst 5.715 aktive Produktdatensätze in 11 Produktgruppen von 4 Marken (SKF, Timken, NTN, SNR). Die Gruppen reichen von Rillen-, Schräg- und Pendelkugellagern über Zylinder-, Kegel-, Pendel- und Nadelrollenlager, Axiallager und Lagereinheiten bis zu Radlagern für Fahrzeuge sowie Lager- und Industriekomponenten. Die Liste bietet einen Gruppenfilter, einen Filter „Nur lagernde Artikel“ und eine Seitennavigation. Die Zähler oben auf der Seite werden aus dem aktuellen Katalog berechnet und sind keine von Hand eingetragene Werbezahl.
Erweiterte Produktsuche
Ein überall auf der Website aufrufbarer Suchdialog (⌘K) durchsucht den Live-Katalog nach Teilenummer, Marke oder Lagerkategorie – mit Marken- und Kategoriefiltern, einer Trefferliste und einem Link „Alle Treffer anzeigen“. Sämtliche Suchtexte kommen in vier Sprachen aus der Datenbank.
Produktdetailseiten
Jede Produktseite enthält eine Beschreibung, die Abschnitte „Einsatzbereiche“ und „Technische Vorteile“, eine Tabelle mit Bohrungs- und Außendurchmesser, Breite und dynamischer Tragzahl, verwandte Produkte sowie einen direkten Angebotsbutton. Für Vertrauen sorgt die Angabe, wer den Inhalt geprüft hat, wann der Datensatz zuletzt aktualisiert wurde und welche Herstellerquelle zugrunde liegt; zudem wird klar darauf hingewiesen, dass die technische Kompatibilität anhand der Herstellerunterlagen zu bestätigen ist. Maße und Tragzahlen werden nie geschätzt.
Angebotsanfrage (RFQ)
Die Angebotsseite erklärt den Ablauf in vier Schritten: Produkte auswählen, Anforderungen mitteilen, technische Prüfung, Rückmeldung erhalten. Sie fügen ein oder mehrere Produkte mit Menge hinzu und geben Firmen- und Kontaktdaten, Land (ISO-Code), Stadt und eine Nachricht ein; die Datenschutzeinwilligung ist Pflicht. Jede Anfrage erhält eine eindeutige Vorgangsnummer, Herkunftsseite und UTM-Parameter werden erfasst, die IP-Adresse wird nur als Hash gespeichert, und das Formular ist durch ein Anfragelimit pro Minute geschützt.
Unternehmensseiten
Startseite, Über uns, Kontakt, FAQ, Datenschutz, Cookie-Richtlinie und AGB; ein BearingNet-Mitgliedschaftssiegel erscheint im Footer und auf der Seite „Über uns“.
Admin-Panel
Alle sichtbaren Texte werden über das Admin-Panel und die Datenbank gepflegt. Die wichtigsten Bereiche:
- Angebotsanfragen: Statusablauf (neu, in Prüfung, kontaktiert, qualifiziert, abgeschlossen, Spam), Zuständigkeit, interne Notizen und Ereignisverlauf; jede neue Anfrage erzeugt eine Benachrichtigung im Panel.
- BearingNet-Bestandsimport: Die Excel-Datei, die der Kunde ohnehin täglich an BearingNet sendet, wird ins Panel gezogen; zuerst entsteht ein Vorschaubericht ohne Schreibzugriff (neue, aktualisierte und abgelehnte Zeilen), erst nach Bestätigung werden Bestände aktualisiert und neue Teile als Produkte angelegt.
- Produkte und Produktgruppen: mehrsprachige Namen, Beschreibungen, Bilder, Varianten und technische Daten.
- Inhalte: Startseiten-Layout, Slider, Menüs, FAQ, eigene Seiten, Standorte, E-Mail-Vorlagen, Medienbibliothek und Website-Einstellungen.
- Marketing und Sichtbarkeit: Anbindungsseiten für GA4, Google Ads, Search Console und soziale Kanäle sowie Verwaltung der KI-Content-Prompts.
- System: Benutzer und Rollen, Audit-Log, Cache und Benachrichtigungen.
Technische Architektur
Das Projekt ist ein Bun-Monorepo mit drei Anwendungen: der öffentlichen Website auf Next.js 16 und React 19, einem Admin-Panel auf Next.js-Basis und einer REST-API auf Fastify. Die Daten liegen in MySQL; Schema und Inhalte werden als nummerierte SQL-Seed-Dateien versioniert. Das Katalogmodell gliedert sich in Produkte, Produktübersetzungen, Bestand, Varianten, Bilder, technische Daten und Kategoriezuordnungen; für Angebote gibt es eigene Tabellen für Anfragen, Anfragepositionen und Anfrageereignisse.
Mehrsprachigkeit: Die Website ist in vier Sprachen online – Englisch (Standard), Deutsch, Russisch und Arabisch. Die URLs sind je Sprache lokalisiert (z. B. /en/request-a-quote, /de/angebot-anfordern), und auch Produktadressen tragen in jeder Sprache einen eigenen Slug. Arabische Seiten werden von rechts nach links (RTL) dargestellt.
SEO und GEO: ein Sitemap-Index mit getrennten Produkt-Sitemaps je Sprache, hreflang- und Canonical-Tags, strukturierte Daten für Organization, Product und BreadcrumbList, FAQPage-Markup, eine llms.txt für KI-Suchmaschinen sowie IndexNow-Meldungen. Für jedes Produkt und jede statische Seite wird serverseitig ein eigenes Social-Sharing-Bild erzeugt.
Sicherheit und Qualität: Der Upload-Schlüssel in der ersten Zeile der BearingNet-Datei wird weder gelesen noch protokolliert oder gespeichert; der Import ist der Administratorrolle vorbehalten. Google-Kontotoken werden verschlüsselt abgelegt. Es gibt Regressionstests für die Katalog-API, Unit-Tests für den Import-Parser und Playwright-End-to-End-Tests. Das Deploy-Skript baut jede Version in einem eigenen Verzeichnis, prüft die HTTP-Routen und kehrt bei einem fehlgeschlagenen Wechsel zur vorherigen Version zurück.
Integrationen
- BearingNet: Import der Bestandsdatei im automatischen Upload-Format des Netzwerks.
- Google Workspace: OAuth-Anbindung für Gmail und Kalender.
- Meta und soziale Kanäle: OAuth-Anbindung für Facebook und Instagram; die Profile auf LinkedIn, Instagram und Facebook sind im Organization-Schema als sameAs hinterlegt, mit einer Markensprache, die zu den englischsprachigen Social-Media-Inhalten desselben Teams passt.
- Tanitio: ein eigener API-Endpunkt für die Inhaltsanbindung.
Ergebnis und heute
Aurora Global ist heute unter eigener Domain in vier Sprachen mit einem nach Teilenummer durchsuchbaren Wälzlagerkatalog online. Der auf BearingNet gelistete SKF- und Timken-Bestand ist auf der Website als Produktseiten vorhanden, jede Seite führt zur Angebotsanfrage, und Anfragen werden im Panel mit ihrem Status verfolgt. Die tägliche Bestandsaktualisierung braucht kein zusätzliches System: Der Kunde lädt einfach die Datei hoch, die er ohnehin vorbereitet. Das Projekt wird in laufender Betreuung zusammen mit Kataloginhalten, SEO und Social-Media-Arbeit weiterentwickelt.