Short links and designer QR

Vue 3 + webedge-db: a short-link service with click tracking, plus a QR designer.

Vue 3webedge-dbTracking

Dev-story

Challenge

Sharing a campaign means a short URL you can track and a QR code that does not look like a generic black square — usually two separate paid tools.

What we did

A short-link app (Vue 3 + webedge-db, Better Auth) with per-user link collections, public short URLs and click tracking, paired with a designer QR generator that styles the code; both run on our webedge-db backend.

Result

You make a tracked short link and a branded QR yourself, and see the clicks — without a third-party link shortener.

Dev-story article

Short links and designer QR: how the project was built

A URL shortener is a solved problem, so the interesting question was where the click count comes from. Instead of a server-side 301, the redirect at /s/:slug is a Vue route that calls a reactive-backend mutation, records the visit, and only then hands the browser to the destination. That keeps the whole thing a static frontend against a reactive database, with analytics that are part of the same transaction as the hop rather than a fire-and-forget log.

Sections

Modules

Stack

Vue 3 + webedge-db

Why the project exists

Sharing a campaign means a short URL you can track and a QR code that does not look like a generic black square — usually two separate paid tools.

What was built

An authenticated short-link service: signed-in users create links with optional custom slugs, titles and notes, then get back a short URL and a matching QR code. Each link tracks a click count and last-clicked time, backed by a separate clicks table storing referrer and user-agent per visit. The UI is a single-page Vue app with a trilingual (EN/LT/RU) interface and per-user, searchable link collections.

Main modules and user path

M01

recordVisit mutation atomically bumps clickCount and lastClickedAt and appends a clicks row (referrer, user-agent) before returning the destination — tracking is transactional, not a detached analytics ping

M02

The /s/:slug redirect is a client route that runs the mutation and then window.location.replace, so the redirect and its analytics are a single reactive call with no separate tracking server

M03

Slug engine with a reserved-word blocklist, 3–48 char validation, and a random generator over an unambiguous alphabet (no 0/1/l/o) that retries on collision and escalates from 6 to 8 characters

M04

Destination hardening: bare domains are coerced to https, non-http(s) protocols are rejected, and URLs are capped at 2048 characters before storage

M05

Client-side QR generation with a branded ink/parchment palette that matches the app, regenerated reactively the moment a link is created

Architecture and technology decisions

Built with Vue 3, webedge-db, Tracking.

Vue 3 + Tailwind single-page app against a self-hosted reactive backend, with Better Auth for sessions, the qrcode library for client-side QR, and links/clicks/users tables indexed by slug and by user for scoped listing.

Result and lessons

You make a tracked short link and a branded QR yourself, and see the clicks — without a third-party link shortener.

A compact, working service that gets the mechanics right — transactional click tracking, safe slug allocation, and QR codes styled to the product palette; the QR is designer in the sense of a branded color scheme rather than embedded artwork.