Qwixit: 300+ orders a month a few months after launch
- Роль
- Fullstack Developer
- Команда
- 3 fullstack developers and a PM
- Срок
- About 3 months to production
- Статус
- Completed, the site is live
What I did
- The whole designThe storefront and the admin panel. About 50 reusable components are collected in Storybook and handed over to the client's team.
- FrontendFrontend architecture and the client side of the storefront and the admin panel in Vue 3 and Pinia, including the layer of requests to the backend.
- Storefront APILaravel API endpoints that feed the storefront.
- Integrations and SEOPayments, online chat, all the analytics and a Telegram bot that sends a notification about every order. The team had no SEO specialist, so I worked with Yandex Webmaster myself.
Context and starting point
Business
The client, the US company Pochtoy LLC, runs its own warehouse in Delaware. Its customers live in Russia and want genuine products from US stores and brands: New Balance, Nike, Adidas, Levi's, Tommy Hilfiger, Ralph Lauren, Calvin Klein, Michael Kors, Coach, iHerb.
The situation
US stores do not accept Russian cards and do not ship to Russia. The service covers the whole chain: the price is in rubles right away, payment by a Russian card or via SBP, a buyer purchases the item, delivery to a pickup point.
The client had no platform at all: neither a website nor an ordering process.
The goal
orders a month. Launch on a ready-made platform instead of building a store from scratch. The stack was set by the client and their team.
Process, architecture and decisions
The order flow
The whole product is built around one chain, which the customer sees on the product page as the estimated delivery date.
- 01PaymentBy a Russian card or via SBP, the price is in rubles right away
- 02PurchaseA buyer purchases the item within an hour
- 03WarehouseDelaware, 4–7 days from the store
- 04DeliveryFlights on Tuesdays and Thursdays, then CDEK: about 5 days to Moscow and Saint Petersburg, 10 days or more to the regions
Architecture
The client wanted a ready-made platform, so the team took tlcommerce as the base and reworked it heavily.
- STOREFRONTStorefront
A Vue 3 SPA with Pinia and SASS. Product pages are rendered on the server by Laravel.
- APIModular REST
Catalog, categories and site settings, menus and sliders, sections of the home page and the header, interface dictionaries.
ecommerce-corethemewidgetslocale
- SERVICESGo modules
Heavy queries and parallel computations live in Go modules, queues run on RabbitMQ.
- DATAStorage
PostgreSQL as the main database, Elasticsearch for search and the catalog, Redis for cache and sessions, ClickHouse for analytics, S3 / MinIO for media.
A store that runs without developers
The operator manages orders, products, promo codes and bonuses, changes banners and turns on holiday themes, for example for New Year. No release is needed for that: the home page and the header are assembled from widgets that come from the API.
Interface texts are loaded from a separate locale endpoint, so more languages can be added without a rewrite.
Integrations
- Payments by Russian cards and SBP
- me-talk online chat
- Yandex Metrica
- Google Analytics
- VK pixel
- Telegram order bot
- CDEK · 25,000+ pickup points in 470 cities
- Maestra · newsletters and subscription pop-ups
подключал я
The catalog is filled by parsing the websites of the stores the client is ready to deliver from.
Data security
The service handles personal data of customers, including the data required for customs clearance. Sensitive fields are stored encrypted in the database, and the encryption key is kept apart from the code and the database. Access is split by roles: customer, operator, administrator.
Quality and releases
I wrote component tests in Vitest, visual regression tests against reference screenshots of blocks and E2E tests in Playwright for the critical scenarios.
Every task passes CI checks and a test stand, then on the planned release date it goes to a preprod stand identical to production. After acceptance the release rolls out to production without downtime, and in case of trouble it can be quickly rolled back to the previous stable version.
- develop test stand
- preprod acceptance
- master production without downtime
We worked in two-week sprints. After each one we showed the client what was done, what was not and why, and agreed on the plan for the next two weeks.
At handover the client's team received the documentation: step-by-step setup, environment variables, the list of integrations, and Storybook with the components of the storefront and the admin panel.
Challenges
SEO for an SPA
- Проблема
- A customer comes from search looking for a specific product, while most of the storefront is a client-side Vue 3 app that search engines index poorly.
- Решение
- I moved to the server only what search needs: product pages are rendered by Laravel, the rest stayed on the client.
- Итог
- Product pages are served from the server, and search engines see the H1, the price and the schema.org markup: Product, BreadcrumbList, Organization, FAQPage.
- Сделал бы иначе
- I would move the client side to a separate Nuxt app: the catalog is only partly rendered on the server, and the home page and the information pages stayed client-side.
A million products and the load
- Проблема
- Complex queries and heavy computations over the catalog loaded the main database.
- Решение
- As a team we rewrote some modules in Go for complex queries and parallel computations, and put Elasticsearch in front of the database to serve products fast.
- Итог
- Search and the catalog do not overload the database, and load peaks passed without noticeable problems.
Metrics and results
- 300–500orders a month
- ~1Mproducts in the catalog at handover
- 40–70kvisitors a month
- ~3 moof development before launch
The client's goal of 300+ orders a month was reached a few months after launch.
Need an online store with a large catalog or sales to another country?
I will design the storefront and the admin panel, build them, connect payments and analytics and take the store to launch.