Wyzwanie klienta

Vestra Store to nowoczesna polska marka odzieżowa sprzedająca kolekcje damskie i męskie — od basiców po sezonowe dropy. Marka miała świetne produkty, ale stary sklep działał jak hamulec sprzedaży:

„Klienci wybierają kolor na zdjęciu, dodają do koszyka i wychodzą, bo nie mogli wybrać rozmiaru dla tego koloru. Straciliśmy połowę konwersji przez zły UX wariantów.”

Główne bolączki przed przebudową

Brak precyzyjnego zarządzania wariantami — stary sklep nie różnił dostępności per kolor × rozmiar; sprzedawał to, czego nie miał na stanie
Checkout bez lokalnych metod płatności — brak BLIK-a i Tpay wykluczał istotną część klientów mobilnych
Brak automatyzacji logistyki — etykiety kurierskie generowane ręcznie, brak integracji z InPost Paczkomatami
Zero samodzielności marketingu — każda zmiana banera Hero czy dodanie produktu wymagało programisty
Porzucone zamówienia przez zagubione webhooki — płatności gineły, gdy webhook nie dotarł; obsługa sprawdzała status ręcznie

Nasze podejście

Zamiast gotowego szablonu postawiliśmy na platformę e-commerce szytą na miarę. Efekt: sklep całkowicie dopasowany do modelu biznesowego Vestry, bez limitów licencji i miesięcznych opłat od transakcji.

Cele projektu

Zbudować przyszłościowy sklep z precyzyjną inwentaryzacją per wariant (rozmiar × kolor)
Zautomatyzować płatności — dwa procesory jako bezpieczna nadmiarowość
Wdrożyć pełną integrację logistyczną: Paczkomat InPost oraz Kurier InPost + 4 kurierów przez Furgonetka
Dać właścicielowi pełny panel do zarządzania bez programisty na co dzień
Zoptymalizować wydajność i SEO

Stack technologiczny

Next.js 16 (App Router) — SSR z force-dynamic dla aktualnych stanów magazynowych
React 19 + TypeScript 5 — bezpieczne, nowoczesne komponenty
Tailwind CSS — spójny design system, idealny dla fashion
Framer Motion — płynne animacje UI (mikro-interakcje, przejścia stron)
Tpay + Stripe — dwie bramki płatności: BLIK, P24, karty, przelewy
LibSQL / Turso — szybka baza edge-native (latency < 10 ms)
Cloudinary — 5 presetów zdjęć produktowych (thumbnail, card, detail, gallery, fullsize)
Resend — transakcyjne e-maile (potwierdzenia zamówień, reset hasła)
Upstash Redis — locki, rate limiting i cache operacji magazynowych
Furgonetka API — generowanie etykiet: InPost Kurier, DPD, DHL, UPS, ORLEN Paczka
InPost Geowidget — interaktywna mapa Paczkomatów w checkout
iron-session — bezpieczne sesje panelu admina

Projekt i implementacja

1. Model danych i inwentaryzacja wariantów (Dni 1–5)

Kluczowy fundament projektu — sklep odzieżowy wymaga inwentaryzacji per wariant (rozmiar × kolor), a nie per produkt. Zbudowaliśmy model, który:

rozróżnia dostępność dla każdej kombinacji (np. „Bluza Oversize / L / Czarna: 3 szt.”)
blokuje stany podczas sesji zakupowej (rezerwacja z TTL) — koniec ze sprzedażą na minusie
wyświetla alert „ostatnie sztuki” przy stanach niższych niż próg
automatycznie zwalnia rezerwacje wygasłych sesji przez reconciliation job

2. Karta produktu — UX, który konwertuje (Dni 6–12)

Zaprojektowaliśmy kartę produktu rozwiązującą najczęstszy problem odzieżowych e-commerce — wybór wariantu:

Color swatche — kliknięcie koloru zmienia galerię zdjęć na lookbook danego koloru
Selector rozmiarów z dostępnością na żywo — każdy rozmiar aktywny tylko gdy jest na stanie dla wybranego koloru; wyszarzone rozmiary z tooltipem „Brak w wybranym kolorze”
Galeria z Cloudinary — 5 presetów jakościowych dopasowanych do kontekstu wyświetlania
Lazy loading i priority dla hero produktu — LCP < 0.8 s nawet przy dużych galeriach fashion

| Preset Cloudinary | Rozdzielczość | Zastosowanie                          |
|-------------------|---------------|---------------------------------------|
| thumbnail         | 400 x 400     | Lista produktów, grid katalogu        |
| card              | 800 x 800     | Karta produktu, featured section      |
| detail            | 1200 x 1200   | Główne zdjęcie na stronie produktu    |
| gallery           | 1800 x 1800   | Lightbox w galerii                    |
| fullsize          | 2400 x 2400   | Pełny zoom u klienta                  |

3. Checkout i płatności (Dni 13–20)

Checkout zoptymalizowany pod konwersję mobilną i desktop:

Dwie bramki płatności — Tpay (BLIK, P24, przelewy) i Stripe (karty, Google Pay) — klient zawsze ma opcję
5 metod dostawy — Paczkomat InPost z interaktywną mapą, Kurier InPost, DPD, DHL, ORLEN Paczka
Kody rabatowe — procentowe lub kwotowe, z limitem użyć, datami ważności i ograniczeniem do wybranych produktów
Autocomplete adresu — szybkie wpisywanie bez irytujących błędów
Potwierdzenie e-mail — automatyczne przez Resend z tabelą zamówionych produktów

