Headless Commerce Plattform
Vue Storefront als eigenständig entwickelbares Frontend für einen Magento-2-Shop – mit API-basierten Produkt-, Warenkorb- und Checkout-Abläufen.
- Projektumfeld
- BELViNi / Oetker Digital
- Branche
- E-Commerce
- Zeitraum
- 2020
- Dauer
- 6 Monate
- Rolle
- Frontend Engineer
Kontext
Frontend-Entwicklung für BELViNi, einen Online-Weinhändler der Oetker-Gruppe. Das Projekt setzte auf Vue Storefront als eigenständig entwickelbare Frontend-Schicht vor dem bestehenden Magento-2-Backend.
Aufgabe
Das bestehende Magento-System bündelte Shop-Backend und Frontend in einer gemeinsamen Plattform. Für die geplante Weiterentwicklung sollte das Frontend unabhängiger von Magento-Templates werden, während Produkt-, Warenkorb- und Checkout-Prozesse weiterhin das vorhandene Backend nutzen.
Ziel war eine API-basierte Frontend-Schicht, die separat weiterentwickelt und bereitgestellt werden konnte, ohne Magento abzulösen.
Technische Umsetzung
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 und kann als eigene Frontend-Schicht weiterentwickelt werden.
Architektur-Highlights
- Vue Storefront: Headless-Commerce-Framework als Brücke zwischen modernem Frontend und Magento-Backend
- Vue.js Frontend: Komponentenbasierte UI für Produkt-, Warenkorb- und Checkout-Abläufe
- Cypress E2E-Tests: Automatisierte Tests für zentrale 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 die Testautomatisierung mit Cypress. Ich habe E2E-Tests für zentrale Produkt-, Warenkorb- und Checkout-Abläufe umgesetzt, um Regressionsrisiken bei Änderungen früh zu erkennen.
Tech Stack
Der Stack kombiniert ein modernes Frontend-Framework mit bewährter E-Commerce-Infrastruktur — pragmatisch statt dogmatisch.
- Vue.js
- TypeScript
- Vue Storefront
- Magento 2
- Node.js
- SCSS
- Cypress
- Google Cloud
- Docker
- Scrum
