Конструктор мебели в интерьере онлайн

Создать современный интерактивный визуальный планировщик (Room Planner), который позволяет покупателям квартир в новостройках ФСК самостоятельно:

Расставлять мебель в своей будущей квартире.

Пробовать разные планировочные решения.

Видеть реалистичное размещение мебели в конкретной квартире (по выбранному корпусу и планировке).

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

Особые требования:

Высокая производительность при работе с планом квартиры.

Удобный UX даже для неподготовленного пользователя.

Точная привязка к реальным размерам помещений.

Возможность дальнейшего развития (добавление новых планировок, 3D-режима и т.д.).

Разработан полнофункциональный визуальный модуль на React.

Основные возможности модуля:

2D-планировщик с точным масштабом (в сантиметрах).

Каталог мебели с фильтрами (диван, кухня, спальня и т.д.).

Drag & Drop мебели с возможностью поворота, изменения размера (где применимо) и удаления.

Умное размещение: мебель «прилипает» к стенам, не пересекается с другими объектами.

Отображение/скрытие размеров, несущих стен, дверей, окон.

Несколько режимов отображения мебели (базовое размещение, с размерами).

Сохранение проекта (локально + возможность сохранить в личный кабинет).

Экспорт планировки (PDF / изображение).

Технологический стек

Frontend: React 18 + TypeScript

Состояние: Zustand + Redux Toolkit (для сложных состояний)

Канвас / рендеринг: Konva.js (основной выбор) + React-Konva

Альтернативно рассматривался PixiJS

UI: Material-UI + собственная дизайн-система ФСК

Drag & Drop: React DnD + собственная логика на Konva

Хранение проектов: IndexedDB + бэкенд (при авторизации)

Адаптивность: полностью responsive (работает на планшетах)

Ключевые технические вызовы и решения

Точность масштаба — все размеры привязаны к реальным данным из BIM-модели квартиры.

Производительность — оптимизация рендеринга большого количества объектов (Konva Layer + виртуализация).

Коллизии и snapping — реализована система магнитного прилипания и проверки пересечений.

Мобильная доступность — специальный touch-режим с упрощённым управлением.

Расширение — архитектура позволяет легко добавлять новые категории мебели и 3D-режим в будущем.

Пользователи проводят в планировщике в среднем 8–12 минут.

Значительно выросло количество заявок на подбор мебели из конкретной квартиры.

Инструмент стал мощным маркетинговым инструментом — помогает покупателям быстрее принять решение о покупке.

Получил положительные отзывы как от клиентов, так и от менеджеров продаж ФСК.