Nuxt 3, TypeScript, PostgreSQL i Prisma — 40+ stron i 73+ endpointów API
Realizacja · e-commerce
shopkingofgloss.nl — sklep, którego nie dało się kupić gotowego
Klient sprzedawał produkty do pielęgnacji samochodów i potrzebował sklepu, który łączy sprzedaż z realną obsługą operacyjną: zamówienia, fulfilment, faktury, stany magazynowe, eksporty i wielojęzyczność. Żadna gotowa platforma nie dawała tego bez kompromisów, które blokowały codzienną pracę. Zbudowałem cały system od zera — od koszyka po panel admina z 17+ widokami.
Problem
Gotowe platformy, niewystarczające odpowiedzi
Właściciel próbował gotowych rozwiązań. Shopify, WooCommerce, gotowe szablony — każda opcja albo wymagała ciągłego obchodzenia ograniczeń, albo nie obsługiwała kluczowych elementów: wielojęzyczności, faktur w formacie wymaganym w Holandii, fulfilmentu z odbiorem osobistym i dostawą w jednym flow.
Sklep miał rosnąć razem z biznesem. Potrzebny był system, który nie wymaga migracji przy każdej nowej funkcji — ale który od początku pokrywa realne operacje: od zamówienia po rozliczenie.
Podejście
Cały system, nie tylko sklep
Zamiast stawiać storefront i dopisywać resztę później, zacząłem od mapy wszystkich procesów: co dzieje się od momentu, gdy klient dodaje produkt do koszyka, aż po moment, gdy zamówienie jest zrealizowane, zafakturowane i wyeksportowane do rozliczeń.
Na tej podstawie powstał system z pełnym flow zamówień, płatnościami Mollie, automatycznymi fakturami PDF, fulfilmentem z podziałem na odbiór i dostawę, oraz panelem administracyjnym, który pokrywa codzienną obsługę bez wchodzenia w kod.
Wielojęzyczność (NL, EN, PL) była wbudowana od początku — nie jako wtyczka, ale jako warstwa danych i UI, która działa spójnie w sklepie i w panelu.
Zakres
Co zostało zbudowane
Kompletny system e-commerce z backendem, panelem administracyjnym i warstwą operacyjną — zbudowany pod realne procesy sprzedażowe, nie pod demo.
Płatności Mollie (iDEAL, Bancontact, karta, Apple Pay) z pełnym flow zamówień i obsługą błędów
Faktury PDF generowane automatycznie, eksporty CSV/PDF/ZIP dla rozliczeń i logistyki
Fulfilment z obsługą odbioru osobistego i dostawy — cały proces od koszyka po realizację
Trzy wersje językowe (NL, EN, PL) z systemem tłumaczeń maszynowych i ręczną korektą — 237 fraz
Panel administracyjny z 17+ widokami, RBAC i pełna kontrola nad produktami, zamówieniami i treścią
Magazyn z alertami niskiego stanu, raporty miesięczne z eksportem i eksport stanów do Excela
Deploy przez GitHub Actions z rozdziałem main/develop, nginx, PM2 i Let's Encrypt
Nuxt 3TypeScriptPostgreSQLPrismaMollieRBACPDF invoicesMultilingual
Warstwa publiczna
Sklep od strony klienta
Strona główna — marka, produkt, jedno kliknięcie do oferty
Sklep otwiera się od marki i dwóch ścieżek: produkty lub usługi. Ciemna, złota kolorystyka CleanFox buduje spójność z branżą premium detailingu — bez wizualnego chaosu.
Bestsellery — społeczny dowód w sekcji, nie w sloganie
Sekcja bestsellerów pokazuje produkty, które klienci faktycznie kupują. To konkretny sygnał zaufania dla nowego użytkownika — zamiast opisu „najlepsza jakość", widać realną popularność.
FAQ na stronie głównej — odpowiedzi tam, gdzie pada pytanie
Najczęstsze pytania są widoczne bez przechodzenia na osobną podstronę. Użytkownik rozwiewa wątpliwości w trakcie przeglądania, zamiast szukać informacji w stopce.
Lista produktów — filtrowanie, wyszukiwanie, sortowanie
Katalog z filtrami po kategorii i marce, paskiem wyszukiwania i sortowaniem pozwala klientowi dotrzeć do produktu w kilka sekund — niezależnie od tego, czy zna nazwę, czy szuka po typie.
Siatka produktów — oznaczenia, które pomagają wybrać
Oznaczenia Bestseller, Popularny i stan magazynowy (np. „Zostało 5") działają jako mikro-sygnały decyzyjne. Klient widzi, co jest popularne i co może się skończyć — bez nachalnej presji.
Karta produktu — wszystko w jednym widoku, bez klikania dalej
Opis, cena, stan magazynowy, warunki dostawy, zwroty i metody płatności — zgromadzone na jednej karcie w akordeonach. Klient nie musi szukać informacji po całym sklepie, żeby podjąć decyzję.
Cross-sell — produkty, które pasują do zamówienia
Sekcja „Pasuje do tego produktu" zwiększa wartość koszyka przez konkretne, powiązane rekomendacje. To nie losowe produkty — to świadomy dobór uzupełniający zakup.
Koszyk — próg darmowej dostawy jako motywacja
Pasek postępu do progu €50 darmowej dostawy działa jako naturalny mechanizm podnoszenia wartości zamówienia. Klient widzi, ile brakuje — i często dodaje jeszcze jeden produkt.
Checkout — prosty formularz z wyborem dostawy i fakturą
Formularz zamówienia obsługuje dostawę pod adres i odbiór osobisty, dane firmowe z NIP-em i wybór języka faktury. Proces jest krótki, ale kompletny — bez zbędnych kroków, z pełną elastycznością.
Potwierdzenie zamówienia — jasny status, pełne podsumowanie
Po złożeniu zamówienia klient dostaje czytelne potwierdzenie z numerem, listą produktów i kwotą. Brak niejasności — wiadomo, co zostało zamówione i co się stanie dalej.
Kontakt — formularz i mapa, bez zbędnych pól
Strona kontaktowa łączy formularz z osadzoną mapą Google. Klient widzi lokalizację i może napisać od razu — jeden widok zamiast dwóch podstron.
Stopka — nawigacja, social media, domknięcie struktury
Stopka porządkuje linki nawigacyjne i kanały kontaktu w jednym miejscu. Użytkownik, który przewinął do końca strony, wciąż ma dostęp do kluczowych ścieżek.
Panel administracyjny
To, czego klient nie widzi
Lista produktów — filtrowanie, statusy, szybki podgląd
Administrator widzi wszystkie produkty z oznaczeniami statusu, kategorii i stanu magazynowego. Filtrowanie pozwala dotrzeć do konkretnego produktu bez przewijania całej listy.
Nowy produkt — formularz z pełną kontrolą nad prezentacją
Dodawanie produktu obejmuje zdjęcia, edytor WYSIWYG opisu, slug URL, przypisanie kategorii i marki, oznaczenia oraz próg alertu o niskim stanie magazynowym. Wszystko z jednego widoku.
Szczegóły zamówienia — oś czasu statusów i notatki wewnętrzne
Zamówienie przechodzi przez sześć statusów: od utworzenia, przez płatność, pakowanie, realizację, wysyłkę, po dostarczenie. Oś czasu daje pełny obraz procesu — notatki wewnętrzne i pobranie faktury są na wyciągnięcie ręki.
Realizacja zamówienia — lista kompletacyjna i przycisk pakowania
Widok fulfillmentu pokazuje, co trzeba spakować, z przyciskiem zmiany statusu na „Spakowane". Prosty interfejs dla osoby, która fizycznie obsługuje wysyłki — bez zbędnych ekranów.
Raport miesięczny — sprzedaż, stany, eksport danych
Raport zbiera statusy zamówień, sprzedaż produktów z ilościami i przychodem, alerty o niskim stanie magazynowym i eksport do CSV, PDF i ZIP. Właściciel widzi kondycję sklepu w jednym widoku zamiast ręcznych zestawień.
System tłumaczeń — 237 fraz, statusy, ręczna korekta
Panel tłumaczeń zarządza wszystkimi frazami interfejsu z podziałem na statusy: oczekujące, maszynowe, zweryfikowane i opublikowane. Właściciel może poprawić tłumaczenie bez wiedzy technicznej.
Poza interfejsem
Elementy, które działają w tle
E-mail potwierdzający — klient wie, co kupił, zanim sprawdzi skrzynkę
Automatyczny mail z potwierdzeniem zamówienia zawiera numer, listę produktów i kwotę. Klient dostaje potwierdzenie natychmiast — bez czekania na ręczną odpowiedź.
Faktura PDF — generowana automatycznie, gotowa do księgowości
Faktura powstaje automatycznie po zamówieniu — z danymi firmy, pozycjami i kwotami zgodnymi z zamówieniem. Właściciel nie tworzy faktur ręcznie, a klient pobiera dokument z panelu.
Potrzebujesz własnego sklepu?
Jeśli Twój biznes potrzebuje czegoś więcej niż gotowej platformy — opisz projekt. Porozmawiajmy o tym, co trzeba zbudować.