основное изображение проекта

Vibox

Е-commerce платформа для покупки/продажи игровых компьютеров с конструктором системных блоков

изображение проекта
Клиент

Великобритания

Описание

Веб-платформа для покупки уникальных игровых компьютеров с управлением через CMS админ панель, где можно создавать информационные страницы с фильтрами по бюджету, FPS, играм, процессорам и другим параметрам.  

Пользователь может приобрести готовый ПК или собрать индивидуальную конфигурацию в конструкторе, где система проверяет совместимость компонентов.  

Интегрирован FPS сервис, который помогает выбрать оптимальный набор компонентов под конкретные игры.  

Компьютеры сгруппированы по моделям с выделением флагманской сборки, каждая из которых подробно описана на отдельной странице с анимацией и настройками через админ панель.  

Реализован полный цикл заказа: создание и сохранение сборок, добавление в корзину, оформление заказа и управление статусами. Для оплаты подключен платежный сервис Stripe.

В чем была цель данного проекта

Цель проекта заключается в создании сервиса с умным конструктором компьютеров, который обеспечивает совместимость всех выбранных компонентов и предотвращает сборку некорректных конфигураций. А также необходимо сделать платформу, которая позволяет настраивать информационные страницы, разбивать продукты на категории, обеспечивать удобную фильтрацию данных. Это необходимо было для оптимизации сайта по SEO и получения наилучших пользовательских сценариев.

Над чем мы работали

В рамках проектирования и разработки платформы мы решали следующие задачи:

  1. Спроектировать и разработать уникальную платформу интернет магазина от концепта и до полной реализации 
  2. Реализовать конструктор игровых компьютеров
  3. Настроить и интегрировать платежную система Stripe
  4. Подготовить инструмент генерации лендинг страниц для каждой компьютерной сборки
  5. Разработать 2 админ панели - для управления интернет магазином(E-commerce admin panel) и структурой сайта(CMS admin panel)
  6. Организовать локализацию на 5 языках, с выделенным доменом под каждую
  7. Настроить масштабируемый сервер на платформе AWS
Технологии

Frontend: Nuxt 3, TS, Pinia, Scss

Backend: Django, drf, Wagtail, Oscar

Server: Amazon EKSr

изображение проекта
img 3 (big)

Главный экран

На главной странице сайта представлена информация о всех основных разделах, что позволяет легко сориентироваться пользователю какая у компьютеров категоризация, от скольки начинаются бюджеты, последние модели сборки, отзывы, и многое другое. Вся страница состоит из блоков, которые можно добавлять/удалять/изменять через CMS панель.

img 1-1

Игровые компьютеры

Реализована отдельная страница, посвящённая игровым компьютерам, которая управляется через CMS админ панель. Администратор может легко создавать и обновлять карточки игровых ПК с подробной информацией: ценой, ориентировочной датой доставки, рейтингом пользователей и ключевыми техническими характеристиками.

Для удобства пользователей на странице предусмотрены функциональные инструменты — пагинация, позволяющая комфортно перемещаться по большому каталогу, гибкая фильтрация по параметрам и сортировка сборок по различным критериям (цене, рейтингу, дате доставки и т.д.). Это значительно упрощает поиск оптимального варианта под индивидуальные запросы геймеров.

Каждая сборка представлена с возможностью просмотра детальной информации, что позволяет изучить все особенности и конфигурацию выбранного компьютера. Кроме того, пользователь может быстро добавить понравившийся игровой ПК в корзину для дальнейшего оформления заказа.

img 1-2

Категории сборок

В рамках CMS админ панели, реализована возможность создавать страницы, позволяющие выделять сборки определенной категории. Например по бюджету, про процессору, цвету и другим имеющимся характеристикам у сборок, созданных и указанных в E-commerce админ панели

В рамках развития CMS админ панели нашей командой была реализована гибкая функциональность, позволяющая создавать специализированные страницы для выделения сборок по различным категориям. Это даёт возможность группировать компьютеры по ключевым характеристикам, таким как бюджет, процессор, цвет и другие параметры, которые указаны и управляются в E-commerce админ панели.

Благодаря этому функционалу, например, страница Shop by Budget демонстрирует удобную классификацию сборок по ценовым диапазонам, а страница AMD Ryzen 3 демонстрирует подборку игровых ПК с процессорами Ryzen 3

В результате мы получили масштабируемое решение, которое обеспечивает максимальную гибкость в представлении ассортимента и позволяет оперативно адаптировать контент под разные маркетинговые задачи и запросы клиентов.

