Pomiń do treści
Netova
← Wszystkie realizacje

Vestra Studio – Sklep e-commerce B2C z rezerwacją stanów, polskimi płatnościami i zerowym oversellingiem

Plan E-commerce🔗 Zobacz stronę na żywo
Next.jsTursoTpayInPostFurgonetkainFaktRedis2FAPerformance

93/100

Performance

100/100

SEO Score

97/100

Accessibility

0%

overselling

100% auto

invoicing

1.1s

Czas ładowania

Vestra Studio – Sklep e-commerce B2C z rezerwacją stanów, polskimi płatnościami i zerowym oversellingiem

Galeria

Strona główna – hero z paskiem ogłoszeń i bestsellerami
Panel admina – zarządzanie zamówieniami i wysyłką
Web Vitals – mobile
Web Vitals – desktop

Wyzwanie klienta

Vestra Studio to marka odzieżowa z segmentu streetwear — kolekcje sezonowe, warianty kolorystyczne, rozmiary od XS do XXL i sprzedaż mocno skoncentrowana wokół premier („dropów"), podczas których ruch na stronie potrafi skoczyć kilkukrotnie w ciągu kilku minut.

„Testowaliśmy gotowe platformy, ale żadna nie dawała nam kontroli nad tym, co dla nas najważniejsze: żeby dwóch klientów nie kupiło ostatniej sztuki tego samego rozmiaru w tym samym momencie, żeby faktura poszła automatycznie zgodnie z polskimi przepisami, i żeby nasz zespół mógł logować się do panelu bez obaw, że ktoś przejmie sesję."

Główne wymagania

  • Zero oversellingu — przy dropie kilkanaście osób próbuje kupić ten sam rozmiar w tej samej sekundzie; potrzebny był mechanizm rezerwacji stanu na czas checkoutu, nie tylko blokada „po fakcie"
  • Polskie płatności i realny koszt wysyłki — Polska bramka płatności Tpay, wysyłka wyliczana z gabarytu paczki, nie ryczałtem
  • Fakturowanie zgodne z przepisami — automatyczne rozróżnienie klienta prywatnego od firmy, poprawny NIP i adres na fakturze, bez ręcznej pracy księgowości
  • Bezpieczny wielostanowiskowy panel admina — kilka osób z zespołu loguje się jednocześnie z różnych urządzeń, potrzebne były role, uprawnienia i 2FA
  • Elastyczna treść strony głównej — zespół marketingu musiał móc samodzielnie zmieniać hero, pasek ogłoszeń i kody rabatowe bez udziału developera
  • Brak zależności od zewnętrznego SaaS-a — właściciel chciał mieć pełną własność kodu i danych, bez miesięcznych opłat licencyjnych rosnących wraz ze skalą

Nasze podejście

Projekt zrealizowaliśmy w ramach planu E-commerce — najszerszego zakresu w naszej ofercie: dedykowany system sprzedażowy budowany od zera, bez gotowego motywu i bez platformy SaaS, z pełną integracją płatności, wysyłki i fakturowania.

1. Model danych i architektura (Tydzień 1)

Zamiast Prisma czy innego ORM-a, zdecydowaliśmy się na cienką warstwę SQL nad Turso (edge SQLite) z własnym, idempotentnym systemem migracji — tabele i kolumny tworzone są automatycznie przy starcie procesu.

Kluczowa decyzja: produkt, wariant kolorystyczny, rozmiar i zdjęcie to osobne, znormalizowane tabele — dzięki temu jeden produkt może mieć różne zdjęcia dla różnych kolorów, a stan magazynowy jest liczony per konkretna kombinacja rozmiar+kolor, nie per produkt ogólnie.

2. Silnik rezerwacji stanów magazynowych (Tydzień 2)

To serce systemu i odpowiedź na główny problem klienta.

Gdy klient dodaje produkt do koszyka i wchodzi w checkout, system tworzy tymczasową rezerwację stanu magazynowego powiązaną z jego sesją i odciskiem urządzenia, z określonym czasem wygaśnięcia. Rezerwacja:

  • blokuje sztukę towaru dla innych klientów, zanim płatność zostanie potwierdzona,
  • zwalnia się automatycznie, jeśli klient porzuci checkout,
  • wygasa sama, jeśli nikt jej nie zamknie ręcznie — a cykliczny proces rekoncyliacyjny sprząta wszystkie wygasłe rezerwacje co kilka minut,
  • zamienia się w trwałe zmniejszenie stanu dopiero po realnym potwierdzeniu płatności przez Tpay.

Każda zmiana stanu — sprzedaż, zwrot, korekta ręczna — trafia też do tabeli historii, więc zespół zawsze wie, dlaczego stan magazynowy wygląda tak, a nie inaczej.

3. Płatności — Tpay i rekoncyliacja (Tydzień 3)

Wybraliśmy Tpay — krajowego dostawcę lepiej dopasowanego do polskich metod płatności i kosztów transakcyjnych. Integracja obejmuje pełny cykl: autoryzację OAuth2, tworzenie sesji płatności z rozbiciem na produkty/wysyłkę/rabat, obsługę webhooków i refundy z poziomu panelu.

Webhooki potrafią się nie dowieźć — dlatego zbudowaliśmy osobny moduł rekoncyliacji, uruchamiany cyklicznie przez cron oraz ręcznie skryptem CLI z trybem podglądu (--dry-run). Moduł porównuje lokalny stan transakcji ze stanem w Tpay, potwierdza zamówienia, których webhook nie doszedł, i sprząta wygasłe rezerwacje — wszystko pod blokadą współbieżności, żeby dwa równoległe uruchomienia się nie pogryzły.

4. Wysyłka oparta na realnym gabarycie paczki (Tydzień 4)

Zamiast ryczałtowej ceny wysyłki, zbudowaliśmy algorytm bin packingu (Column Strip Packing), który na podstawie wymiarów fizycznych produktów w koszyku wylicza realny gabaryt paczki — a na tej podstawie dobiera właściwy rozmiar Paczkomatu InPost i pyta o aktualną cenę.

Wysyłka działa jako abstrakcja z dwoma dostawcami — InPost i Furgonetka — przełączanymi jedną zmienną środowiskową, bez zmian w kodzie checkoutu. W środowisku testowym, gdzie API kalkulacji bywa niedostępne, system spada na statyczne cenniki, więc deweloperska praca nad checkoutem nigdy nie blokuje się na zewnętrznej integracji.

5. Fakturowanie — inFakt bez udziału człowieka (Tydzień 5)

Po potwierdzeniu płatności system automatycznie, parsuje imię, nazwisko i adres na pola wymagane przez inFakt, tworzy fakturę VAT i odpytuje o jej status aż do wygenerowania PDF-a. Dokument trafia do klienta w jednym e-mailu razem z potwierdzeniem zamówienia — wcześniejsza wersja wysyłała dwa osobne e-maile z tego samego zdarzenia, co poprawiliśmy przy okazji tej integracji.

6. Panel administracyjny klasy bankowej (Tydzień 6–7)

Panel admina obsługuje kilka osób jednocześnie, więc bezpieczeństwo sesji potraktowaliśmy poważnie:

  • Role i uprawnienia — konto ADMIN z pełnym dostępem oraz konta EMPLOYEE z granularną listą uprawnień (zamówienia, produkty, magazyn, rabaty osobno)
  • Sesje w Redis, nie w cookie — cookie przechowuje wyłącznie podpisany HMAC-em identyfikator odsyłający do stanu sesji trzymanego w Redis; sama zawartość sesji nigdy nie trafia do przeglądarki
  • Odcisk urządzenia — sesja zapisuje hash User-Agenta z momentu logowania; jeśli przy kolejnym żądaniu odcisk się nie zgadza, system traktuje to jako możliwe przejęcie sesji i unieważnia wszystkie sesje danego użytkownika, nie tylko bieżącą
  • Limity czasowe — automatyczne wylogowanie po 30 minutach nieaktywności i twardy limit 8 godzin od zalogowania, niezależnie od aktywności
  • 2FA (TOTP) — kod z aplikacji uwierzytelniającej przy logowaniu, z sekretem szyfrowanym AES-256-GCM w bazie danych — nawet dostęp do bazy nie ujawnia sekretu 2FA w czytelnej formie
  • Rate limiting logowania — limit prób logowania per adres IP, żeby uniemożliwić atak brute-force na hasła

7. Samodzielna edycja treści (Tydzień 8)

Zamiast headless CMS-a zbudowaliśmy lekki, wbudowany system treści: hero, pasek ogłoszeń, dane kontaktowe, sekcja CTA i branding trzymane są jako jeden typowany obiekt JSON, edytowalny z panelu /admin/theme i odświeżany na stronie natychmiast po zapisie — bez rebuildu i bez osobnego hostingu CMS-a. Pasek ogłoszeń automatycznie dostosowuje prędkość przewijania do szerokości ekranu, więc wygląda tak samo płynnie na telefonie i na desktopie.

Stack technologiczny

| Warstwa             | Technologia                                               |
| ------------------- | --------------------------------------------------------- |
| Framework           | Next.js 16 (App Router, Server Actions)                   |
| UI / animacje       | React 19, Tailwind CSS, Framer Motion                     |
| Baza danych         | Turso (edge SQLite) — bez ORM-a, własna warstwa SQL       |
| Sesje i rate-limit  | Upstash Redis                                             |
| Płatności           | Tpay (OAuth2, webhooki, refundy)                          |
| Wysyłka             | InPost ShipX API + Furgonetka API (dwóch dostawców)       |
| Fakturowanie        | inFakt API                                                |
| E-mail              | Resend                                                    |
| 2FA                 | TOTP (speakeasy) + QR code, sekret szyfrowany AES-256-GCM |
| Antybotowanie       | Cloudflare Turnstile                                      |
| Hosting             | Vercel (Edge Network + cron)                              |

Wyniki

| Metryka                               | Wartość                                                  | Standard branżowy              |
| ------------------------------------- | -------------------------------------------------------- | ------------------------------ |
| Lighthouse Performance                | 93                                                       | >90                            |
| Lighthouse SEO                        | 100                                                      | 100                            |
| Lighthouse Accessibility              | 97                                                       | >90                            |
| Czas ładowania (LCP)                  | 1.1 s                                                    | <2.5 s                         |
| Overselling przy dropach              | 0%                                                       | branżowo częsty problem        |
| Zamówienia z automatyczną fakturą     | 100%                                                     | zwykle praca ręczna            |
| Incydenty przejęcia sesji admina      | 0 (wykryte i zablokowane automatycznie)                  |                                |
| Dostawcy wysyłki                      | 2 (InPost + Furgonetka), przełączalni bez zmian w kodzie |                                |

Co wyróżnia ten projekt

Vestra Studio to dowód na to, że sklep internetowy „szyty na miarę" nie musi oznaczać kompromisów względem gotowych platform — może oznaczać więcej kontroli tam, gdzie się liczy:

  1. Zero oversellingu przy dropach — rezerwacja stanu magazynowego działa dokładnie na moment, w którym gotowe platformy najczęściej zawodzą
  2. Płatności i fakturowanie dopasowane do polskiego rynku — Tpay i inFakt zamiast uniwersalnych, droższych rozwiązań zachodnich
  3. Bezpieczeństwo sesji na poziomie, jakiego oczekuje się od paneli bankowych — wykrywanie przejęcia sesji, 2FA, pełna kontrola nad aktywnymi urządzeniami
  4. Zero zależności od SaaS-a — kod i dane należą w całości do klienta, bez rosnących opłat licencyjnych wraz ze skalą sprzedaży
  5. Elastyczność bez developera — zespół marketingu samodzielnie zmienia treści, rabaty i pasek ogłoszeń

Prowadzisz sklep internetowy i czujesz, że gotowa platforma Cię ogranicza? Porozmawiajmy — pokażemy Ci, jak własny system e-commerce może dać Ci kontrolę, której szukasz.

Chcesz podobnych wyników?

Skontaktuj się z nami — przygotujemy darmową wycenę w 24h.