Case Study: Allergika | AutomateThis!

Überblick

Dieses Projekt ist ein modernes, high-performance E-Commerce-Storefront auf Basis eines Headless-WooCommerce Backends und eines React + TypeScript Frontends.

Das Projekt startete als Remix-Anwendung und wurde später auf React Router v7 migriert (häufig als „Remix 3“ bezeichnet, weil das Remix-artige Data-API- und Routing-Modell in React Router integriert wurde). Remix zu erwähnen bleibt relevant: Architektur, Mental Model und Ökosystem überschneiden sich stark – und viele Teams suchen weiterhin nach „Remix Commerce“-Lösungen, auch wenn die Runtime inzwischen React Router v7 ist.

Statt den Shop über ein klassisches WordPress-Theme zu rendern, ist das UI als eigenständige Web-App umgesetzt. Commerce-Daten werden aus WooCommerce via WPGraphQL (inkl. WPGraphQL WooCommerce / WooGraphQL) bezogen. Das macht das Frontend schnell, flexibel und konsequent am Brand-Erlebnis ausrichtbar.

Ein strategischer Kernpunkt ist Data Sovereignty / Datenhoheit: Mit diesem Setup besitzt der Kunde die Infrastruktur und kann den Stack ohne zusätzliche Third-Party-Commerce-SaaS betreiben. Das ist besonders wichtig, wenn Kundendaten potenziell sensibel sind (z. B. im Healthcare-nahen Kontext) – denn weniger externe Auftragsverarbeiter und kontrollierte Datenflüsse sind ein großer Vorteil für Compliance und Vertrauen.

Was das Projekt macht

1) Headless Commerce Storefront

Holt Produkt- und Kundendaten aus WooCommerce über GraphQL.
Unterstützt Produkt-Browsing und gängige Präsentationsmuster (Teaser, Galerien, Reviews).
Implementiert Customer/Account-Flows sowie serverseitige Services für Customer- und Cart-Operationen.

2) Strukturierte Seitenbereiche über „nur Produkte“ hinaus

Kategorie-/Content-Layouts (z. B. Hautpflege, Milbenschutz).
Statische Legal-Seiten (AGB, Datenschutz, Impressum, Widerrufsbelehrung).
Editorial-Content-Routen (z. B. Ratgeber), die Content mit Produkt-Teasern kombinieren können.

3) Wiederverwendbare UI-Komponenten (Design-System-Ansatz)

Ein Set an wiederverwendbaren Komponenten ermöglicht konsistente Page-Compositions:

Hero Sections, Breadcrumbs, Teaser Cards, Testimonials, Text/Media Sections
Spezialisierte Produkt-Komponenten (Image Gallery, Reviews)

4) Integrationen & Support-Tooling

Enthält Rocket.Chat Initialisierungscode für eingebetteten Live-Chat/Support.

Zentrale Benefits

Datenhoheit & Privacy-Posture (kundenbetriebene Infrastruktur)

Der Kunde kann Storefront und Backend auf eigener Infrastruktur hosten und betreiben.
Es sind keine zwingenden Third-Party-Commerce-Plattformen im Request-Pfad nötig, um den Storefront zu rendern oder Orders zu verwalten.
Das reduziert die Anzahl externer Systeme, die Kundendaten verarbeiten – wichtig in sensiblen Domänen, in denen Datenminimierung und Kontrolle zählen (inkl. healthcare-naher Customer Journeys).

Hinweis: Payment kann je nach gewählter Methode natürlich weiterhin einen Payment Provider involvieren. Der Kern-Storefront + Commerce-Stack ist jedoch nicht von einer gehosteten SaaS-Commerce-Plattform abhängig.

Speed, UX-Qualität & Core Web Vitals

Ein Headless-Frontend verbessert Real-User-Speed und UX, weil typische Bottlenecks aus Theme+Plugin-Rendering entfallen und durch eine performance-orientierte App-Architektur ersetzt werden.

Benefits für Core Web Vitals:

LCP (Largest Contentful Paint): SSR und route-level Data Loading liefern relevante Inhalte oft schneller als plugin-lastige Themes, die auf viele Client-Scripts warten.
CLS (Cumulative Layout Shift): Component-first Layouts reservieren Platz für Bilder/Elemente sauberer, wodurch späte Injects und Widgets weniger Layout-Shifts verursachen.
INP (Interaction to Next Paint): Kleinere, bewusstere JS-Payloads und weniger Third-Party-Scripts reduzieren Main-Thread-Work und verbessern Responsiveness (z. B. Cart öffnen, Produktbilder wechseln, Checkout Steps).

Warum das Setup in der Praxis hilft:

Weniger „globale“ Scripts als viele WordPress-Theme-Stacks
Mehr Kontrolle, was pro Route lädt (statt alles überall)
Bessere Kontrolle über Images und Above-the-fold Rendering
Caching/Headers können auf App-Layer optimiert werden

Performance & SEO

Server-Side Rendering (SSR) und route-level Data Loading (Remix-Style Modell, jetzt via React Router v7) verbessern Initial Load & SEO.
Fine-grained Data Loading reduziert Over-Fetching und hält Seiten schlank.
Bessere Kontrolle über Caching, Headers und Request-Verhalten gegenüber monolithischen Theme-Setups.

Brand-first UX (ohne WordPress-Theme-Grenzen)

Das UI ist vollständig custom: Templates, Produktmodule und Editorial-Layouts können exakt auf Brand und Use-Cases ausgelegt werden.
Ermöglicht UI-Patterns, die in klassischen Theme+Plugin-Umgebungen schwierig oder fragil sind.

WooCommerce-Operational-Simplicity bleibt erhalten