categories

Создай свой идеальный игровой компьютер — выбери, настрой и выигрывай с игровой сборкой для настоящих геймеров!

Модели

Все сборки созданные в E-commerce админ панели сгруппированы по модельным рядам, где каждый ряд включает в себя флагманскую сборку — вершину линейки с наилучшими техническими характеристиками. 

Каждый модельный ряд представлен в формате лендинговой страницы, выполненной с использованием кастомных анимаций и детального описания всех ключевых характеристик модели. 

Особое внимание уделено гибкости настройки: через CMS админ панель администраторы могут полностью управлять цветовой схемой лендинга, придавая каждой странице уникальный стиль, а также редактировать всё наполнение (тексты, изображения, видео). 

Дополнительно, данный лендинг служит и как детальная страница каждой сборки — при этом первая секция с обзором доступных корпусов отображается только при просмотре модельного ряда, что создает понятную и логичную навигацию между общим и индивидуальным представлением продуктов.

img 1-4

Кастомайзер

Разработали специализированную страницу-конструктор, где пользователь может выбирать комплектующие для своей уникальной компьютерной сборки. 

Страница выполнена с использованием кастомных анимаций и интеллектуального дерева решений, которое гарантирует совместимость всех выбранных компонентов на каждом этапе сборки. Это означает, что пользователь всегда уверен — все детали без проблем поместятся в корпус и будут полностью совместимы друг с другом.

Важным элементом конструктора стала интеграция стороннего FPS-сервиса. Он позволяет оценить производительность ключевых компонентов (процессора, материнской платы, видеокарты и т.д.) в популярных играх. Пользователь может задать требования к графическим настройкам, разрешению экрана и конкретным игровым проектам, а система подберет оптимальный комплект Core-компонентов, обеспечивающий максимальный FPS.

Кроме того, любой пользователь может взять уже существующую сборку на сайте и загрузить ее в конструктор для дальнейшего редактирования и персонализации. Это удобно и позволяет создавать сборки под индивидуальные запросы без необходимости начинать с нуля.

Пользователь всегда видит актуальную итоговую стоимость выбранных компонентов и расчетную дату доставки. Для удобства предусмотрена возможность сбросить все выбранные детали или сохранить текущую сборку в черновиках, которые доступны в профиле пользователя. Это позволяет возвращаться к процессу подбора в удобное время.

img 1-3

Аккаунт

Разработан современный и удобный личный кабинет пользователя с авторизацией по почте, на которую пользователь получает ссылку для подтверждения себя.

Пользователь может получить доступ к своему профилю и обновлять личные данные в любое время. Особое внимание уделено гибкому управлению адресами доставки — можно добавить до 7 адресов и выбрать один из них в качестве адреса по умолчанию, что ускоряет процесс оформления заказов.

В личном кабинете реализована встроенная реферальная система: пользователь может делиться уникальной реферальной ссылкой и получать дополнительную скидку на следующий заказ.

Также предусмотрена возможность настройки получения уведомлений о статусах заказов и новостей платформы.

Для полного контроля над покупками в личном кабинете доступны удобные инструменты управления черновиками и мониторинг истории заказов, позволяющие планировать и отслеживать все свои покупки в одном месте.

img 1-6

Оформление заказа

Создана полноценная и удобная система оформления заказов, обеспечивающая полный цикл формирования и обработки покупок. Основной функционал чекаута позволяет пользователю добавлять в корзину как готовые сборки, так и отдельные компоненты, формируя свой индивидуальный заказ.

При переходе в раздел оформления заказа пользователь сразу видит свою корзину с выбранными товарами. В нижней части страницы отображаются персонализированные рекомендации, стимулирующие дополнительную покупку. Справа выводится детальная информация по заказу — общая стоимость, дата сборки, дата доставки, сумма TAX, стоимость доставки и удобное поле для ввода купон-кода со скидкой.

Дата сборки и дата доставки рассчитывается на бэкенде с учетом праздников и выходных дней которые мы получаем через Google Calendar API.

После проверки корзины пользователь последовательно переходит к выбору адреса доставки, что делает процесс максимально логичным и прозрачным. Затем происходит переход к оплате, где была интегрирована система Stripe. Она обеспечивает гибкость оплаты — поддерживает банковские карты и PayPal.

После успешной транзакции пользователю отображается страница с подтверждением покупки, а далее он может следить за статусом заказа в личном кабинете или получать своевременные уведомления на электронную почту, указанную в профиле.

img 1-5

Купоны и скидки

