
Headless Commerce Plattform
Überblick
Frontend-Entwicklung für BELViNi — einen der führenden Online-Weinhändler Deutschlands, Teil der Oetker-Gruppe. Das Projekt setzte auf eine Headless-Commerce-Architektur: Ein modernes Vue.js-Frontend, entkoppelt vom bestehenden Magento-Backend, für maximale Flexibilität und Performance.
Die Herausforderung
BELViNi betreibt einen der größten Online-Weinshops in Deutschland mit einem Sortiment von tausenden Weinen, Spirituosen und Zubehörartikeln. Das bestehende E-Commerce-System basierte auf Magento — einer bewährten, aber monolithischen Plattform, bei der Frontend und Backend eng gekoppelt sind.
Diese Kopplung begrenzte die Entwicklungsgeschwindigkeit: Jede Frontend-Änderung erforderte Anpassungen im Magento-Template-System, neue Features mussten sich in die bestehende Architektur einfügen, und die Performance war durch das server-seitige Rendering limitiert.
Das Ziel: Ein modernes, entkoppeltes Frontend, das unabhängig vom Backend entwickelt und deployed werden kann — ohne das bestehende Magento-Backend komplett zu ersetzen.
Die Lösung
Die Lösung basierte auf Vue Storefront — einem Open-Source-Framework für Headless Commerce. Das Vue.js-Frontend kommuniziert über APIs mit dem Magento-Backend, ist aber vollständig unabhängig davon. Diese Entkopplung ermöglicht schnellere Entwicklungszyklen, bessere Performance und mehr Flexibilität bei der Gestaltung der Nutzererfahrung.
Architektur-Highlights
- Vue Storefront: Headless-Commerce-Framework als Brücke zwischen modernem Frontend und Magento-Backend
- Vue.js Frontend: Komponentenbasierte, reaktive UI für ein optimales Einkaufserlebnis
- Cypress E2E-Tests: Umfassende Test-Automatisierung für kritische Kaufprozesse
- Google Cloud + Docker: Cloud-basiertes Deployment mit Container-Orchestrierung
Mein Beitrag
Als Frontend Engineer war ich für die Entwicklung des Vue Storefront-Frontends verantwortlich. Mein Fokus lag auf der Umsetzung der Shop-Funktionalitäten — von Produktlisten und Detailseiten über den Warenkorb bis zum Checkout-Prozess.
Ein besonderer Schwerpunkt war Test-Driven Development mit Cypress. Für einen E-Commerce-Shop ist die Zuverlässigkeit des Kaufprozesses geschäftskritisch — jeder Bug im Checkout bedeutet verlorenen Umsatz. Ich habe eine umfassende E2E-Testsuite aufgebaut, die alle kritischen Nutzerpfade automatisiert überprüft.
Die Arbeit im Remote-Team erforderte klare Kommunikation und selbstständiges Arbeiten — Qualitäten, die sich in meiner langjährigen Freelance-Tätigkeit bewährt haben.
Technologien
Der Stack kombiniert ein modernes Frontend-Framework mit bewährter E-Commerce-Infrastruktur — pragmatisch statt dogmatisch.