Кейс Page Builder PrimeCoder — секции, блоки, SEO, публикация | PrimeCoder

Page Builder

Секции и блоки нашей дизайн-системы — без Tilda и без очереди к разработке на каждый абзац

Как устроен наш builder

Это модуль `PageBuilder` / `PageBuilderWrapper` в админке. Библиотека: Cover, Text, Image+Text, Features, Team, Pricing, Steps, FAQ, Gallery, GIF viewport, До/После, Wave, Shop, Forms.

Контент пишется в `contentJson.blocks` / `sections`. Публичный фронт рендерит те же блоки. SEO-поля (title, description, slug, OG) — рядом с canvas, не в отдельном Notion.

Задача

Дать редактору безопасный способ собирать страницы из проверенных блоков, с превью устройств и публикацией.

Решение

Схема блоков ограничивает хаос. Медиа-блоки делят константы aspect/height. Inline-редактирование + панель настроек секции. Сохранение через upsert кейса/продукта.

Стек редактора

UI-редактор на том же React-стеке, что и публичный фронт. Один язык — меньше трения при выкладке.

React
TypeScript
Node.js
Figma

40+ типов блоков,Desktop / Tablet / Mobile,SEO без отдельного инструмента

Результат

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

Срок: 75 дн.

Библиотека блоков
Canvas + настройки секции
Превью Desktop/Tablet/Mobile
SEO-панель
Сохранение в contentJson
Публичный рендер тех же блоков

Объём

Score: 94

Типов блоков: 40+
Превью: 3 устройства
Контур: кейсы + продукты

Цвета

Canvas dark
Builder blue
Accent
UI

Метрики проекта

Превью: Desktop/Tablet/Mobile
Шаблонов: 12
Типов блоков: 40+

Стек: React, TypeScript, Node.js, Figma