Headless entfernt nicht die praktischen Vorteile von WooCommerce im Alltag.
Teams können weiterhin auf vertraute WooCommerce-Admin-Flows setzen:
- Produktmanagement
- Order Processing
- Customer Management
- Promotions und Basic Ops
So bleibt die „Day-to-day simplicity“ erhalten, während das Kundenerlebnis modernisiert wird.

Saubere Integrationsfläche mit GraphQL

WPGraphQL stellt eine strukturierte API für WooCommerce-Daten bereit.
GraphQL erlaubt, pro Route/Component genau die benötigten Daten anzufordern.
Das Frontend kann unabhängig von Backend-Template-Constraints weiterentwickelt werden.

Maintainability & Skalierung

TypeScript erzwingt klare Contracts und reduziert Laufzeitfehler.
Klare Trennung der Verantwortlichkeiten:
- UI Components: app/components/*
- Server-side API/Cart/Customer Logic: app/services/*
- Routes/Pages/Layouts: app/routes/*
- Utilities/Shared Types: app/utils/* sowie component-spezifische Types

Content + Commerce blending

Editorial-Seiten können Produkt-Auswahl einbetten – ideal für SEO Landing Pages, Education-first Selling und Content-getriebene Journeys.

Sauberer Git-Workflow (Staging → Live)

Das Projekt ist für professionelle Deployments ausgelegt:
- Staging für Validation und QA
- Live/Production für Kundentraffic
Das ermöglicht sicherere Releases, einfachere Rollbacks und besseres Change-Management als „direkt live editieren“.

Technologie-Stack

Frontend Runtime & Application Framework

React
React Router v7 (Remix-Style Routing/Data Model; häufig „Remix 3“ genannt)
Ursprünglich Remix (relevant für Kontext, Searchability und Architektur-Lineage)
TypeScript

Styling & UI-Approach

Utility-first Styling und composable Components (Tailwind-artige Patterns)
Component-driven Page Assembly (Hero, Breadcrumbs, Produktmodule usw.)

Backend / Data Layer

WordPress + WooCommerce
WPGraphQL und WPGraphQL WooCommerce / WooGraphQL für GraphQL-basierte Commerce-Operationen

Service Layer (Server-Side)

Serverseitige GraphQL-Schicht für Warenkorb, Session und Kundendaten (Login, Adressen, Passwort-Flows)

Integrationen

Eingebetteter Live-Chat für den Support

Warum das besser ist als „normale“ WooCommerce-Lösungen

Gegenüber einem klassischen WooCommerce-Theme

Traditioneller Ansatz: WordPress Theme + PHP Templates + viele Plugins
Dieser Ansatz: Headless WooCommerce + React Router v7 (Remix-Style) Frontend + GraphQL

Zentrale Vorteile:

UX Control: UI ist nicht durch Theme-Templates und WordPress-Rendering limitiert.
Performance: SSR + route loaders/actions outperformen oft plugin-lastige Themes.
Developer Velocity: Features shippen ohne PHP Template-/Theme-Logik anzufassen.
Stärkere Architektur: Saubere Trennung von Presentation (Frontend) und Commerce Engine (WooCommerce).
Composable UI: Wiederverwendbare Components beschleunigen konsistente Seiten.
Mehr Kontrolle über Datenflüsse: Kundenbetriebene Infrastruktur reduziert Abhängigkeit von Drittverarbeitern – wichtig bei sensiblen Daten-Kontexten.

Gegenüber „Page Builder“-Setups

Page Builder bringen oft Performance-Overhead und inkonsistentes Markup.
Ein Component-System liefert vorhersehbare Struktur, Accessibility und Maintainability.

Gegenüber einem komplett eigenen Commerce-Backend

WooCommerce bleibt die reife Commerce Engine (Produkte, Orders, Payments, Shipping Ecosystem).
Das Headless-Frontend bringt moderne Web-Benefits, ohne Commerce-Primitives neu zu bauen.

Warum der Remix → React Router v7 Move wichtig ist

Die Migration erhält die Kernvorteile des Remix-Modells (Nested Routes, server-first Data Loading Patterns, predictable Request Handling) und aligniert das Projekt gleichzeitig mit dem React-Router-Ökosystem.

Praktische Outcomes:

Behält die „Remix-Art zu bauen“ bei (Route-driven Data + UI Composition)
Reduziert Lock-in-Sorgen, ohne Architektur-Stärken zu verlieren
Beibehaltung der Sichtbarkeit: Teams mit Remix-Erfahrung können schnell onboarden, Stakeholder erkennen den Ansatz als „Remix-style Headless Commerce“

Nächste Ausbaustufen: Shop, ERP, Support und Reporting verbinden

Das Headless-Setup ist die Basis, um den Shop mit den Systemen dahinter zu verbinden:

Order- und Bestands-Sync zwischen Shop, ERP und Lager
Retouren- und Support-Workflows, die Anfragen automatisch zuordnen und vorbereiten
Reporting auf einer sauberen Datenbasis statt manueller Exporte

Summary

Dieses Projekt modernisiert WooCommerce, indem WooCommerce als Headless Commerce Engine genutzt wird und ein Remix-originierter Ansatz heute auf **React Router v7 („Remix 3“) ** läuft.

Es liefert:

ein Brand-tailored, performantes Storefront mit starkem Core-Web-Vitals-Potenzial,
weiterhin WooCommerce-Simplicity für das Tagesgeschäft,
einen professionellen Git-basierten Staging → Live Workflow,
und stärkere Kontrolle über Infrastruktur und Kundendatenflüsse (wichtig in sensiblen Daten-Kontexten).

Und es ist die Basis, um Shop, ERP, Support und Reporting als ein System zu verbinden.

Allergika: Headless WooCommerce Storefront (Remix → React Router v7)