Web Page Generator —
SaaS-платформа⁠.

Галерея интерфейсов

Экраны кабинета, конструктора страниц и публичного рендеринга.

Проект нёс структурный риск, который недооценивают многие ранние SaaS-продукты: публичные ссылки становятся постоянными.

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

Платформа должна была избежать трёх типичных ошибок:

• Связывать QR-код напрямую с одной фиксированной версией контента
• Воспринимать каждую публичную страницу как статичный файл, а не как управляемую продуктовую сущность
• Проверять лимиты подписки только в интерфейсе, а не на сервере и в слое публичного рендеринга

Система должна была относиться к каждой странице как к стабильному цифровому объекту: одна публичная ссылка, редактируемый контент за ней, контролируемые правила публикации и доступ к функциям по тарифу.

Модульный редактор для создания QR-связанных публичных страниц. Пользователи собирают страницы из переиспользуемых секций — текстовые блоки, ссылки, контактная информация, структурированные блоки контента и кампанийные модули. Конструктор спроектирован так, чтобы новые типы страниц и блоков можно было добавлять позже без изменения основной модели публичных URL.

Платформа генерирует QR-коды для опубликованных страниц и сохраняет их связанными со стабильными публичными маршрутами.

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

Ключевой продуктовый принцип: QR-код остаётся тем же, а контент страницы за ним может меняться.

Структурированное рабочее пространство для управления проектами, страницами, QR-кодами и настройками аккаунта:

• Создание и организация проектов
• Создание, редактирование и публикация страниц
• Управление QR-связанными публичными URL
• Просмотр статуса подписки и лимитов
• Обновление профиля и настроек аккаунта
• Управление контентом без помощи разработчика

Логика доступа по тарифу для SaaS-монетизации:

• Отображение состояния подписки
• Лимиты страниц по тарифу
• Доступность функций на каждом тарифе
• Состояния повышения и понижения тарифа
• Согласованные проверки доступа в действиях кабинета и в серверных правилах

Это предотвращает превращение проверки доступа к функциям во временный костыль в интерфейсе и держит платные лимиты проверяемыми на уровне продукта.

Платформа спроектирована как SaaS-продукт, а не как «генератор статичных страниц».

• Слой кабинета: авторизованная панель для управления проектами, редактирования страниц, генерации QR, состояния подписки и настроек пользователя
• Серверный слой: предоставляет продуктовые правила — аутентификация, владение, идентичность страницы, состояние публикации, лимиты тарифа и разрешение публичных страниц
• Публичный слой рендеринга: обслуживается со стабильных URL, поэтому распространённые QR-коды продолжают работать даже при изменении контента
• Слой интеграции: соединяет процессы аккаунта, подписки и управления страницами через общий API с согласованной обработкой ошибок, поведением сессии и валидацией

Структурирована вокруг продуктовых сущностей, важных для QR-связанной SaaS-платформы:

• Пользователи и аутентификация
• Проекты и владение
• Страницы и публичные идентификаторы
• Контент страниц и состояние публикации
• QR-ссылки
• Тарифные планы и лимиты использования
• Правила доступа к функциям
• Данные для публичного рендеринга

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

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

Это создаёт чистое разделение между:

• Приватным редактированием в кабинете
• Серверной валидацией и контролем доступа
• Доставкой публичной страницы
• Стабильными QR-связанными ссылками

Фронтенд: Next.js App Router, React, TypeScript, React Query, React Hook Form, Zod, SCSS Modules.

Структура приложения: app/ — маршрутизация и композиция страниц; features/ — доменные процессы (авторизация, подписки, проекты, управление QR); shared/ — переиспользуемые UI- и инфраструктурные утилиты.

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

Аутентификация и серверная логика. JWT-аутентификация с защищёнными маршрутами кабинета, контролируемым обновлением сессии и редиректами для неавторизованных пользователей. Серверная часть спроектирована вокруг стабильности публичных ссылок: QR-код не указывает на хрупкий черновик страницы — он указывает на стабильный публичный идентификатор. За этим идентификатором система управляет текущей опубликованной версией, правилами доступа, владением аккаунта и лимитами тарифа.

• Разрешение публичных страниц по стабильным идентификаторам
• Защита действий кабинета за правилами авторизованного владения
• Валидация контента страницы перед публикацией
• Проверка подписочных и функциональных лимитов на сервере
• Разделение состояния черновика и публичного рендеринга
• Сохранение стабильности QR-ссылок при изменении контента
• Чистые API-контракты для кабинета и публичных поверхностей

Управление данными — React Query для кэширования, инвалидации, общих ключей запросов и предсказуемых состояний загрузки и ошибок в кабинете и редакторе.

UI-система — SCSS Modules и дизайн-токены для визуальной согласованности между кабинетом, конструктором и публичными страницами.

Это не просто «генератор веб-страниц». Каждая страница — управляемая SaaS-сущность с:

• Стабильным публичным URL
• Редактируемым контентом
• Связью с QR-кодом
• Правилами владения
• Доступом к функциям по тарифу
• Состоянием публикации
• Контролями в кабинете
• Логикой публичного рендеринга

Это различие важно, потому что QR-связанные страницы часто переживают первую версию продукта. Архитектура должна позволить продуктовой модели развиваться без поломки напечатанных или распространённых ссылок.

• QR-связанные продукты
• Инструменты динамических лендингов
• Платформы цифровых визиток
• Конструкторы страниц событий и кампаний
• SaaS-панели с тарифными лимитами
• Публичные и приватные системы управления контентом
• No-code и low-code публикационные процессы
• Подписочные инструменты для контента

Продукт получил структурированную SaaS-основу для управления QR-связанными динамическими страницами. Пользователи могут создавать страницы, связывать их с QR-кодами или публичными URL, обновлять контент со временем и управлять проектами из персонального кабинета — без поломки публичной ссылки, уже напечатанной, разосланной или встроенной куда-то.

Для H-Studio этот кейс демонстрирует ключевой архитектурный принцип: публичные ссылки должны оставаться стабильными, а продуктовая модель за ними — достаточно гибкой, чтобы развиваться.