E-Core and Metro OTC
2024
Metro OTC LLC.
Opracowałem i uruchomiłem nowoczesną stronę internetową e-commerce dla firmy Metro OTC.
Projekt obejmował stworzenie spersonalizowanego rdzenia, który umożliwia tworzenie sklepów dla różnych marek w ramach ekskluzywnych umów z firmami ubezpieczeniowymi.
Do tego celu wykorzystano nową technologię Layers, która zadebiutowała w Nuxt 3.
Zastosowanie tej technologii oraz specjalnego podejścia do kompozycji komponentów umożliwiło stworzenie uniwersalnego rdzenia, który można nie tylko dostosować pod markę, zmieniając wygląd wizualny, ale także wprowadzać w pełni niestandardowe bloki, pola profilu i unikalne metody płatności. Przy tym rdzeń pozostaje wspólny dla wszystkich sklepów, co umożliwia szybką i bezbolesną aktualizację dla wszystkich klientów.
![e-core main page](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg1.png&w=1536&q=100)
![e-core main page](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg2.png&w=1536&q=100)
Metro OTC
Głównym projektem na nowym silniku stał się własny e-commerce firmy Metro OTC.
W ramach tego projektu zaimplementowano zarówno dość typowe elementy dla e-commerce, jak:
- Trzy rodzaje uwierzytelniania: za pomocą jednorazowych kodów SMS lub e-mail oraz za pomocą hasła
- Strona profilu użytkownika z możliwością edycji danych
- Koszyk i strona składania zamówienia z możliwością wyboru metody dostawy i płatności
- Strona katalogu produktów i strona produktu
- Opcje produktu: wybór koloru, rozmiaru itp.
Jak i bardziej specyficzne:
- Inteligentne wyszukiwanie produktów z wektorem tekstowym: "przebacza" błędy w pisowni, uwzględnia opisy produktów, marki i inne atrybuty
- Płatność kartami ubezpieczeniowymi: jedna poprzez integrację z API, druga z ręcznym potwierdzeniem w back-office
- Rozbudowany system rabatów za pomocą kodów promocyjnych, gdzie zastosowanie rabatu oraz jego wielkość mogą zależeć od różnych warunków
- Koszyk w pamięci
- Dwupoziomowa google reCAPTCHA: V3 działa niezauważalnie dla użytkownika, V2 - w przypadku podejrzanej aktywności
- Możliwość filtrowania produktów według planu ubezpieczeniowego
- Przywracanie pozycji przewijania po powrocie do katalogu ze strony produktu
![Metro OTC login page](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg3.png&w=1536&q=100)
![Metro OTC main page](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg4.png&w=1536&q=100)
![Inteligentne wyszukiwanie Metro OTC](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg5.png&w=1536&q=100)
![Metro OTC product page](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg6.png&w=1536&q=100)
![Metro OTC ordering](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg7.png&w=1536&q=100)
![Metro OTC profile](/_vercel/image?url=%2Fprojects%2Fecore%2Fimg8.png&w=1536&q=100)
Rozpocząłem i zrealizowałem główne części samodzielnie, w późniejszych etapach pojawił się mały zespół do finalizacji projektu. Dzięki temu mogłem skoncentrować się na architekturze i dokumentacji, a także wykazać się jako lider zespołu.