Данный проект представляет собой полноценное SaaS-веб-приложение для создания и управления динамическими QR-кодами, связанными с живыми, настраиваемыми веб-страницами. Платформа выходит за рамки простого генератора QR-кодов и предоставляет пользователям структурированную систему для создания, публикации и дальнейшего управления контентом через личный кабинет.
Каждый QR-код ведёт на динамическую публичную страницу, содержание которой можно обновлять в любое время без необходимости повторной генерации самого QR-кода. Это позволяет изменять и развивать контент, сохраняя неизменным уже распространённый физический или цифровой QR. В продукте реализованы все ключевые SaaS-процессы: регистрация и авторизация пользователей, управление подписками и тарифами, ограничения функциональности, организация проектов и рендеринг публичных страниц.
Галерея продукта
Функциональность продукта
Конструктор контента и веб-страниц
Пользователи формируют содержимое страниц с помощью модульного конструктора, поддерживающего текстовые блоки, ссылки, структурированные секции, контактную информацию и другие типы контента. Готовые страницы публикуются по публичному URL формата /w/[qrId] и доступны без авторизации. Все изменения вносятся динамически через кабинет, при этом QR-код остаётся неизменным.
Генерация QR-кодов и кастомный дизайн
Платформа поддерживает создание QR-кодов для различных сценариев: персональные профили, промо-страницы, маркетинговые кампании. Доступна глубокая визуальная кастомизация — цвета, формы, стили и варианты оформления. Брендированные QR-коды могут быть адаптированы под фирменный стиль компании без потери функциональности.
Личный кабинет пользователя
Через кабинет осуществляется управление проектами и QR-кодами: просмотр списков, фильтрация, редактирование и обновление контента. Пользователь может управлять своими персональными данными, а также отслеживать статус подписки, доступные функции и лимиты.
Подписки и ограничения функциональности
Реализована логика тарифов с ограничениями по количеству динамических QR-кодов и доступным возможностям. Поддерживаются сценарии апгрейда и даунгрейда подписки, отображение текущего статуса и корректное применение ограничений на уровне всей системы.
Техническая архитектура и стек
Приложение построено на современном frontend-стеке: Next.js 16 (App Router), React 19, TypeScript, React Query, Axios, React Hook Form с Zod и SCSS Modules.
Слои архитектуры
- app/ — маршрутизация и композиция страниц
- features/ — доменная бизнес-логика (авторизация, подписки, проекты, управление QR)
- shared/ — переиспользуемые UI-компоненты, конфигурации и инфраструктура
Строгие правила импорта обеспечивают разделение ответственности и предотвращают перекрёстные зависимости между слоями.
Инфраструктура и ключевые компоненты
- API-слой через централизованный Axios-инстанс с интерцепторами, нормализованной обработкой ошибок, логикой refresh-токенов и защитой от race-conditions.
- JWT-аутентификация: access-токены в памяти, refresh-токены — в настраиваемом хранилище, автоматическое продление сессии и контролируемые редиректы.
- Управление состоянием и данными на базе React Query: кэширование, инвалидация запросов, единые query-keys и централизованная обработка ошибок.
- UI-система на SCSS Modules и дизайн-токенах — консистентный интерфейс и масштабируемая компонентная структура.
Позиционирование продукта
Это не статический генератор QR-кодов. Каждый QR-код является управляемым цифровым объектом с привязанной живой веб-страницей. Пользователь сохраняет контроль над контентом, оформлением и доступом, при этом QR-код остаётся стабильной точкой входа. Платформа спроектирована как поддерживаемая и расширяемая SaaS-система с акцентом на чистую архитектуру и долгосрочное использование.
Что было реализовано
- Полноценное SaaS-приложение с авторизацией и подписками
- Генерация динамических QR-кодов с кастомным дизайном
- Модульный конструктор веб-страниц
- Система публичных страниц с динамическим обновлением контента
- Личный кабинет для управления проектами и QR-кодами
- Тарифы и ограничения функциональности
- Структурированная архитектура с чётким разделением слоёв
- Production-ready кодовая база на современных React-паттернах
Результат
В результате был создан законченный SaaS-продукт для управления динамическими QR-кодами и связанными веб-страницами. Платформа позволяет пользователям создавать, настраивать и поддерживать контент через удобный интерфейс, без необходимости пересоздания QR-кодов. Продуманная архитектура обеспечивает надёжность, расширяемость и возможность дальнейшего развития продукта по мере роста требований и функциональности.
Что ещё мы собирали.
Соберём то, что
ведёт ваш бизнес вперёд.
От идеи до инфраструктуры — помогаем спроектировать, запустить и масштабировать системы, которые работают.