Headless Commerce for BELViNi
Vue Storefront as an independently deployable frontend for a Magento 2 shop – with API-based product, cart and checkout flows.
- Client
- BELViNi / Oetker Digital
- Industry
- E-Commerce
- Period
- 2020
- Duration
- 6 months
- Role
- Frontend Engineer
Context
Frontend development for BELViNi, an online wine retailer in the Oetker Group. The project used Vue Storefront as an independently developed frontend layer in front of the existing Magento 2 backend.
Challenge
The existing Magento system combined the shop backend and frontend on one platform. For the planned development, the frontend needed to become less dependent on Magento templates while product, cart, and checkout processes continued to use the existing backend.
The goal was an API-based frontend layer that could be developed and deployed separately without replacing Magento.
Implementation
The solution was based on Vue Storefront, an open-source framework for headless commerce. The Vue.js frontend communicates with the Magento backend through APIs and can be developed as an independent frontend layer.
Architecture Highlights
- Vue Storefront: Headless-commerce framework bridging a modern frontend and the Magento backend
- Vue.js frontend: Component-based UI for product, cart, and checkout flows
- Cypress end-to-end tests: Automated coverage for core purchasing flows
- Google Cloud + Docker: Cloud-based deployment with container orchestration
My contribution
As a Frontend Engineer, I was responsible for developing the Vue Storefront frontend. My work covered the shop functionality from product listings and detail pages through the cart and checkout process.
Test automation with Cypress was a particular focus. I implemented end-to-end tests for core product, cart, and checkout flows to identify regression risks early when changes were introduced.
Tech stack
The stack combined a modern frontend framework with established e-commerce infrastructure in a pragmatic setup.
- Vue.js
- TypeScript
- Vue Storefront
- Magento 2
- Node.js
- SCSS
- Cypress
- Google Cloud
- Docker
- Scrum
