pechati.store — конструктор печатей и штампов

Задача

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

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

Что сделано

• Редактор на SVG-канвасе: круги, круговой и центрированный текст, иконки, изображения; слои с перетаскиванием, группировкой и блокировкой, отмена и повтор действий.
• Векторизация целиком в браузере: текст переводится в контуры через fontkit, растровые картинки — через Potrace, собранный в WebAssembly. Сервер в этом не участвует.
• Экспорт в PNG, SVG, PDF и ZIP, включая выгрузку отдельных элементов; шрифты с кириллицей, шаблоны по категориям и генератор макетов с поиском иконок по тегам.
• Черновики хранятся в браузере вместе с превью и переносятся между устройствами импортом и экспортом JSON.
• Платный контур: тарифы, оплата, учёт платных выгрузок и админка — покупка подтверждается на сервере, а не в браузере.
• Одна сборка на три домена: сам конструктор (constructor.pechati.store), витрина (pechati.store) и краснодарский сайт печати-даром.рф, где конструктор встроен в страницу. Обязательность входа, способ выдачи файла и цветовая схема выбираются по имени домена во время выполнения — копий кода нет.

Стек

• React 19, TypeScript, Vite; состояние — Zustand
• fontkit — векторизация текста, Potrace WASM — векторизация изображений
• jsPDF со svg2pdf и JSZip — экспорт; @dnd-kit — панель слоёв
• PHP API и MySQL на общем хостинге: шаблоны, аккаунты, оплаты
• Встраивание конструктора в чужую страницу через iframe и embed.js

Измеримое

Замер мой, 4 сентября 2026 г., по публичной главной странице. Цифры бизнеса клиента здесь не показываются: их публикация — вопрос отдельного письменного разрешения, а выдумывать метрики я не буду.

Lighthouse mobile, производительность

91 из 100

прогон Lighthouse 13 в режиме мобильного устройства по публичному адресу главной

Вес главной страницы

108 КБ

суммарный объём переданных ресурсов в том же прогоне Lighthouse

Отрисовка главного блока (LCP)

2,8 с

тот же прогон, эмуляция мобильной сети и процессора