4. Automatyzacja logistyki (Dni 21–27)

Generowanie etykiet kurierskich z poziomu panelu admina — jeden klik, etykieta gotowa do druku
Inteligentne pakowanie (algorytm bin-packing) — system dobiera rozmiar paczki na podstawie wymiarów i wag produktów
Śledzenie przesyłek — historia statusów zapisywana w bazie; klient śledzi zamówienie pod unikalnym tokenem
Strona zwrotów — dedykowana /zwroty-i-reklamacje z formularzem PDF i pełną instrukcją

5. Panel admina — sklep bez programisty (Dni 28–35)

Kompletny back-office zabezpieczony przez iron-session:

| Moduł admina   | Co umożliwia                                            |
|----------------|---------------------------------------------------------|
| Produkty       | Dodaj/edytuj: zdjęcia, warianty, kolory, rozmiary, ceny |
| Zamówienia     | Zarządzaj statusami, generuj etykiety, śledź wysyłki    |
| Inwentaryzacja | Stany per wariant; alerty o niskim stanie               |
| Rezerwacje     | Pogląd aktywnych blokad z czasem wygaśnięcia            |
| Kody rabatowe  | Twórz i zarządzaj promocjami bez deployu                |
| Pracownicy     | Dodatkowe konta z kontrolą dostępu                      |
| CMS / Wygląd   | Edytuj Hero, baner ogłoszeniowy, featured products      |
| Motyw          | Zmień kolory i styl sklepu na żywo                      |
| Integracje     | Podłącz Furgonetka OAuth2, zarządzaj kurierami          |

Właściciel dodaje nową kolekcję, ustawia wyprzedaż i zmienia baner Hero — bez kontaktu z programistą.

6. Reconciliation płatności — nigdy nie zgub zamówienia (Dni 36–40)

Webhooki płatnicze czasem nie dochodzą. Zbudowaliśmy automatyczny mechanizm naprawczy:

Cron job z endpointem /api/cron/sync-payments odpytuje Tpay i Stripe API o statusy oczekujących płatności
Jeśli zapłacono — tworzy zamówienie; jeśli sesja wygasła — zwalnia zarezerwowany stan
Redis lock zapobiega równoległym uruchomieniom; idempotencja eliminuje duplikaty zamówień

Efekt: zero zamówień zagubionych przez problemy sieciowe lub opóźnienia bramki płatniczej.

7. Performance i SEO (Dni 41–45)

Dynamiczna mapa witryny (sitemap.ts) — generowana przy każdym buildzie ze wszystkimi produktami
Dynamiczne metadata z CMS — tytuły, opisy i OpenGraph per produkt z zdjęciem Cloudinary
Lazy loading sekcji poniżej foldu — Featured, Categories, CTA ładują się po pierwszym renderze
force-dynamic dla krytycznych widoków — strony produktowe, koszyk, panel zarządzania itp. zawsze pokazują aktualny stan

Wyniki

| Metryka                                  | Przed           | Po       | Zmiana   |
|------------------------------------------|-----------------|----------|----------|
| Lighthouse Performance                   | 54              | 90+      | +67%     |
| Lighthouse SEO                           | 71              | 100      | +41%     |
| Lighthouse Accessibility                 | 78              | 100      | +28%     |
| Średnij czas LCP                         | 3.1 s           | 0.8 s    | −74%     |
| Konwersja koszyk → zakup                 | 2.1%            | 2.9%     | +38%     |
| Zamówienia utracone przez webhooki       | sporadyczne     | 0        | −100%    |
| Czas generowania etykiety                | ~15 min ręcznie | ~10 s    | −98%     |

Co mówi klient

„Nareszcie mam sklep, który robi robotę sam.

— Właścicielka, Vestra Store

Podsumowanie

Vestra Store pokazuje, że sklep internetowy to nie szablon — to silnik sprzedaży zbudowany pod konkretny biznes.

Sklep zyskał:

+38% konwersji dzięki precyzyjnemu UX wyboru wariantów i szybkiemu checkoutowi
LCP 0.8 s — szybszy niż 95% sklepów odzieżowych
5 opcji dostawy w jednym checkout (Paczkomat, InPost, DPD, DHL, ORLEN)
Zero zagubionych zamówień — reconciliation job pracuje 24/7 jako safety net płatności
Pełny back-office — właściciel zarządza produktami, promocjami i wysyłkami bez programisty

Prowadzisz sklep odzieżowy lub e-commerce z wariantami produktów? Skontaktuj się z nami — pokażemy Ci, jak Twój sklep może sprzedawać więcej, automatycznie i bez błędów stanów magazynowych.

Jest to oferta dedykowana dla marek, które chcą zbudować sklep szyty na miarę — bez kompromisów gotowych platform, z pełną kontrolą nad UX i funkcjonalnościami. Dla mniej wymagających biznesów mamy też gotowe rozwiązania na WooCommerce — skontaktuj się z nami.

Vestra Store – Sklep odzieżowy, który sprzedaje 24/7 z pełną automatyzacją logistyki

Galeria