Art Kormushka online store
PRODUCTS FOR BIRDS AND NATURE

ART KORMUSHKA

ONLINE STOREE-COMMERCEBACKENDUX/UIFRONTENDPOMMEDETERREFULL CYCLE · 2026
CLIENT
Art KormushkaOnline store2026
SERVICES
UX/UI designFrontend developmentBackend developmentIntegrationsServer infrastructure

PROJECT GOAL

Create an online store where customers quickly find products, see the delivery price and date, pay securely, and track orders. For the business, automate sales, delivery, payments, and repeat purchases.

END TO END

We delivered the entire digital product end to end: designed the UX and visual system, developed the frontend and backend, configured the server infrastructure, integrated delivery and payment modules, and built a custom bonus system.

VISUAL SYSTEM

COLORS

(01)
PALETTE

The palette is based on natural tones associated with the products and their environment. The warm milk background keeps the catalogue light without competing with product photography, graphite ensures readability, while olive expresses the brand’s ecological character and provides accents. Light sage separates secondary surfaces and states without adding visual noise.

Warm Milk
RGB
253, 250, 244
HEX
#FDFAF4
Graphite
RGB
45, 45, 45
HEX
#2D2D2D
Olive
RGB
92, 105, 61
HEX
#5C693D
Light Sage
RGB
220, 230, 197
HEX
#DCE6C5

TYPOGRAPHY

(02)
TYPEFACES

Raleway defines the store’s primary visual voice, from large headings to navigation and body copy. Its range of weights creates a clear hierarchy while preserving a consistent interface character.

Primary typeface · 300–700Raleway

Аа Бб Вв Гг 0123456789

  • Display61 px
  • Page title49 px
  • Section title31 px
  • Large body18 px
  • Body16 px
  • Labels13 px

CUSTOMER JOURNEY

Catalogue and products

We helped customers move from a complex assortment to a suitable model through a clear selection structure.

WHAT NEEDED TO BE SOLVED

Feeder characteristics vary widely, so choosing from a photograph alone was not enough.

UX SOLUTION

Categories, search, and filters progressively narrow the range, while the product page surfaces what matters for purchase.

RESULT

Customers compare models faster and move to purchase, while the team manages a consistent catalogue in the admin panel.

KEY DECISIONS
  • (01)A custom attribute model instead of a fixed filter preset
  • (02)Filtering by product type, mounting method, colour, and other meaningful parameters
  • (03)Linked parameters in catalogue filters and product pages
  • (04)Detailed specifications for every model in a consistent format
  • (05)Self-service product and category management without code changes
  • (06)Price and add-to-cart action directly in the catalogue

Desktop & Mobile

(01)
Catalogue with categories
Desktop 1920px
Catalogue with categories — Desktop
Mobile375px
Catalogue with categories — Mobile
(02)
Catalogue search
Desktop 1920px
Catalogue search — Desktop
Mobile375px
Catalogue search — Mobile
(03)
Product filtering
Desktop 1920px
Product filtering — Desktop
Mobile375px
Product filtering — Mobile
(04)
Product page
Desktop 1920px
Product page — Desktop
Mobile 1/3375px
Product page — Mobile 1/3
Mobile 2/3375px
Product page — Mobile 2/3
Mobile 3/3375px
Product page — Mobile 3/3
(05)
Product specifications
Desktop 1920px
Product specifications — Desktop
Mobile375px
Product specifications — Mobile
Desktop
1920px
(01)
Catalogue with categories
Catalogue with categories — Desktop
(02)
Catalogue search
Catalogue search — Desktop
(03)
Product filtering
Product filtering — Desktop
(04)
Product page
Product page — Desktop
(05)
Product specifications
Product specifications — Desktop
Mobile
375px
(01)
Catalogue with categories
Catalogue with categories — Mobile
(03)
Product filtering
Product filtering — Mobile
(05)
Product specifications
Product specifications — Mobile
(02)
Catalogue search
Catalogue search — Mobile
(04)
Product page
Mobile1/3
Product page — Mobile 1/3
Mobile2/3
Product page — Mobile 2/3
Mobile3/3
Product page — Mobile 3/3

Catalogue search

Search became a second route through the assortment: customers can find a product by its name, article number, material, colour, mounting method, or another known characteristic.

WHAT NEEDED TO BE SOLVED
Search beyond exact names

Customers do not always know the product name used in the catalogue. A useful search therefore had to recognise words from descriptions and characteristics, tolerate incomplete queries, and remain fast as the assortment grew.

One source of product data

Search results, filters, prices, and availability had to stay consistent with the catalogue instead of becoming a separate manually maintained copy.

