QRRU

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

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

Галерея продукта

←→

1 / 15

Функциональность продукта

Конструктор контента и веб-страниц

Пользователи формируют содержимое страниц с помощью модульного конструктора, поддерживающего текстовые блоки, ссылки, структурированные секции, контактную информацию и другие типы контента. Готовые страницы публикуются по публичному 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-кодов. Продуманная архитектура обеспечивает надёжность, расширяемость и возможность дальнейшего развития продукта по мере роста требований и функциональности.