Перейти к содержимому
Все проекты
02 · ONLINE STORE · DELIVERY FROM EUROPEНа сайт

Brendmart: 600+ orders a month by the time of handover

  • E-commerce
  • Full-Stack
  • SEO

Стек:

  • Nuxt 4
  • Vue 3
  • Pinia
  • Nuxt i18n
  • Nuxt Icon
  • zod
  • VueUse
  • Tailwind CSS
  • daisyUI
  • Laravel
  • Go
  • PostgreSQL
  • Redis
  • RabbitMQ
  • S3 / MinIO
  • ClickHouse
  • Elasticsearch
  • Docker
  • Traefik
  • Kubernetes
  • Argo CD
  • GitLab CI
  • ELK
  • Grafana
  • Prometheus

использовал я

Роль
Fullstack Developer
Команда
2 fullstack developers and a junior frontend developer
Срок
January 2025 – March 2026, launched in May 2025
Статус
Handed over, the store is live

What I did

  • Design and UI kitThe whole site design is mine. The UI kit is built on daisyUI, so the look changes by switching the theme.
  • Nuxt storefrontProposed and introduced Nuxt: the storefront runs as a separate server-rendered app rather than part of a monolith.
  • Admin panel and APIThe client side of the operator's admin panel, the layer of backend requests for the admin panel and the storefront, Laravel API endpoints for the storefront.
  • ReviewReviewed the junior frontend developer's merge requests.

Context

Business

Brendmart sells clothing, shoes and accessories by global brands from European stores, luxury and mass market: Prada, Brunello Cucinelli, Max Mara, Etro, Swarovski. Its customers live in Russia, Belarus and Kazakhstan.

The client buys the item from a foreign seller on the customer's behalf and delivers it to the EAEU countries. The store launched in May 2025.

Process, architecture and decisions

How people buy

  1. 01CatalogThe price already includes delivery and customs duties
  2. 02ConciergeIf an item is not in the catalog, the customer can leave a purchase request
  3. 03CartThe cart and favorites live in a guest session, no sign-up needed
  4. 04DeliveryThe item is bought from a seller in Europe, express delivery from 5 days

Architecture

  • STOREFRONTNuxt storefront

    A separate server-rendered app on Nuxt 4, Pinia, Tailwind and daisyUI. Page data arrives in _payload.json.

  • APIPublic REST

    Cart, favorites, a cached category tree. The guest session goes through a proxy and is kept in a signed cookie.

    • /api/public/v1
    • /cached/categories-tree
    • /proxy/session/guest
  • ADMINOperator admin panel

    The private part where the operator runs the store.

  • BACKENDServices and data

    Laravel and Go, queues on RabbitMQ. PostgreSQL, Redis, Elasticsearch, ClickHouse, S3 / MinIO.

  • INFRAInfrastructure

    Docker, Traefik, Kubernetes and Argo CD, builds in GitLab CI. Logs in ELK, metrics in Grafana and Prometheus.

Pages are built from the API

Changing the home page takes no release. The backend returns the page as a JSON array shaped like a tree, and the storefront builds the page from components according to it.

The home page is built this way, and any other page can be built the same way: content and structure change through the API.

Search, languages and accessibility

Search engines get a ready page from the server, with its own title, description, Open Graph and schema.org WebSite and WebPage markup. The interface is translated into Russian, English and Spanish.

We started adding accessibility support to the storefront: semantic page landmarks, alt text on images, labels on buttons and links, zoom is not blocked.

Integrations

  • Card payments
  • Jivo online chat
  • Yandex Metrica

Data security

For customs clearance the store keeps customers' personal data. Such fields are encrypted in the database with Laravel's built-in tools, and the key is stored apart from the code and the database. Access has two levels: customers and staff (operators and administrators).

Quality and releases

I wrote three kinds of tests: component tests in Vitest, visual regression tests that compare a block with a reference screenshot, and E2E tests in Playwright for critical scenarios.

Each task lives in its own branch and, once merged into develop, goes through CI checks and onto the test stand. On release day a preprod branch is assembled for acceptance in a production-like environment, then master updates the live server without downtime.

  1. develop CI and test stand
  2. preprod final acceptance
  3. master zero-downtime release

Production errors are tracked continuously, and if something goes wrong the release is quickly rolled back to the previous stable version.

Sprints lasted two weeks. At the end of each one the client saw what was done, what was not and why, and together we planned the next two weeks.

Challenges

A storefront apart from the monolith

Проблема
A storefront inside a monolith is hard to develop separately from the backend and cannot be reused on other platforms.
Решение
Proposed and introduced Nuxt. The storefront became a separate server-rendered app that takes its data from the backend's public API.
Итог
The storefront can grow without touching the backend, and mobile apps can be built from the same code by adding Capacitor.

A new look in a day

Проблема
The look often had to change at the client's request, and drawing every variant in Figma takes a long time.
Решение
Built the styling on Tailwind and daisyUI so that the theme switches as a whole, with the store's look moved into its own daisyUI theme. A prototype and theme variants came quickly from GPT-4: we asked it to lay out a prototype and suggest several variants.
Итог
From the client's request to a page prototype in a new theme took no more than an hour. Rebuilding the whole project in a new style takes a day thanks to the daisyUI-based UI kit.

Metrics and results

  • 600+orders a month at handover
  • 2M+products in the catalog
  • ~4 mo.from the start of development to launch
  • ≤ 1 hfor a new theme prototype on the client's request

By handover the store was taking more than 600 orders a month from customers in Russia, Belarus and Kazakhstan.

Need a store with a large catalog that is easy to restyle?

I will design the UI and the UI kit, build a server-rendered Nuxt storefront, the admin panel and the API.