UX SOLUTION
A dedicated search index

Products and their searchable attributes are synchronised from the commerce backend to Meilisearch. The index includes names, descriptions, article numbers, categories, and the parameter values customers use to identify a model.

Results that remain part of the catalogue

Search opens a normal product listing with the same cards, availability, prices, and filtering rules as category pages. A customer can begin with a broad phrase and then narrow the result by meaningful parameters.

Controlled empty and partial states

The interface explains when no exact match is found and lets the customer adjust the query or return to the catalogue. Product links remain ordinary navigable links, so search supplements rather than replaces the catalogue structure.

RESULT

Customers can find a model using the information they already know and continue refining the result with catalogue filters. The business maintains product data once: updates to a product are reflected in both catalogue presentation and the search index.

KEY DECISIONS
  • (01)A dedicated Meilisearch index
  • (02)Search across names, categories, article numbers, and characteristics
  • (03)Live result preview in the header
  • (04)Tolerance for minor typing errors
  • (05)Separate results for visually distinct variants
  • (06)A complete results page with result count and pagination
  • (07)Current prices and availability from the primary commerce system
  • (08)Automatic index updates with draft-product protection

Checkout and payment

We combined the cart, contact details, and payment into one sequential checkout flow.

WHAT NEEDED TO BE SOLVED

Customers needed to place an order without repeated input or unexpected changes to the final total.

UX SOLUTION

Checkout moves from the cart and contact details to secure payment through Robokassa.

RESULT

Customers stay in control of the order contents and total, while payment and status remain in one system.

KEY DECISIONS
  • (01)Autofill for account contacts and saved addresses
  • (02)A sequential path from contact details to delivery and payment
  • (03)Server-side validation of the cart, delivery, discounts, and rewards
  • (04)Bank-card and Faster Payments System payments through Robokassa
  • (05)A safe retry after a payment error
  • (06)Fiscal receipts, automatic cancellation, and refunds through the API

Desktop & Mobile

(01)
Cart and final total
Desktop 1920px
Cart and final total — Desktop
Mobile 375px
Cart and final total — Mobile
(02)
Contact details and consent
Desktop 1920px
Contact details and consent — Desktop
Mobile 375px
Contact details and consent — Mobile
(03)
Card or Faster Payments System payment
Desktop 1920px
Card or Faster Payments System payment — Desktop
Mobile 375px
Card or Faster Payments System payment — Mobile
Desktop
1920px
(01)
Cart and final total
Cart and final total — Desktop
(02)
Contact details and consent
Contact details and consent — Desktop
(03)
Card or Faster Payments System payment
Card or Faster Payments System payment — Desktop
Mobile
375px
(01)
Cart and final total
Cart and final total — Mobile
(03)
Card or Faster Payments System payment
Card or Faster Payments System payment — Mobile
(02)
Contact details and consent
Contact details and consent — Mobile

Payment Flow

(01)
Payment method selection
Desktop 1920px
Payment method selection — Desktop
Mobile 375px
Payment method selection — Mobile
(02)
Card or Faster Payments System payment
Desktop 1920px
Card or Faster Payments System payment — Desktop
Mobile 375px
Card or Faster Payments System payment — Mobile

Delivery module

We developed and connected a Yandex Delivery module through its API, with precise address entry, pickup-point selection on a map, and automatic cost and ETA calculation. For express delivery, the interface shows Yandex's dynamic ETA with the store's preparation time added.

WHAT NEEDED TO BE SOLVED

Delivery had to work inside the store, prevent address errors, and show available methods, prices, and dates in advance.

UX SOLUTION
Delivery options before payment

The geocoder validates courier addresses, Yandex Delivery calculates available tariffs, and pickup points are selected on an interactive map. The chosen method, address, cost, and estimated date are saved with the cart and shown before payment. A saved address also enables an estimate on the product page.

Fulfilment only after assembly confirmation

After successful payment, the server creates the Medusa order and places it in the assembly queue. It does not create a Yandex shipment at this stage. Once a manager confirms assembly and creates the standard Medusa fulfilment, the server sends the verified shipment data to Yandex, saves the external request number, and receives the official tracking link. This keeps warehouse confirmation as the required boundary before hand-off to the carrier.

RESULT

Customers know when the order will arrive and what delivery will cost. The chosen method and address are stored with the order automatically.

