Taobao.at: 600+ orders a month by handover
- Роль
- Fullstack Developer
- Команда
- 2 fullstack developers and a junior frontend developer
- Срок
- January 2025 – March 2026
- Статус
- Completed, the site is live
What I did
- Design and UI kitThe site design is entirely mine. The UI kit is built on Tailwind and daisyUI with a custom theme, so the look changes by switching the theme.
- Storefront in NuxtI proposed making the storefront a separate Nuxt application with server-side rendering and built its client side myself: Pinia, Russian and English interface, the layer of API requests.
- Admin panelThe client side of the operator workspace and its requests to the backend.
- Storefront APILaravel endpoints that feed the storefront.
Context
Business
The client purchases and delivers products from China and Hong Kong. Its customers live in Russia and order IKEA, Apple devices for the Hong Kong market, clothing and shoes from Farfetch, computer components.
If an item is not in the catalog, it can be ordered with a purchase request.
Process, architecture and decisions
The order flow
The catalog price is in rubles right away and already includes duties, the service fee and delivery. After that an order goes through four steps.
- 01OrderFrom the catalog or with a purchase request. The cart and favorites work without signing up
- 02PaymentBy a MIR card or via SBP
- 03CheckThe order is checked for completeness before shipping
- 04Delivery17–28 days to Russia, the status is visible in the personal account. Pickup point or courier
Architecture
The storefront lives separately from the backend. It is easier to develop, and mobile apps can be built from the same code by adding Capacitor.
- STOREFRONTStorefront
Nuxt 4 with server-side rendering, Pinia and Nuxt i18n, a UI kit on Tailwind and daisyUI.
- APIPublic API
Cart, favorites and product blocks for the home page. The guest session relies on a signed cookie, so the customer does not have to sign up in advance.
/api/public/v1catalog/block-products
- ADMINAdmin panel
The workspace of the service operators.
- BACKENDServices and data
Laravel and Go, queues on RabbitMQ. Data in PostgreSQL, Redis, Elasticsearch, ClickHouse and S3 / MinIO.
- INFRAInfrastructure
Docker and Kubernetes, rollout via GitLab CI and Argo CD, traffic through Traefik and Envoy. Monitoring on Grafana, Prometheus and ELK.
Pages are built from the API
The structure and content of a page can change without a storefront release. The backend returns a JSON array shaped like an abstract syntax tree, and the storefront builds the page from it.
The home page is built this way, and its product blocks come from catalog/block-products. Any other page can be built the same way.
Data security
For customs clearance the service stores customers' personal data. Sensitive fields are encrypted in the database with Laravel's built-in tools, and the key is stored separately from both the code and the database. Permissions are split between customers, operators and administrators.
Quality and releases
I was responsible for three kinds of tests: component tests on Vitest, visual regression tests that compare blocks against reference screenshots, and E2E tests on Playwright for critical scenarios. The junior frontend developer's code went through my review.
A task from its own branch goes into develop, passes the automated tests and code quality checks and is deployed to the test environment. On the planned release date the finished tasks are gathered into preprod, where final testing and acceptance run in an environment identical to production. Then the release is merged into master and updates production without downtime. If something breaks in production, it is possible to quickly return to the previous stable version.
- develop test environment
- preprod acceptance
- master production without downtime
Sprints lasted two weeks. At the end of each one the client saw what was done, what was not and why, and what was planned for the next two weeks.
Challenges
Accessibility in the UI kit
- Решение
- Accessibility is built into the UI kit itself: semantic page regions, a visible focus and a logical keyboard order, alt text on images, accessible names on buttons and links. Zooming is allowed, and the screen notch on phones is taken into account.
- Итог
- An axe-core check against WCAG 2.2 AA and a manual keyboard pass on the home page, a category and a product page, on desktop and on a phone, found one violation. The brand red gives a contrast of 4.1:1 against the required 4.5:1, which is fixed by darkening the red a couple of shades in the daisyUI theme.
A new look in a day
- Проблема
- The client came with requests for a new storefront style, and it had to be shown and rolled out quickly.
- Решение
- I chose Tailwind and daisyUI: the UI kit components take their look from a theme, the custom taobao_v2 or the standard light and dark. The prototype of a new theme was generated with GPT-4.
- Итог
- By my estimate, without measurements: a prototype page in the new style is ready in under an hour after the request, and rebuilding the site takes no more than a day.
Metrics and results
- 600+orders a month at handover
- 2M+products in the catalog at handover
Need a cross-border delivery service or a storefront that can be restyled in a day?
I will design an accessible UI kit, build the storefront in Nuxt and the API behind it.