Короткие ссылки и дизайнерские QR

Vue 3 + webedge-db: сервис коротких ссылок со статистикой и дизайнер QR.

Vue 3webedge-dbTracking

Dev-story

Задача

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

Что делали

Приложение коротких ссылок (Vue 3 + webedge-db, Better Auth) с личными коллекциями ссылок, публичными короткими URL и отслеживанием кликов, вместе с генератором дизайнерских QR, стилизующим код; оба работают на нашем бэкенде webedge-db.

Результат

Сам делаешь отслеживаемую короткую ссылку и брендовый QR и видишь клики — без стороннего сокращателя ссылок.

Dev-story статья

Короткие ссылки и дизайнерские QR: как создавался проект

Сокращение URL — давно решённая задача, поэтому интересным был вопрос, откуда берётся счётчик кликов. Вместо серверного 301 редирект по адресу /s/:slug — это Vue-маршрут, который вызывает мутацию реактивного бэкенда, фиксирует визит и только затем передаёт браузер на целевой адрес. Так вся система остаётся статическим фронтендом поверх реактивной базы, а аналитика становится частью той же транзакции, что и переход, а не отдельным логом по принципу 'отправил и забыл'.

Разделы

Модули

Стек

Vue 3 + webedge-db

Почему появился проект

Что было создано

Сервис коротких ссылок с авторизацией: вошедшие пользователи создают ссылки с необязательным своим slug, заголовком и заметкой, а в ответ получают короткий URL и подходящий к нему QR-код. Каждая ссылка отслеживает число кликов и время последнего клика на основе отдельной таблицы clicks, хранящей referrer и user-agent для каждого визита. Интерфейс — одностраничное Vue-приложение с трёхъязычным (EN/LT/RU) UI и привязанными к пользователю коллекциями ссылок с поиском.

Основные модули и путь пользователя

M01

Мутация recordVisit атомарно увеличивает clickCount и lastClickedAt и добавляет запись в clicks (referrer, user-agent) до возврата целевого адреса — отслеживание транзакционное, а не отвязанный аналитический пинг

M02

Редирект /s/:slug — это клиентский маршрут, который запускает мутацию и затем window.location.replace, так что редирект и его аналитика — один реактивный вызов без отдельного сервера трекинга

M03

Движок slug со списком зарезервированных слов, валидацией 3–48 символов и генератором случайных slug из неоднозначного алфавита (без 0/1/l/o), который повторяет попытку при коллизии и увеличивает длину с 6 до 8 символов

M04

Защита целевого адреса: голые домены приводятся к https, не-http(s) протоколы отклоняются, а URL ограничиваются 2048 символами перед сохранением

M05

Генерация QR на стороне клиента в фирменной палитре ink/parchment под приложение, реактивно перегенерируемая в момент создания ссылки

Архитектура и технологические решения

Сделано на Vue 3, webedge-db, Tracking.

Одностраничное приложение на Vue 3 + Tailwind поверх собственного (self-hosted) реактивного бэкенда, с Better Auth для сессий, библиотекой qrcode для QR на клиенте и таблицами links/clicks/users, индексированными по slug и по пользователю для выборки списков.

Результат и выводы

Сам делаешь отслеживаемую короткую ссылку и брендовый QR и видишь клики — без стороннего сокращателя ссылок.

Компактный рабочий сервис, который правильно делает главное — транзакционный учёт кликов, безопасное распределение slug и QR-коды под палитру продукта; QR здесь 'дизайнерский' в смысле фирменной цветовой схемы, а не встроенной картинки.