KEY DECISIONS
  • (01)Pickup points, lockers, courier, express, and cargo delivery through one provider
  • (02)Preliminary delivery time and availability on the product page
  • (03)City detection with a required confirmation or change option
  • (04)Yandex Geosuggest for one-line address entry
  • (05)Server-side verification of the exact building and coordinates through Yandex Geocoder
  • (06)The official pickup-point widget with a fallback list if the map fails
  • (07)Dynamic tariff calculation instead of static prices
  • (08)Shipment creation only after assembly confirmation
  • (09)Status and tracking-link synchronisation without manual re-entry

Desktop & Mobile

(01)
Delivery date on the product page
Desktop 1920px
Delivery date on the product page — Desktop
Mobile 375px
Delivery date on the product page — Mobile
(02)
Address entry with geocoder suggestions
Desktop 1920px
Address entry with geocoder suggestions — Desktop
Mobile 375px
Address entry with geocoder suggestions — Mobile
(03)
Available delivery methods
Desktop 1920px
Available delivery methods — Desktop
Mobile 375px
Available delivery methods — Mobile
(04)
Selecting a pickup point on the map
Desktop 1920px
Selecting a pickup point on the map — Desktop
Mobile 375px
Selecting a pickup point on the map — Mobile
Desktop
1920px
(01)
Delivery date on the product page
Delivery date on the product page — Desktop
(02)
Address entry with geocoder suggestions
Address entry with geocoder suggestions — Desktop
(03)
Available delivery methods
Available delivery methods — Desktop
(04)
Selecting a pickup point on the map
Selecting a pickup point on the map — Desktop
Mobile
375px
(01)
Delivery date on the product page
Delivery date on the product page — Mobile
(03)
Available delivery methods
Available delivery methods — Mobile
(02)
Address entry with geocoder suggestions
Address entry with geocoder suggestions — Mobile
(04)
Selecting a pickup point on the map
Selecting a pickup point on the map — Mobile

Orders and customer account

We placed everything customers need after purchase in one place: status, delivery, order history, and saved details.

WHAT NEEDED TO BE SOLVED

After payment, customers needed to understand order status independently and avoid entering the same details on the next purchase.

UX SOLUTION
Order status and repeat purchases

The account shows contents, payment, assembly, and delivery stages, while the profile and address book accelerate repeat checkout. Tracking uses the official carrier link stored with the fulfilment.

Cancellation and return branches

If no external shipment exists, the standard Medusa cancellation workflow is used. If an active but unshipped Yandex fulfilment already exists, the server first obtains an admissible cancellation response from the provider, then cancels the order, releases reservations, and starts a full refund of captured payment.

For an already shipped Other-Day or pickup-point order, ordinary cancellation becomes a recall and Return: the payment refund starts after Yandex accepts the stop request and a Return is created in Medusa, while inventory is restored only after the goods physically return. An express order cannot be cancelled automatically after courier hand-off and requires Yandex support.

RESULT

Customers control their order independently and reuse saved details during the next checkout.

KEY DECISIONS
  • (01)Sign-in by email or Yandex ID
  • (02)An overview of active orders and profile status
  • (03)Purchase history with detailed payment and delivery states
  • (04)A unified state model across Medusa, Robokassa, and Yandex Delivery
  • (05)Saved courier addresses and pickup points
  • (06)Repeat ordering with current prices and availability
  • (07)Two-step cancellation and a coordinated logistics return
  • (08)Automatic updates for active orders

Desktop & Mobile

(01)
Customer account overview
Desktop 1920px
Customer account overview — Desktop
Mobile 375px
Customer account overview — Mobile
(02)
Order history
Desktop 1920px
Order history — Desktop
Mobile 375px
Order history — Mobile
(03)
Saved addresses
Desktop 1920px
Saved addresses — Desktop
Mobile 375px
Saved addresses — Mobile
(04)
Profile and contact details
Desktop 1920px
Profile and contact details — Desktop
Mobile 375px
Profile and contact details — Mobile
Desktop
1920px
(01)
Customer account overview
Customer account overview — Desktop
(02)
Order history
Order history — Desktop
(03)
Saved addresses
Saved addresses — Desktop
(04)
Profile and contact details
Profile and contact details — Desktop
Mobile
375px
(01)
Customer account overview
Customer account overview — Mobile
(03)
Saved addresses
Saved addresses — Mobile
(02)
Order history
Order history — Mobile
(04)
Profile and contact details
Profile and contact details — Mobile

Bonus system

We made a custom rewards programme a clear continuation of the customer journey.

WHAT NEEDED TO BE SOLVED

Rewards had to encourage repeat purchases and remain correct across payment, cancellation, and return scenarios.

UX SOLUTION
PROGRAMME RULES
Welcome rewards

300 rewards are added after registration.

Earning

3% of the paid product value is credited after the order reaches the eligible state.

Spending

