Lumora Clothing: platforma handlowa typu full-stack, wykraczająca poza statyczną witrynę sklepową

Lumora Clothing to platforma do handlu i zarządzania operacjami typu full-stack, skierowana na praktyczne problemy, z którymi borykają się sprzedawcy odzieży – a nie kolejna statyczna strona katalogowa. Celem projektu było stworzenie systemu, który wspiera zakupy klientów oraz codzienne działania sklepu, jednocześnie zmniejszając częstotliwość, z jaką pracownicy muszą korzystać z usług programisty przy rutynowych zmianach.

Wersja w trybie online dostępna jest pod adresem https://lumora-clothing.vercel.app/.

Jak wygląda strona sklepu

Dla klientów jest to responsywna strona sklepu, zaprojektowana tak, by wydawać się prosta i nowoczesna osobom przeglądającym odzież.

Problem, który rozwiązuje

Mniejsze firmy odzieżowe nadal często polegają na inżynierach do wykonywania zwykłych zadań: edycji produktów, korekty cen, przesyłania zdjęć oraz poprawiania stanów magazynowych. Klienci w niektórych rynkach wolą znane lokalne metody płatności, takie jak przelewy bankowe i pokwitowania wpłaty. Kluby uniwersyteckie oraz firmy mogą również potrzebować spersonalizowanych zamówień hurtowych zamiast standardowej obsługi detalicznej pojedynczych produktów.

Lumora została stworzona z myślą o tych rzeczywistościach operacyjnych, a nie jako kopia ogólnego globalnego szablonu sklepu.

Jak platforma na nie odpowiada

Produkt łączy witrynę klienta z systemem administracyjnym, dzięki czemu firma może sama zajmować się codziennymi obowiązkami.

Panel administracyjny typu self-service

Operatorzy zarządzają produktami, obrazami, kategoriami, rozmiarami, cenami oraz zapasami bezpośrednio z panelu kierowniczego, bez konieczności edytowania kodu aplikacji. Obrazy można wybrać w przeglądarce za pomocą FileReader API, natychmiast je przeglądać oraz obsługiwać za pomocą formatu Base64, dzięki czemu pracownicy niebędący specjalistami technicznymi mogą utrzymywać katalog w porządku.

Kasowanie na podstawie potwierdzenia

Zamiast polegać wyłącznie na bramkach płatniczych, klienci mogą przy kasowaniu przesłać potwierdzenie przelewu bankowego lub wpłaty. Zamówienie przechodzi wtedy do stanu „Weryfikacja potwierdzenia”, aby pracownicy mogli potwierdzić płatność przed kontynuacją realizacji zamówienia.

Automatyczne powiadomienia o zamówieniach

Gdy pracownicy zmieniają status zamówienia, serwer może poinformować klienta za pomocą Resend API, eliminując powtarzające się wiadomości ręczne i jednocześnie utrzymując klientów w bieżącej sytuacji.

Droga dla transakcji B2B

Kupujący hurtowi wymagają innego procesu niż klienci detaliczni. Lumora oferuje formularz do zapytań hurtowych, w którym zbierane są informacje o ilości, materiałach oraz dodatkowych wymaganiach, a następnie przekształca je w ustrukturyzowaną wiadomość WhatsApp, dzięki czemu firma może kontynuować rozmowę w kanale, który już używa.

Architektura techniczna

Architektura opiera się na rozproszonej strukturze full-stack.

Frontend

• Interfejs użytkownika React 18
• Typy w TypeScript
• Stylizacja Tailwind
• Klient HTTP Axios
• Zbiór ikon Lucide

Server

• Serwer Node.js
• Framwork HTTP Express
• Końce API REST skierowane na zasoby
• Sesje podpisane za pomocą JWT
• Weryfikacja ról kontrolująca możliwości administratorów i klientów

Baza danych

