Qwixit: 300+ orders a month


- Role
- Fullstack Developer
- Team
- 3 fullstack developers and a PM
- Timeline
- 3 months to launch
- Status
- Completed, the site is live
What I did
- DesignDesigned the storefront and the admin panel. About 50 reusable components are collected in Storybook and handed over to the client's team: new pages are built from ready blocks, and after handover the client develops the store on their own, without redesigning it.
- Client sideArchitecture and the client side of the storefront and the admin panel in Vue 3 and Pinia, including the layer of requests to the backend. The storefront and the admin panel share components and one request layer, so new sections are added quickly, and the store launched in 3 months.
- Storefront APILaravel endpoints that feed the storefront. They return exactly what a page needs, so a catalog of a million products does not slow down, and the customer gets to the order faster.
- Integrations and SEOPayments, online chat, analytics and a Telegram bot that sends a notification about every order. Yandex Metrica, Google Analytics and the VK pixel show the client where customers come from and which ads pay off. I added SEO as an extra sales channel: set up product page indexing through Yandex Webmaster so customers find products right from search.
Context
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 to launch quickly on a ready-made platform, so the team took tlcommerce as the base and reworked it heavily. Each layer of the architecture answers a specific business need.
- STOREFRONTStorefront
A Vue 3 SPA with Pinia and SASS. Product pages are rendered on the server by Laravel: customers come from search for a specific product, and search engines need a ready page.
- APIModular REST
Catalog, categories and site settings, menus and sliders, sections of the home page and the header, interface dictionaries. The modules are split so the operator can change menus, banners and home page sections without developers.
ecommerce-corethemewidgetslocale
- SERVICESGo modules
Heavy queries and parallel computations live in Go modules, queues run on RabbitMQ. This way a catalog of a million products handles load peaks, and customers do not wait for pages to load.
- DATAStorage
PostgreSQL as the main database, Elasticsearch for search and the catalog, Redis for cache and sessions, ClickHouse for analytics, S3 / MinIO for media. Each storage has its own job: search across a million products and sales reports do not load the main database that holds the orders.
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. All of this is set up in the admin panel, which has a section for each task. 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
connected by me
The catalog is filled automatically, by parsing. A special program goes through the websites of the US stores the client is ready to deliver from and collects their products: names, photos, prices and availability. This is how the catalog reached about a million products without adding each item by hand.
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
The project has three kinds of tests: component tests in Vitest, visual regression tests against reference screenshots of blocks and E2E tests in Playwright for the critical scenarios, from the catalog to payment. They catch bugs before the release, not after customer complaints.
Every task passes CI checks and a test stand, then on the planned release date it goes to a pre-release stand identical to the live site. After acceptance the release rolls out to the live site without downtime, and in case of trouble it can be quickly rolled back to the previous stable version.
- develop test stand
- preprod acceptance
- master live site without downtime
The team worked in two-week sprints. After each one the client saw what was done, what was not and why, and agreed on the plan for the next two weeks together with the team. The well-tuned process directly shaped the result: the store launched in 3 months, releases did not break checkout, and 2.5 months after launch the client reached the goal of 300+ orders a month.
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
- Problem
- 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.
- Solution
- I moved to the server only what search needs: product pages are rendered by Laravel, the rest stayed on the client.
- Result
- Product pages are served from the server, and search engines see the H1, the price and the schema.org markup: Product, BreadcrumbList, Organization, FAQPage.
A million products and the load
- Problem
- Complex queries and heavy computations over the catalog loaded the main database.
- Solution
- 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.
- Result
- 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 2.5 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.