Wróć do realizacji
E-commerce2024Niezależny inżynier

Headless commerce platform

Marka odzieżowa z 40 mln € GMV utknięta na Magento 2 — płacili za stack, którego ich zespół nienawidził, a klienci czuli. Konwersja mobile była rakiem: średnia branży 2,1%, ich 0,7%, każda kampania wlewała pieniądze do dziurawego lejka.

Przepisałem storefront od zera jako projekt Next.js App Router pod Shopify Storefront API, zachowując istniejące integracje PIM i ERP. Checkout zredukowany z sześciostopniowego molocha Magento do dwukrokowego flow, który ładuje się błyskawicznie i wysyła zamówienie zanim użytkownik zdąży się rozmyślić.

Konwersja mobile poszła z 0,7% na 2,2% (+212%). Lighthouse trzyma 98/100 na produkcji. Zespół sam wprowadza zmiany — bez konsultanta Magento.

E-commerce · 2024
Headless commerce platform
10 mln $+
Roczny GMV
+212%
Konwersja mobile
98 / 100
Lighthouse

Stack technologiczny

Pełny obraz.

Technologie wysokiego poziomu. Konkretne pakiety i integracje znajdziesz poniżej.

Next.jsTypeScriptShopify Storefront APITailwind CSSVercelCloudflare

Architektura

Od końca do końca.

Web
  • Next.js App Router z ISR per strona produktu
  • Edge middleware do geo-redirectów i A/B testów
  • Stan koszyka w szyfrowanym cookie + Shopify Cart API
  • Server Actions dla newslettera, zwrotów, konta
Backend
  • Cloudflare Workers jako cienki BFF między storefront a Shopify
  • Fan-out webhooków do Klaviyo i OMS magazynu

Biblioteki

Pakiety warte wymienienia.

  • Next.js App RouterCache Components + ISR
  • TanStack Queryhydratacja koszyka i klienta
  • Zodparsowanie odpowiedzi Storefront
  • Vitest + Playwrightpokrycie unit + e2e checkoutu

Integracje

Systemy zewnętrzne.

  • Shopifykatalog, magazyn, zamówienia
  • Stripealternatywne metody płatności
  • Klaviyolifecycle email i SMS
  • Algoliawyszukiwarka + faset
  • GA4 + Meta CAPIserver-side tracking konwersji

Budujesz coś podobnego?

Opowiedz mi o produkcie. Wrócę z konkretnymi przemyśleniami i datą startu.

Porozmawiajmy