• Klastery hostowane w MongoDB Atlas
• Modelowanie dokumentów za pomocą Mongoose

Integracje

• Przesłanie ponownie dla wiadomości transakcyjnych
• Głębokie linki do rozmowy w WhatsApp
• Reader plików w przeglądarce do lokalnych przeglądów

Rozwój

• Vercel hostuje SPA
• Railway hostuje API

Klient komunikuje się z serwerem za pomocą REST. Serwer odpowiada za autoryzację, reguły biznesowe, przechowywanie danych oraz integracje zewnętrzne.

Najważniejsze aspekty inżynieryjne

1. Mniejsza zależność od programistów

Głównym celem było osiągnięcie niezależności operacyjnej. Zmiany w katalogu i zapasach odbywają się na panelu sterowania, bez konieczności aktualizacji kodu przy każdej modyfikacji.

2> Dopasowanie do lokalnych nawyków zakupowych

Projekt systemu płatności uwzględnia przelewy bankowe i potwierdzenia wpłat typowe dla docelowych użytkowników. Rozmowy grupowe kontynuowane są w WhatsApp. Główna zasada: oprogramowanie powinno dostosowywać się do ludzi, a nie zmuszać ich do dostosowania się do oprogramowania.

3. Sprzedaż detaliczna i hurtowa w jednym produkcie

Kupowanie pojedynczych produktów oraz zlecanie dużych ilości przez firmy mogą istnieć obok siebie bez konieczności przechodzenia przez identyczny proces zakupowy.

4. Automatyzacja powtarzalnych zadań dotyczących statusu

Uprawnione do wysyłania powiadomień systemy zmniejszają potrzebę ręcznego śledzenia i zapewniają bardziej spójną komunikację z klientami.

Szersze perspektywy

Główna lekcja polega na tym, że prawdziwy produkt to nie tylko nowoczesny zestaw narzędzi – chodzi o zrozumienie procesów biznesowych, które musi obsługiwać oprogramowanie. Trzy zasady stanowią podstawę Lumory:

Buduj z myślą o niezależności operacyjnej. Zadania rutynowe nie powinny być zależne od inżynierów.

Projektuj z uwzględnieniem rzeczywistego zachowania. Wybory technologiczne powinny odzwierciedlać sposób, w jaki klienci już płacą i komunikują się.

Zautomatyzuj tam, gdzie to pomaga. Powtarzające się kroki operacyjne powinny trafić do systemu, gdy automatyzacja sprawia, że proces staje się szybszy i bardziej niezawodny.

Zakończenie

Lumora zaczęła się jako pomysł e-commerce, a następnie przekształciła się w rozwiązanie oparte na pełnej architekturze stackowej, projektowaniu procesów, automatyzacji oraz podejściu skupionym na użytkowniku. Celem nie była tylko strona, na której ludzie kupują ubrania – chodziło o platformę, w której klienci mogliby dokonywać zakupów bez problemów, administratorzy samodzielnie zarządzaliby danymi katalogowymi, zamówienia przechodziłyby przez uporządkowany proces pracy, nabywcy otrzymaliby automatyczne aktualizacje, a firma mogłaby obsługiwać zarówno indywidualne, jak i hurtowe zapytania. To połączenie czyni z Lumory pełnoprawną platformę handlową opartą na potrzebach operacyjnych, a nie tylko na prostej fasadzie sklepowej.

Niezależność katalogu wpływa również na częstotliwość wydawania nowości. Gdy ceny i zdjęcia nie muszą już czekać na kolejny sprint, czas poświęcony inżynierii może zostać przeznaczony na poprawę jakości procesów: dokładniejszą weryfikację zmian, bezpieczniejsze role JWT oraz lepsze przetwarzanie zapytań masowych. Ta zmiana – od edycji treści w pull requestach do pracy nad produktami na platformie – stanowi element tego, co w praktyce oznacza „komercja full-stack” dla firmy odzieżowej.