Создана комплексная и гибкая система управления купонами и скидками, полностью интегрированная в E-commerce админ панель.

Функционал системы купонов:

- Администратор может генерировать купоны, задавая такие параметры, как категория товаров, на которые распространяется скидка, размер скидки, страна действия купона и другие настройки.

- Купоны применяются исключительно к цене самого товара, без учёта дополнительных расходов, таких как доставка, сборка и налоги (TAX).

- По требованию клиента реализована уникальная бизнес-логика: купон можно применить только к одной позиции товара при условии, что в корзине присутствует полноценная сборка. То есть пользователь не может получить скидку просто на одиночный товар (например, мышку), если вместе с ним не оформлена сборка.

Функционал системы скидок:

- В админ панели реализована возможность задавать базовую и скидочную цены для товаров.

- Для сборок, состоящих из нескольких компонентов, базовая и скидочная цены рассчитываются динамически: если у компонентов есть скидочные цены, базовая цена сборки формируется исходя из их сумм; если у компонентов скидок нет — учитывается базовая стоимость.

- Дополнительно администратор имеет возможность вручную устанавливать скидочную цену на всю сборку, что позволяет гибко управлять ценообразованием и проводить точечные акции.

coupons

Локализация

Сайт разработан с поддержкой локализации. При первой публикации проекта, мы разместили 5 локализаций - Английский, Французский, Немецкий, Итальянский и Испанский.

При смене локализации также меняется и доменное имя веб сайта. Организация локализации с использованием различных доменных имён позволяет значительно повысить удобство и эффективность взаимодействия пользователей с сайтом. 

Во-первых, отдельные домены под конкретные языки и регионы создают у посетителей ощущение локального сервиса, что повышает доверие и улучшает конверсию. 

Во-вторых, это положительно влияет на SEO — поисковые системы лучше индексируют региональные версии сайта, показывая их в результатах поиска именно для целевой аудитории на соответствующем языке и в нужной стране. 

Кроме того, разные домены позволяют точнее настроить локальные маркетинговые кампании, обеспечивая гибкость в продвижении и адаптации контента под культурные и юридические особенности каждого рынка. Это особенно важно для соблюдения локальных нормативов и предпочтений пользователей. Таким образом, использование доменов, привязанных к языковым версиям, является эффективной стратегией для глобального развития бизнеса и улучшения пользовательского опыта.

localization

Валюта

Мы внедрили полноценную поддержку двух валют — EUR и GBP, что позволяет пользователям независимо от региона или выбранной локализации просматривать и приобретать товары в удобной для них валюте. Такой подход значительно улучшает пользовательский опыт и упрощает процесс совершения покупок для международной аудитории.

В системе управления онлайн магазином (E-commerce админ панели) для всех комплектующих, сборок и моделей задаются цены сразу в двух валютах. Это обеспечивает точное отображение стоимости независимо от выбранной валюты на фронтенде. 

Также в админке предусмотрены базовые настройки для каждой страны, включая стоимость доставки, сборки, налоговые ставки (TAX) и другие важные параметры — все они указываются отдельно в EUR и GBP, что позволяет гибко адаптировать логистику и финансовые условия под требования каждого рынка.

Особое внимание уделено расчету стоимости сборок: поскольку сборки состоят из набора компонентов с индивидуальными ценами в обеих валютах, мы реализовали два способа подсчёта итоговой цены. 

Первый — автоматический, где стоимость сборки формируется как сумма цен всех входящих компонентов, что обеспечивает прозрачность и скорость обновления цен. 

Второй — ручной, дающий администратору возможность самостоятельно устанавливать цену на собранный продукт, учитывая маркетинговые и коммерческие факторы.

Такой комплексный подход к мультивалютности обеспечивает не только удобство для пользователей, но и гибкость для бизнеса, позволяя эффективно работать на нескольких рынках одновременно при сохранении полной управляемости и точности данных.

currency

Отзывы и рейтинг

Отзывы используются на главной и лендинге модели страницах. При этом система соотношения отзыва к сборкам работает следующим образом:

  • Если кто-то собрал сборку на основе готовой, то отзыв пойдет к изначальной сборке. Оставлять отзыв можно только на купленные сборки. 
  • Если пользователь купил сборку собранную с нуля самостоятельно через кастомайзер, тогда отзыв попадает на главную страницу

Если пользователь купил готовую сборку, то отзыв пойдет на страницу модели этой сборки и на детальную страницу этой сборки

reviews

FPS Сервис

Реализовали уникальный инструмент, позволяющий пользователям подбирать конфигурации с оптимальными характеристиками под конкретные игры. 

