Case Study — Freelance · Platforma e-commerce · 2025

RAVENX.
STUDIO

Zaprojektowałem i wdrożyłem od podstaw platformę e-commerce opartą o WordPress i WooCommerce. Projekt obejmował architekturę frontendu, rozwój custom theme, integracje płatności oraz optymalizację performance.

Cel biznesowy

Własny kanał sprzedaży, marka poza marketplace

Performance

LCP < 1,8 s (mobile)

Ownership

Architektura → deployment (solo)

Dostawa

12 dni · kickoff → live

Stack

WordPress · PHP · WooCommerce

Podgląd — strona sklepu

🔒 ravenx.studio/sklep

Widok produktu — strona szczegółów

ravenx.studio/sklep/key-couch

Responsywność — widok mobilny

9:41 🔋

Przegląd projektu

RAVENX.STUDIO to małe studio druku 3D produkujące użytkowe produkty premium — stojaki na słuchawki, organizer na klucze, podstawki biurkowe. Klient działał dotychczas przez marketplace'y (Allegro, Etsy), tracąc marżę na prowizjach i nie budując własnego wizerunku marki.

Zadanie: zbudować od zera sklep internetowy, który wizualnie oddaje charakter produktów i umożliwia samodzielne zarządzanie katalogiem przez właściciela. Całość na WordPressie z WooCommerce — klient znał panel WP i chciał zachować kontrolę bez angażowania dewelopera przy codziennych aktualizacjach.

Projekt realizowałem solo, end-to-end — od pierwszego spotkania, przez projekt UI, wdrożenie motywu, integracje płatności, po launch i konfigurację Google Merchant Center. Timeline: 12 dni.

Zakres prac

Custom WordPress themeMotyw od zera (PHP/HTML/CSS) — bez page builderów, pełna kontrola nad markupiem i rozmiarem bundla.

Modelowanie danych produktowychWooCommerce: warianty, siatki cenowe, stany magazynowe, relacje produktów.

Integracje third-partyPłatności (PayU, Przelewy24), automatyzacja maili i zwrotów — tam, gdzie miało sens, lżej niż ciężkie pluginy.

Shipping & fulfilment APIsInPost Geowidget + DHL, etykiety, dedykowany krok checkoutu zamiast domyślnej wtyczki.

Tracking & observabilityGA4 + e-commerce, Search Console, Merchant Center / feed pod Google Shopping, Meta Pixel.

Dlaczego to ma znaczenie dla mojego frontendu

Choć stackiem był WordPress / PHP, w praktyce wykorzystywałem te same nawyki co w React/Vue: component thinking, stan i synchronizacja widoku produktu (warianty, zdjęcia), architektura UX, optymalizacja performance oraz integracje przez API. To case study pod end-to-end ownership — od problemu biznesowego po produkcję — a nie „sklejenie gotowego szablonu”.

Decyzje inżynierskie

Custom theme zamiast page builderaMniejszy narzut JS/CSS i przewidywalny markup pod Core Web Vitals.

Checkout bez „zoo” pluginówTam gdzie to miało sens — custom integracje zamiast ciężkich paczek kolidujących z UI.

Defer i selektywne skryptyOdroczenie niekrytycznych skryptów + wyłączenia per widok — lepsze CWV na mobile.

ACF Pro dla treściMożliwość samodzielnej edycji przez klienta bez technicznego backlogu.

Wyzwania techniczne

🎨

Custom theme bez page buildera

WooCommerce domyślnie generuje spory narzut HTML. Napisałem custom template hooks i override'y dla stron produktu, koszyka i kasy — zachowując pełną kontrolę nad markupem i stylem bez ingerencji generatorów.

📐

Warianty produktów i UX wyboru

Produkty mają warianty kolorystyczne renderowane jako wizualne swatche zamiast dropdownów. Wymagało to customowej logiki JS do synchronizacji z WooCommerce variation API i aktualizacji zdjęć bez przeładowania strony.

⚡

Performance na mobile

WordPress potrafi być ciężki. Wyłączyłem zbędne skrypty per-strona (jQuery UI na stronach bez formularzy, Gutenberg styles na front-endzie), lazy-load zdjęć produktowych, critical CSS inline — wynik LCP poniżej 1.8s na mobile.

🔗

Integracja InPost API

Oficjalna wtyczka InPost dla WooCommerce jest ciężka i kolidowała z customowym checkout. Napisałem lekką integrację bezpośrednio z InPost Geowidget API — mapa paczkomatów działa jako custom checkout step bez zbędnego JS overhead.

Stack i architektura

Diagram zależności

Stack technologiczny

CMS

WordPress 6.5WooCommerceACF Pro

Frontend

PHP 8.2HTML5CSS Custom PropsVanilla JS

Płatności & Wysyłka

PayUPrzelewy24InPost APIDHL

Analytics & Marketing

GA4GSCMerchant CenterMeta Pixel

dni — kickoff → live

Discovery, design, wdrożenie, integracje, testy, launch. Solo.

Przebieg realizacji

Discovery & wireframes

Spotkanie z klientem, analiza potrzeb i ograniczeń (budżet, czas, wiedza techniczna klienta). Szkice przepływu UX — ścieżka od strony głównej przez listing, stronę produktu, koszyk, do kasy. Decyzja: custom motyw zamiast gotowego szablonu.

Dni 1–2

Design system + motyw PHP

Design tokens w CSS Custom Properties, typografia (Bebas Neue + JetBrains Mono), dark palette, system kolorów. Struktura motywu WordPress — functions.php, template parts, WooCommerce hooks override.

Dni 3–6

WooCommerce + integracje

Konfiguracja WooCommerce, custom template'y kasy (jeden krok zamiast trzech), integracja PayU/Przelewy24, InPost Geowidget jako custom checkout field, integracja DHL, system e-maili transakcyjnych.

Dni 7–10

Performance, SEO, launch

Audyt Core Web Vitals — selektywne ładowanie skryptów, critical CSS inline, lazy-load obrazów. Konfiguracja GA4 z e-commerce tracking, Search Console, Google Merchant Center. Migracja produktów i soft launch.

Dni 11–12

Kluczowe wnioski

Skan dla rekrutera

—

Speed vs maintainabilityBalans między czasem dostawy a długoterminowym utrzymaniem kodu i prostotą dla klienta.

—

Non-technical stakeholdersProjektowanie pod osoby bez developerskiego kontekstu — ACF, jasne granice odpowiedzialności.

—

Performance w CMSŚwiadome cięcie narzutu WP/Woo i lazy-load, żeby zbliżyć się do „statycznego” feelingu.

—

Scope & expectationsSolo bez PM-a: największy koszt to granice zakresu, nie sama implementacja.

Co robiłem inaczej niż na co dzień

PHP

WordPress / PHP zamiast Vue/React — hooki szablonów zamiast komponentów, ten sam poziom dbałości o architekturę.

E2E

Ownership całości — od UI przez integracje po hosting i backupy.

Ścieżka zakupowa — decyzje UX bez osobnego designera; walidacja z klientem.

OPS

Prod readiness — SSL, cache (Redis + WP Rocket), monitoring podstawowy.

← Wróć do projektów Odwiedź sklep ↗