Rewards can cover up to 20% of product value, subject to the programme rules.

Pending balance

Newly earned rewards remain pending until the order fulfils the programme conditions.

Cancellation

Reserved rewards are released and the corresponding earning operation is reversed.

Return

The balance is recalculated against the products actually retained after the return.

Transaction history

Every credit, reservation, spend, release, and reversal remains visible in the account.

Server-side control

The backend validates limits and protects financial operations from duplicate execution.

The account separates available and pending balances, shows transaction history, and explains earning and spending rules.

RESULT

Customers understand when and how to use rewards, while the business manages the programme without manual balance reconciliation.

Bonus System

(01)
Balance and transaction history
Desktop 1920px
Balance and transaction history — Desktop
Mobile 375px
Balance and transaction history — Mobile
(02)
Rewards programme conditions
Desktop 1920px
Rewards programme conditions — Desktop
Mobile 375px
Rewards programme conditions — Mobile
Desktop
1920px
(01)
Balance and transaction history
Balance and transaction history — Desktop
(02)
Rewards programme conditions
Rewards programme conditions — Desktop
Mobile
375px
(01)
Balance and transaction history
Balance and transaction history — Mobile
(02)
Rewards programme conditions
Rewards programme conditions — Mobile

Administration and warehouse assembly

We adapted the Medusa administration area to the store’s operating process: catalogue management, paid-order assembly, documents, fulfilment, returns, and rewards are connected in one workflow.

WHAT NEEDED TO BE SOLVED
Turn an order into warehouse actions

A generic order screen was not enough for day-to-day assembly. Employees needed a queue of paid orders, product-level picking information, batch actions, documents, and a controlled transition to delivery.

Keep critical operations consistent

Before documents, assembly, or fulfilment are created, the server must verify the current payment, cancellation, and fulfilment state so that stale admin data cannot trigger an invalid action.

UX SOLUTION
A dedicated assembly queue

Paid orders enter a warehouse view where employees can select a batch, inspect photographs, article numbers and quantities, and produce the documents needed for picking, packing, and cargo units. The exports are generated from current order data rather than copied into spreadsheets.

A controlled boundary before delivery

Payment does not automatically create a Yandex shipment. The employee picks the products, confirms assembly, and creates the Medusa fulfilment; only then does the backend send verified data to Yandex and store the tracking details.

Catalogue management without a developer

Administrators manage categories, content, characteristics, variants, images, prices, stock, installation instructions, and the Ozon link. Category-specific fields keep catalogue, logistics, and SEO data aligned. Warehouse, rewards, and broader administrative permissions are separated by role.

RESULT

Employees work through one sequence instead of reconciling an admin panel, spreadsheets, and the carrier account. Product and shipment documents use current order data, while server-side checks and separated permissions protect critical operations. The business can update the assortment and operating rules without routine code changes.

KEY DECISIONS
  • (01)Dedicated warehouse and assembly queue
  • (02)Separate payment, assembly, and delivery stages
  • (03)Batch order selection and keyboard shortcuts
  • (04)PDF exports for products, orders, and cargo units
  • (05)Official labels and a combined ZIP package
  • (06)Server-side order revalidation before actions
  • (07)Category-specific product and variant characteristics
  • (08)Separate warehouse and administrator permissions

SEO and search accessibility

SEO was built into the store architecture so that products can be found for specific queries, legacy links continue to work after migration, and new catalogue items enter search and product feeds automatically.

WHAT NEEDED TO BE SOLVED
A crawlable catalogue

Categories, products, and information pages had to expose complete content and ordinary links to search crawlers.

Migration and duplicate control

Legacy product and category URLs needed permanent destinations, while filters, sorting, and pagination required explicit indexing rules to prevent duplicate pages.

UX SOLUTION
Search engines receive complete pages

Categories and product pages are rendered on the server, exposing names, prices, descriptions, and links without requiring a crawler to run the interactive interface. Dedicated category landing pages cover meaningful assortment directions.

Stable URLs and controlled indexation

Legacy URLs redirect permanently to corresponding current content. Filtered and sorted combinations are excluded from indexing and point to the canonical category, while paginated pages remain crawlable so deeper products can be discovered.

Current structured product data

Product pages generate titles, descriptions, canonical URLs, breadcrumbs, and Product JSON-LD from current store data. Sitemap, robots.txt, Google Merchant, and Yandex YML feeds are generated from the catalogue; service pages are excluded. Confirmed purchases, rather than unverified checkout visits, are sent to Yandex Metrica.

RESULT

