Розробка конструктора сайтів
Конструктор сайтів — SaaS-платформа, яка дозволяє користувачам створювати сайти без коду через візуальний редактор. Технічно це один з найскладніших веб-продуктів: WYSIWYG-редактор, генерація коду на льоту, хостинг та CDN для тисяч користувацьких сайтів, управління DNS.
Архітектура конструктора
Ключовий вибір: canvas-based або DOM-based редактор.
Canvas (Adobe XD / Figma-підхід): довільне розташування елементів пікселями. Максимальна свобода дизайну, але складно генерувати адаптивний HTML.
Block/Section-based (Webflow, Wix-підхід): сайт складається з секцій, усередині — сітка (grid/flexbox). Обмеженість дизайном, але генерує адаптивний код.
Component-based: користувач працює з компонентами (Hero, Features, Pricing, Footer). Найпростіший підхід, подібний до конструктора лендингів.
Модель даних сторінки
{
"sections": [
{
"id": "hero_1",
"type": "hero",
"props": {
"background": "#1e40af",
"title": "Заголовок сайту",
"subtitle": "Підзаголовок",
"buttonText": "Почати",
"buttonLink": "/signup"
}
},
{
"id": "features_1",
"type": "features_grid",
"props": {
"columns": 3,
"items": [...]
}
}
],
"meta": { "title": "...", "description": "..." }
}
При рендеринзу JSON-конфігурація конвертується в React/HTML-компоненти. Зміни в редакторі → оновлення JSON → миттєвий live preview.
Live Preview
Предпросмотр сайту — iframe з користувальницьким сайтом. Зміни застосовуються через postMessage:
// Редактор надсилає оновлення в iframe
iframe.contentWindow.postMessage({
type: 'UPDATE_SECTION',
sectionId: 'hero_1',
props: { title: 'Новий заголовок' }
}, '*');
// iframe слухає та оновлює React-компонент
window.addEventListener('message', ({ data }) => {
if (data.type === 'UPDATE_SECTION') {
setSection(data.sectionId, data.props);
}
});
Мультитенантний хостинг
Кожний користувач отримує поддомен (username.builder.com) або кастомний домен. Nginx + wildcard SSL (*.builder.com) через Let's Encrypt + Certbot.
Кастомний домен: користувач додає CNAME-запис → платформа видає SSL через Let's Encrypt HTTP-01 challenge.
Генерація та деплой сайту:
- При публікації — JSON конфігурація конвертується в статичний HTML + CSS + JS
- Статичні файли завантажуються в S3/CDN
- CDN налаштовується на поддомен користувача
Теми та шаблони
Користувач розпочинає з вибору шаблону (категорія: бізнес, портфоліо, ресторан, landing). Шаблон — набір секцій із заповненими прикладами контенту. Переключення теми (колір + шрифт) змінює CSS-змінні — миттєва зміна стилю без зміни структури.
Обмеження за планом
Безплатний план: поддомен username.builder.com, обмежена кількість сторінок, брендинг платформи в footer. Pro план: кастомний домен, без брендинга, більше сторінок, аналітика.
SEO-інструменти
- Meta title / description — редагуються прямо в конструкторі
- OG-зображення — завантаження або генерація з заголовка
- Robots.txt та Sitemap — генеруються автоматично при публікації
Терміни
MVP (блочний редактор, live preview, публікація на поддомен, 10–15 типів секцій): 4–6 місяців. Повноцінний конструктор з кастомними доменами, CSS-темами, SEO-інструментами, e-commerce секціями: 8–14 місяців.