Интерактивное веб-приложение для генерации настраиваемых QR-кодов с возможностью кастомизации внешнего вида, добавления логотипа и экспорта в нескольких форматах.
- 12 типов данных: ссылки, текст, email, телефон, WiFi, SMS, vCard, геолокация, события, криптовалюта (BTC/ETH/USDT/LTC/DOGE/BCH), Telegram и WhatsApp
- Кастомизация дизайна:
- Сплошные цвета, градиенты (линейные, радиальные) и готовые цветовые схемы
- 11 форм точек (квадрат, круг, ромб, звезда и др.)
- Настройка рамок и ядер угловых маркеров, отдельные цвета для глаз
- Прозрачный фон для наклеек и оверлеев
- Добавление логотипа: наложение логотипа на центр QR-кода с фоновой подложкой и регулируемым размером
- Настройка коррекции ошибок: выбор уровня (L, M, Q, H)
- Экспорт в форматах: PNG, JPG, SVG (настоящий вектор, не растровое вложение), PDF + копирование в буфер обмена
- Пакетная генерация: создание десятков QR-кодов из списка строк и скачивание одним ZIP-архивом (PNG или SVG) или PDF-сеткой для печати наклеек/этикеток
- Сканер QR: распознавание кодов с фото или камеры (jsQR) с импортом распознанного содержимого обратно в генератор (URL, Wi-Fi, vCard, MECARD, VEVENT, Telegram, WhatsApp и др.)
- История QR-кодов: сохранение готовых кодов (до 20) локально в браузере с быстрым восстановлением в один клик
- Проверка сканируемости: декодирование QR-кода прямо в браузере (jsQR) с отчётом о совпадении данных
- Готовые шаблоны для печати: визитки, пластиковые карты, наклейки, бейджи, меню, упаковка
- Предпросмотр данных: отображение и копирование сырых данных QR-кода
- Предпросмотр в реальном времени: мгновенное обновление QR-кода при изменении настроек
- Тёмная тема: переключение светлой/тёмной темы с сохранением выбора
- Автосохранение настроек: все параметры сохраняются в localStorage между сессиями
- REST API: программная генерация QR-кодов через
GET /api/qrиPOST /api/qr(SVG, PNG или JPG) - PWA-готовность: манифест, иконки всех размеров (включая maskable) для установки на домашний экран
- SEO: Open Graph, Twitter Cards, канонический URL, sitemap, семантическая разметка
- Адаптивный дизайн: оптимизирован для мобильных и десктопов
- Развёртывание: готовые
Dockerfileиamvera.ymlдля публикации на Amvera Cloud
| Компонент | Технология |
|---|---|
| Фреймворк | Next.js 16 (App Router) |
| Язык | TypeScript |
| Стили | Tailwind CSS |
| UI-компоненты | shadcn/ui |
| State | Zustand (с персистентностью) |
| Иконки | Lucide React |
| База данных | PostgreSQL + Prisma |
| Сервер | Caddy |
# Клонировать репозиторий
git clone https://github.com/QuadDarv1ne/qr-generator.git
cd qr-generator
# Установить зависимости
npm install
# Запустить сервер разработки
npm run devОткройте http://localhost:3000 в браузере.
qr-generator/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/qr/ # API генерации QR (GET/POST /api/qr)
│ │ ├── globals.css # Глобальные стили
│ │ ├── layout.tsx # Корневой layout (SEO, метаданные)
│ │ ├── manifest.ts # PWA-манифест
│ │ ├── sitemap.ts # Sitemap для поисковиков
│ │ └── page.tsx # Главная страница
│ ├── components/
│ │ ├── qr/ # Компоненты генерации QR
│ │ │ ├── batch-panel.tsx # Пакетная генерация (ZIP/PDF-сетка)
│ │ │ ├── color-panel.tsx # Панель цветов (схемы, прозрачность)
│ │ │ ├── data-forms.tsx # Формы ввода данных
│ │ │ ├── design-panel.tsx # Панель дизайна
│ │ │ ├── export-panel.tsx # Панель экспорта
│ │ │ ├── history-panel.tsx # История QR-кодов
│ │ │ ├── logo-panel.tsx # Панель логотипа
│ │ │ ├── qr-data-preview.tsx # Предпросмотр сырых данных
│ │ │ ├── qr-preview.tsx # Предпросмотр QR + проверка сканируемости
│ │ │ ├── scanner-panel.tsx # Сканер QR (фото/камера) + импорт
│ │ │ ├── settings-panel.tsx # Общие настройки
│ │ │ └── type-selector.tsx # Выбор типа данных
│ │ ├── theme-provider.tsx # Провайдер темы (next-themes)
│ │ ├── theme-toggle.tsx # Переключатель темы
│ │ └── ui/ # shadcn/ui компоненты
│ ├── hooks/ # Кастомные React-хуки
│ └── lib/
│ ├── qr-encoders.ts # Логика кодирования данных
│ ├── qr-encoders.test.ts # Юнит-тесты кодировщиков
│ ├── qr-importer.ts # Распознавание содержимого QR (импорт из сканера)
│ ├── qr-importer.test.ts # Юнит-тесты импортёра
│ ├── qr-renderer.ts # Рендеринг QR на Canvas + генерация векторного SVG
│ ├── qr-store.ts # State-менеджмент (Zustand + persist)
│ └── qr-types.ts # Типы и справочники
├── prisma/
│ └── schema.prisma # Схема базы данных
├── public/ # Статические файлы
├── scripts/
│ └── copy-standalone.mjs # Копирование статики в standalone-сборку (кроссплатформенно)
├── Dockerfile # Многоступенчатая сборка production-образа
├── amvera.yml # Конфигурация развёртывания на Amvera Cloud
├── Caddyfile # Конфигурация Caddy
└── next.config.ts # Конфигурация Next.js
- Выберите тип данных — URL, текст, email, телефон, WiFi, криптовалюта и т.д.
- Заполните форму — введите нужные данные в соответствующие поля
- Настройте дизайн — выберите цвета, форму точек, стиль угловых маркеров
- Добавьте логотип (опционально) — загрузите изображение и отрегулируйте его размер
- Проверьте сканируемость — кнопка проверки декодирует код и подтверждает корректность
- Настройте экспорт — выберите формат и разрешение
- Скачайте — сохраните QR-код на устройство
Программная генерация QR-кодов (SVG по умолчанию, PNG при format=png, JPG при format=jpg):
GET /api/qr?data=https://example.com&size=1024&foreground=%23000000&background=%23FFFFFF
| Параметр | Описание | По умолчанию |
|---|---|---|
data |
Содержимое QR-кода (обязательный) | — |
size |
Размер изображения, px (128–4096) | 1024 |
format |
svg, png или jpg |
svg |
mode |
solid или gradient |
solid |
foreground |
Цвет кода (hex) | #000000 |
background |
Цвет фона (hex) | #FFFFFF |
gradientStart |
Начальный цвет градиента | #000000 |
gradientEnd |
Конечный цвет градиента | #4F46E5 |
gradientType |
linear или radial |
linear |
gradientRotation |
Угол градиента (0–360) | 0 |
dotShape |
Форма точек | square |
eyeFrame |
Форма рамки глаза | square |
eyeBall |
Форма ядра глаза | square |
ec |
Коррекция ошибок: L, M, Q, H |
M |
margin |
Отступ, % от размера (0–20) | 8 |
transparent |
Прозрачный фон: 1 или 0 |
0 |
Пример:
# Векторный SVG
curl "https://your-domain/api/qr?data=HELLO&size=2048&dotShape=dots&ec=H" -o qr.svg
# Растровый PNG
curl "https://your-domain/api/qr?data=HELLO&size=2048&format=png" -o qr.png
# Растровый JPG
curl "https://your-domain/api/qr?data=HELLO&size=2048&format=jpg" -o qr.jpg| Переменная | Описание | Пример |
|---|---|---|
DATABASE_URL |
URL-подключение к PostgreSQL | postgresql://user:pass@localhost:5432/db |
SITE_URL |
URL сайта для SEO/Open Graph | https://qr-generator.example |
Юнит-тесты кодировщиков и импортёра QR-данных (Bun):
bun test# Проверка типов и линта
npm run lint
# Сборка production-версии
npm run build
# Запуск production-сервера
npm startМногоступенчатый Dockerfile собирает standalone-образ (Next.js + Bun):
docker build -t qr-generator .
docker run -d -p 3000:3000 --name qr-generator qr-generatorПриложение слушает порт 3000.
В корне репозитория лежит файл amvera.yml — при подключении репозитория к
Amvera платформа автоматически соберёт проект по Dockerfile
и запустит контейнер на порту 3000. Дополнительных настроек не требуется —
приложение не использует базу данных и переменные окружения.
© 2026. Все права принадлежат Дуплей Максиму Игоревичу
Данный программный продукт, включая весь исходный код, документацию и сопутствующие материалы (далее — «Программа»), является исключительной интеллектуальной собственностью Дуплей М.И.