Search engines receive complete pages, stable addresses, and current product data. New products and categories enter metadata, structured data, sitemap, and feeds without manual file editing. Actual traffic, ranking, and order growth remain outcomes to measure separately in webmaster and analytics tools.

KEY DECISIONS
  • (01)Server rendering for indexable page content
  • (02)Dedicated catalogue search directions
  • (03)Consistent canonical and hierarchical URLs
  • (04)Permanent redirects from legacy URLs
  • (05)Filter indexation control and crawlable pagination
  • (06)Product JSON-LD and breadcrumbs
  • (07)Generated sitemap, robots.txt, and product feeds
  • (08)Analytics tied to confirmed purchases

Store and payment security

Security was built into account access, order operations, pricing, payments, rewards, cancellations, and returns. Customers receive predictable protected actions, while the business relies on amounts and outcomes verified by the server.

WHAT NEEDED TO BE SOLVED
Protect personal and order data

Contacts, addresses, and purchase history must be accessible only to their owner.

Prevent amount tampering and duplicate operations

The browser can display prices and discounts but cannot be trusted as the final authority. Delayed callbacks, retries, and double clicks must not create a second order, reward operation, or refund.

UX SOLUTION
Protected sessions and ownership checks

The site uses HTTPS and an HttpOnly session cookie with protective attributes. Yandex ID login validates the one-time state and allowed return address. The backend checks ownership whenever an account opens, repeats, cancels, or returns an order, and applies the same boundary to carts, rewards, addresses, and tracking.

Server-controlled totals and payment confirmation

Before payment, the server recalculates the cart and stores a fixed checkout state. Card details remain on the official Robokassa form. A browser redirect does not establish payment: the backend verifies the signed server notification, invoice, exact amount, and payment-session relationship.

Idempotent financial workflows

Payments, rewards, cancellations, and refunds use idempotency and server-side locking. Conflicting financial data stops automatic processing for reconciliation. Public APIs expose only the customer-facing order fields, while sensitive endpoints have dedicated rate limits.

RESULT

Personal data and purchase history remain restricted to the account owner, card details do not pass through the store, and repeated input does not trigger duplicate financial operations. The business calculates totals and confirms payments on the server, reducing the risk of unauthorised access, amount substitution, unpaid fulfilment, or duplicate refunds.

KEY DECISIONS
  • (01)HTTPS and a protected HttpOnly session
  • (02)Server-side ownership checks for orders and carts
  • (03)Server-side total recalculation before payment
  • (04)Robokassa signature, invoice, and amount verification
  • (05)Idempotency for payments, rewards, and refunds
  • (06)Automatic stop on conflicting financial data
  • (07)Restricted public order representation
  • (08)Rate limits for sensitive APIs

TECHNOLOGY

The store stack, from interface to production infrastructure

The project combines a separate storefront, commerce backend, administration panel, search, background processing, and external services. These are the technologies used in the store code and infrastructure.

  • Storefront and interface

    Server-rendered store pages, a responsive interface, accessible components, and animation.

    Next.js 15React 19TypeScriptTailwind CSSPostCSSAutoprefixerGSAPScrollTriggerHeadless UIRadix UIMedusa JS SDKlibphonenumber-js
  • Commerce and data

    Catalogue, customers, orders, inventory, rewards, and administrative workflows share one commerce layer.

    Medusa 2Medusa AdminMedusa UIMedusa Workflow EnginePostgreSQL 16Redis 7TanStack QueryReact Routerreact-i18nextZod
  • Search and content processing

    The search index, images, warehouse documents, and product feeds are generated automatically.

    MeilisearchSharpPDFKitJSZipFast XML ParserGoogle Merchant FeedYandex YMLSchema.org JSON-LD
  • Delivery and geodata

    Addresses are validated, tariffs calculated, pickup points selected on a map, and delivery statuses synchronised with orders.

    Yandex Delivery APIYandex pickup-point widgetYandex GeoSuggestYandex GeocoderIPWho.is
  • Payments and communications

    Payment, authentication, transactional email, and ecommerce analytics are connected to order state.

    RobokassaFaster Payments SystemYandex ID OAuthUniSender GoYandex Metrica Ecommerce
  • Infrastructure and quality

    Applications are built, tested, and run as separate managed services with a reproducible release process.

    Node.js 20npm WorkspacesTurborepoDocker ComposeNginxsystemdLet’s EncryptGitHub ActionsViteSWCJestESLintDependabotGit LFS
06

PROJECT OUTCOME

Launched a full-cycle online store

We created a unified e-commerce platform, from the catalogue and parameter-based product selection to delivery, payments, customer accounts, rewards, and administrative management.

Open the Art Kormushka website