Project details

E-Core and Metro OTC

2024

Metro OTC LLC.

I developed and launched a modern e-commerce website for the company Metro OTC.

The project involved creating a customizable core that allows for the creation of stores for different brands under exclusive contracts with insurance companies.

To achieve this, I utilized the new Layers technology that debuted in Nuxt 3.

The application of this technology, along with a special approach to component composition, allowed for the creation of a universal core that can not only be branded by changing the visual design but also integrate fully custom blocks, profile fields, and unique payment methods. Furthermore, the core remains common for all stores, enabling quick and seamless updates for all clients.

e-core main page
General interface view of the core project
e-core main page
Adaptive layout of the core project

Metro OTC

The main project on the new engine became the in-house e-commerce of the company Metro OTC.

Within this project, both typical e-commerce features were implemented, such as:

  • Three types of authentication: using one-time codes via SMS or email, as well as with a password
  • User profile page with data editing capabilities
  • Cart and checkout page with options for choosing delivery and payment methods
  • Product catalog page and product page
  • Product options: color selection, size, etc.

As well as more specific features were implemented:

  • Smart product search with a text vector: "forgives" spelling errors, considers product descriptions, brands, and other attributes
  • Payment by insurance cards: one through API integration, the other with manual confirmation in the back office
  • Advanced discount system through promo codes, where the discount applicability and amount can depend on various conditions
  • In-memory cart
  • Two-layered Google reCAPTCHA: V3 works discreetly for the user, V2 - in case of suspicious activity
  • Ability to filter products by insurance plan
  • Restoring scroll position when returning to the catalog from the product page
Metro OTC login page
Authorization Metro OTC
Metro OTC main page
Main Page Metro OTC
Smart Search Metro OTC
Smart Search Metro OTC
Metro OTC product page
Product Page Metro OTC
Metro OTC ordering
Order confirmation
Metro OTC profile
Profile page

I started and implemented the main parts of the project single-handedly, and at later stages, I had a small team to finalize the project. This allowed me to focus on architecture and documentation, as well as showcase my leadership skills.

Nuxt 3Vue 3TypeScriptTailwind CSSSymfony