Суть решения в интеграции стороннего FPS сервиса, который на основе выбранных пользователем параметров (процессор, видеокарта, игра) рассчитывает и отображает предполагаемый FPS для данной сборки. Это помогает игрокам сделать осознанный выбор и подобрать максимально подходящую систему.

Инструмент доступен в двух ключевых местах сайта: в конструкторе сборок и на страницах конкретных игр, где выводятся рекомендованные конфигурации под выбранную игру с учетом полученных данных FPS.

Технически интеграция выполнена на уровне E-commerce админ панели: бэкенд регулярно получает и обновляет данные с FPS сервиса, после чего происходит автоматическое сопоставление характеристик с параметрами игр. Это обеспечивает актуальность и точность рекомендаций.

fps

Функции Import/Export данных

В рамка E-commerce админ панели была реализована функция импорта и экспорта данных для перенесения данных с старого веб сайта на новый, а также для ведения внутреннего документооборота компании.

С помощью функции Import администратор может загрузить .XLS или .CSV файл, содержащий информацию о компонентах, моделях, сборках, категориях, группах и данных для каталогов продукции. Формат данного файла предварительно был согласован с клиентом для избежания проблем с загрузкой данных.

Функция Export позволяет выгружать данные с базы данных, также в предварительно согласованном формате. Администратор может экспортировать данные о всех компьютерах, компонентах, ценах на комплектующие и все заказы.

import_export

Система админ панелей

Реализовали комплексную систему админ панелей, обеспечивающую эффективное управление как интернет-магазином, так и информационным контентом.

Для быстрой и надежной реализации ключевых задач были использованы две платформы:

  • Oscar — мощная e-commerce админ панель, которая взяла на себя базовый функционал магазина: управление каталогами продуктов, категориями, моделями, заказами и сопутствующими процессами. Для полного соответствия требованиям клиента мы провели глубокую кастомизацию внутренней логики Oscar, что позволило без ограничений реализовать все необходимые бизнес-процессы. Кастомизация прошла гладко и эффективно, обеспечив надежную работу и удобство администрирования.
  • CMS Wagtail — гибкая система управления контентом, которая расширила возможности сайта, предоставив клиенту полный контроль над информационной частью платформы. Благодаря Wagtail клиент получил возможность самостоятельно создавать и редактировать любое количество страниц и содержательных блоков, а также выстраивать их вложенность по собственному усмотрению. Это заметно сократило время реакции на изменения и снизило зависимость от разработчиков.
system_of_admin_panels

Проекты

Наша компания предлагает услуги разработки корпоративного мобильного приложения на выгодных условиях. Ниже вы можете познакомиться с примерами реализованных приложений для бизнеса.

Gamety
Игры, Сайты
Gamety Clicker
Кликер для Telegram, для распределения токенов в рамках фазы Airdrop
oraicle-card
Сайты
ORAICLE
Веб сайт для презентации нового сервиса по прогнозированию криптобирж
PartyLinkup-card
Мобильные приложения, Сайты
Party Linkup
Платформа для организации митапов, конференций и других мероприятий
Miniteam-card
Игры, Сайты
Miniteam
Детское мобильное приложение – игра «Кто такой Макс?» для детей дошкольного возраста и веб-сайт компании Miniteam
SenpayTV
Сайты
Senpai TV
Веб сайт современной одежды для любителей японской культуры
terragama-Card
Игры, Сайты
Terragama
Мобильная игра, направленная на поддержание экологии в природе
mercy lens-card
Сайты
Mercy Lens
Веб-сайт, предлагающий увлекательные квесты, в которых участники имеют возможность выигрывать денежные призы
unitedera-card
Сайты
United Era
meta fighter small icon
Сайты, Мобильные приложения, Игры
Metafighter
Мультиплеерный 3Д файтинг для браузеров и мобильных устройств
StellaAlMare-card
Сайты
Stella Al Mare
Веб платформа для бронирования номеров и получении полной информации об отеле
getblock-card
Сайты
Get Block
Веб приложение для проверки транзакций между крипто кошельками
Docmobile-card
Сайты
DocMobil
Площадка для оказания медицинских услуг онлайн
decoration imagedecoration imagedecoration imagedecoration image

Оставив заявку, Вы получите

  • Консультацию менеджера
  • Сбор и формализацию ваших требований
  • Рекомендации и идеи исходя из ваших задач
  • Коммерческое предложение для вашей компании
  • Окончательную смету с полной детализацией ваших работ
decoration image