Railwayhero · Webseite

africanexplorer.de

Was wir gebaut haben

Railwayhero betreibt nicht nur eine Website. Es betreibt eine pro Reiseziel, und die Liste wächst stetig. Die Aufgabe war also nie nur, "die African Explorer Website neu aufzubauen". Es ging darum, sie so neu aufzubauen, dass die nächste Website nur einen Bruchteil der ersten kostet.

Wir haben die Website von Next.js auf Astro umgestellt, statisch, wobei React nur dort beibehalten wurde, wo etwas tatsächlich interaktiv ist. Der knifflige Teil waren die Daten. Neuntausend Zeilen Züge, Routen, Kabinen, Abfahrten und Preistabellen befanden sich in einer einzigen TypeScript-Datei, die jede Komponente direkt importierte. Wir haben sie in typisierte Content Collections auf der Festplatte aufgeteilt und jeden Consumer neu ausgerichtet, dann die Originaldatei gelöscht, sodass es eine einzige Quelle der Wahrheit gibt, anstatt zwei, die auseinanderdriften. Der Build generiert jetzt 68 Seiten, alle Reisedetailseiten inklusive.

Das Hosting wurde von Firebase zu GitLab Pages mit einer CI Pipeline verlagert, und beide Domains zogen auf Cloudflare um. Wir haben die Redirects portiert, die SEO-Schicht hinzugefügt, die die alte Website nie hatte – Open Graph, Twitter Cards, schema.org für die Agentur und für jede Reise – und einen einzigen Schalter beibehalten, der einen Preview-Build de-indiziert, damit eine Staging-Kopie niemals mit der Live-Website in der Suche konkurrieren kann.

Die Website ist auch die Vorlage

Die wiederverwendbaren Teile leben als eigene Pakete. Ein gemeinsames Anfrage-Schema definiert die Form einer Anfrage einmalig. Eine Funnel-Engine rendert das sechsstufige Anfrageformular aus diesem Schema, wobei der Endpoint, die Schritte und die Reisedaten pro Website bereitgestellt werden. Alles, was spezifisch für ein Reiseziel ist – die Palette, die Bilder, die Routen, die Preistabellen – befindet sich in Content Collections und einer Website-Konfigurationsdatei. Eine neue Ziel-Website beginnt mit diesem Skelett und ersetzt den Inhalt, nicht den Code. African Explorer läuft heute darauf. Kanada und Spanien sind die nächsten in der Reihe.

Diese Form wurde bewusst gewählt, weil die Eigenheiten, die früher fest codiert waren, jetzt Daten sein müssen. Welche Kabinen eine Abfahrt anbietet, ob ein Schritt übersprungen wird, welche Preistabelle einen Übergang steuert – all das wurde in die Konfiguration verschoben, damit die Engine über alle Websites hinweg gleich bleibt.

Die Formular-Pipeline

Anfragen wurden früher per E-Mail versendet. Wenn die E-Mail fehlschlug, war der Lead verloren, und der Kunde tippte das, was übrig blieb, manuell in Pipedrive ein. Ein Make Szenario deckte einen Teil des Hops ab.

Wir haben das durch einen Cloudflare Worker ersetzt, der eine Route pro Website bedient. Eine Einreichung wird zuerst in eine D1-Datenbank geschrieben und sofort beantwortet, sodass der Datensatz dauerhaft ist, bevor etwas anderes fehlschlagen kann. Der Pipedrive-Schreibvorgang erfolgt nach der Antwort: Person per E-Mail abgeglichen oder erstellt, Deal erstellt und verknüpft, Zug, Route, Kabine, Reisedaten, Personenzahl und die Freitextnachricht auf die echten benutzerdefinierten Felder abgebildet, und eine Notiz angehängt. Fehler bleiben in der Warteschlange, und ein Cron-Job treibt sie mit Backoff erneut an, mit einer Fallback-E-Mail, falls eine Einreichung überhaupt nicht zugestellt werden kann.

Die Middleware ist der Teil, der sich bezahlt macht. Jede Route akzeptiert nur ihren eigenen Origin, sodass ein falsch konfigurierter Origin lautstark fehlschlägt, anstatt Leads stillschweigend zu verwerfen. Ein Honeypot und eine Turnstile-Prüfung weisen Bots ab, bevor etwas geschrieben wird. Ein Pro-IP-Ratelimit absorbiert Bursts, und ein Idempotenzschlüssel pro Website, E-Mail und Minute bedeutet, dass ein Doppelklick niemals zwei Deals im CRM erzeugt.

Die Umstellung erfolgte, während der alte Pfad noch live war, dann wurde das Make Szenario abgeschaltet, sobald das neue sauber lief.

Änderungen in Minuten, nicht Wochen

Das ist der Kern des gesamten Projekts. Der Kunde ändert seine Website über Claude. Er beschreibt, was er möchte – eine neue Reise, einen anderen Preis, eine weitere Frage im Anfrageformular – und die Änderung ist innerhalb von Minuten live. Zuvor bedeutete dieselbe Änderung Tage und Wochen des Hin und Her mit einer Designagentur.

Dafür haben wir die Website gebaut. Der Inhalt befindet sich in einfachen strukturierten Dateien. Das Pipedrive-Feld-Mapping ist eine lesbare Datei. Die Einstellungen für jede Website sind eine Konfigurationsdatei. Eine neue Ziel-Website soll mit einem Markennamen und einer Domain beginnen. Der Kunde wartet nicht auf uns, und er wartet auf niemanden sonst.

Technologie-Stack

• Astro: Static Site Framework für alle Railwayhero Ziel-Websites, mit React Islands nur dort, wo die Seite interaktiv ist.
• Tailwind CSS v4: Design Tokens und das gemeinsame markenunabhängige Layout-Skelett.
• GitLab Pages: Hosting und CI, benutzerdefinierte Domain mit automatischen Zertifikaten.
• Cloudflare: DNS und Proxy vor den Websites, plus Workers und D1 für die Anfrage-Pipeline.
• Cloudflare Turnstile: Bot-Abwehr auf dem Anfrageformular.
• Pipedrive: Jede Anfrage landet als verknüpfte Person und Deal im CRM des Kunden.