Визуальный конструктор заказов для каталога электронных компонентов

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

Основные задачи включали:

• Организацию каталога компонентов с гибкой системой параметров
• Реализацию визуального редактора для сборки схем
• Валидацию соединений между компонентами
• Интеграцию с существующей системой интернет-магазина
• Управление корзиной и проектами пользователей

Разработана полнофункциональная веб-платформа на базе Django REST Framework и Vue.js. Система состоит из двух основных частей: административной панели для управления каталогом и пользовательского интерфейса с визуальным редактором.

Архитектура и технологии:

Backend построен на Django 4.1 с использованием Django REST Framework для API. Реализована гибкая модель данных для компонентов с поддержкой различных типов параметров (строковые, числовые, булевы, текстовые с Markdown). Система фильтрации позволяет искать компоненты по множеству критериев одновременно, включая диапазоны значений для числовых параметров.

Frontend разработан на Vue 3 с применением Composition API, Vue Router для навигации и Pinia для управления состоянием. Интерфейс стилизован с помощью Tailwind CSS, что обеспечивает современный и отзывчивый дизайн.

Ключевые возможности:

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

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

Интеграция с интернет-магазином Tilda реализована через API синхронизации. Система автоматически обновляет информацию о наличии товаров и передает данные корзины для оформления заказа.

Дополнительно реализованы функции сохранения проектов, управления корзиной с привязкой к уникальному идентификатору клиента, система подсказок для пользователей и SEO-настройки для страниц.