Case Study

Bayt Alebaa

Building-materials commerce split across two codebases: a Magento backend (catalog, quotes, orders) and a separate Vue.js SPA storefront that consumes Magento GraphQL—no Laravel layer. Delivery was team-based; my contribution was concentrated on scoped Magento backend work plus keeping integration points clear with the Vue side.

MagentoVue.jsPHPMySQLGraphQLE-commerce

Magento GraphQLVue storefrontSplit codebaseEAV catalog

Impact

A clearer split between commerce core and storefront UX for building-materials buyers, with my hands-on footprint intentionally narrower—mostly Magento backend—while the wider delivery stayed a coordinated team effort.

Problem

The merchant needed a serious digital channel for construction-related inventory: deep catalogs, commercial buyer flows, and a storefront experience that did not force every UX concern into Magento’s PHP theme layer.

Solution

Architecture stayed on Magento as the commerce source of truth while a dedicated Vue app owned most of the customer-facing UI. Teammates carried the bulk of the Vue implementation; I focused on Magento-side changes where the business needed them (catalog or checkout-related paths, merchant-specific behavior) and on clarifying GraphQL contract expectations so both halves stayed deployable together.

Highlighted implementation

Where work concentrated (conceptual)

Scope

Magento docroot: modules, preferences, or layout XML for merchant-specific behavior.
Vue repo: GraphQL clients and operations (primarily teammates); alignment on queries, mutations, and error shapes.

Testing & quality

Sanity checks around catalog listings, cart merge, and critical GraphQL responses after Magento upgrades or module changes; cross-checking that the Vue app’s expected query and mutation payloads still matched backend behavior before releases.

Architecture

API Structure

The Vue storefront uses Magento’s GraphQL endpoint for catalog, cart, and checkout operations (queries and mutations). Magento modules, service contracts, and admin configuration remain the authority for pricing rules, inventory visibility, and order persistence—typical headless-style boundaries without replacing Magento’s domain model.

Data Flow

Shopper → Vue SPA (routing, cart UX) → HTTPS GraphQL to Magento → resolvers and domain services → quote and order persistence in MySQL under Magento’s EAV and sales schemas. Admin and indexing workflows stay in Magento’s native tooling.

Backend Decisions

Prefer upgrade-safe customization (plugins, preferences, targeted modules) on the Magento side so security patches stay tractable; avoid duplicating cart logic in the SPA beyond what the GraphQL schema already exposes.

Bayt Alebaa architecture diagram — High-level diagram of web dashboard, REST API, Laravel layers, and MySQL.

Challenges

Attribute-heavy catalogs still stress layered navigation and search latency; split front and back repos mean GraphQL schema expectations and cache invalidation have to stay in sync when either side ships. Most Vue feature work sat with frontend specialists—I stayed closest to Magento behavior and integration edge cases.

Technical Decisions

Keep commerce data and business rules on Magento; let Vue optimize presentation and flow. Lean on Magento indexing and caching discipline rather than inventing a parallel order store.