Projekt e-commerce full-stack zaprojektowany, aby pokazać, jak wygląda sklep internetowy w pełni zarządzany przez administratora — gdzie niemal każdy element witryny można dynamicznie edytować, zamiast być na stałe zakodowanym. Zamiast dostarczać sklep, w którym zmiany układu, promocji i treści wymagają programisty, strona została zaprojektowana tak, że za witryną stoi potężny panel administracyjny, który kontroluje niemal wszystko, co właściciel sklepu może potrzebować zmienić.
Projekt działa na żywo jako sklep modowy i jubilerski skierowany na rynek pakistański, oferujący odzież damską, dziecięcą i unisex oraz biżuterię modową, z obsługą płatności za pobraniem na terenie całego kraju. Oznacza to, że opisane narzędzia administracyjne nie są jedynie demonstracją na fikcyjnych danych — aktywnie obsługują działający sklep z prawdziwymi produktami, kolekcjami i kampaniami sprzedażowymi.
Sklep dla klientów
Strona klienta Velourial jest szybka, łatwa do przeglądania i oferuje przejrzyste doświadczenie zakupowe:
Szybkie, przyjazne SEO renderowanie — zbudowane w Next.js i React, wykorzystujące renderowanie po stronie serwera i zoptymalizowane zarządzanie obrazami, dzięki czemu strony produktów i kolekcji ładują się szybko i są indeksowane przez wyszukiwarki.
Nowoczesny, responsywny design — cały interfejs stylizowany za pomocą Tailwind CSS, co zapewnia czysty, spójny i przyjazny dla urządzeń mobilnych wygląd bez ciężkich bibliotek komponentów.
Przeglądanie i odkrywanie produktów — klienci mogą przeglądać pełny katalog, filtrować według kategorii (kurtas, lehengas, lawn suits, shalwar kameez, silk suits, gharara sets, zestawy koordynowane i inne) oraz sortować według ceny lub oceny.
Kuratorskie kolekcje — produkty zorganizowane w tematyczne kolekcje, takie jak Bridal & Festive, Casual & Everyday Wear, Eid Collection, Formal & Party Wear oraz House Wear, każda z własną stroną startową.
Promocje czasowe — sklep obsługuje promocje z odliczaniem czasu, powiązane z konkretnymi produktami lub kolekcjami, tworząc poczucie pilności przy sezonowych wyprzedażach (Eid, sezon lawn, kolekcje zimowe/letnie, sezon ślubny itp.).
Podstawowe funkcje e-commerce — koszyk, lista życzeń, realizacja zamówienia, śledzenie zamówienia oraz proces zwrotów są integralną częścią ścieżki klienta, wraz z kontami użytkowników i zapisem do newslettera.
Zaufanie i wsparcie — dedykowane strony FAQ, informacje o dostawie, polityka zwrotów i kontakt do wsparcia uzupełniają doświadczenie zakupowe.
Co wyróżnia Velourial: Panel administracyjny
Głęboka wartość projektu tkwi w panelu administracyjnym. Zamiast typowego CMS zarządzającego tylko treściami blogowymi, panel Velourial pozwala na zarządzanie całym sklepem — układem, cenami, promocjami i ustawieniami globalnymi — przez osobę nietechniczną. Celem było, aby właściciel sklepu mógł prowadzić i rozwijać witrynę bez konieczności otwierania kodu czy kontaktu z programistą.
Panel podzielony jest na obszary zarządzania:
Kontrola układu
Edytowalne linki w nawigacji, umożliwiające dowolną zmianę głównego menu sklepu.
Edytowalne linki i sekcje stopki, obejmujące linki do obsługi klienta, pomocy, informacji o firmie i stron prawnych.
Edytowalna sekcja hero, w tym rotujące banery na stronie głównej, nagłówki i przyciski CTA kierujące ruch do konkretnych kolekcji (np. baner „Sezon Lawn jest tutaj” wskazujący na kolekcję lawn).
Promocje i wyprzedaże
Timery wyprzedaży z odliczaniem na żywo, konfigurowalne dla pojedynczych produktów lub całych kolekcji.
Możliwość uruchamiania i wyłączania kampanii czasowych (np. „Wyprzedaż — do 40% taniej”) bez konieczności wdrażania kodu, poprzez przełączniki i harmonogram w panelu.
Zarządzanie kolekcjami
Pełna kontrola CRUD nad kolekcjami produktów — tworzenie nowych tematycznych kolekcji, przypisywanie do nich produktów oraz zmiana kolejności lub wycofywanie kolekcji w zależności od sezonu.
Kolekcje wyświetlane są bezpośrednio na stronie głównej w siatce „Segment Architecture” oraz mają własne dedykowane strony sklepu.
Program partnerski
Narzędzia do zarządzania partnerami afiliacyjnymi, w tym onboarding i śledzenie ich aktywności polecającej.
Obsługa strony „Program partnerski — Zarabiaj” skierowanej do klientów, gdzie użytkownicy mogą aplikować o zostanie partnerem bezpośrednio ze sklepu.
Kampanie prezentowe
Obsługa kampanii i konkursów z nagrodami, w tym wydawanie i śledzenie voucherów, powiązanych ze stroną prezentową dla klientów.
Ustawienia sklepu
Centralne zarządzanie adresami URL mediów społecznościowych, konfiguracją cen wysyłki (w tym progiem darmowej wysyłki, obecnie ustawionym na 5000 PKR) oraz innymi globalnymi ustawieniami witryny.
Zmiany w ustawieniach automatycznie propagują się po całym sklepie — np. aktualizacja progu darmowej wysyłki w panelu zmienia baner i logikę realizacji zamówienia bez potrzeby modyfikacji kodu.
Projekt powstał z myślą, aby właściciel sklepu bez umiejętności technicznych mógł samodzielnie zarządzać i aktualizować całą witrynę — branding, promocje, ceny i układ — wyłącznie przez panel administracyjny, bez konieczności angażowania programisty. To założenie wpłynęło na niemal każdą decyzję architektoniczną projektu: treści zwykle zakodowane na stałe (banery hero, nawigacja, linki w stopce, odliczanie wyprzedaży) zostały zamodelowane jako edytowalne, trwałe dane.