veyra - Dynamic QR Link

Every marketer has a spreadsheet that should be a database; every developer has an itch to build the link shortener they actually want to use, not one that feels like 2009; and every builder knows the exact moment a QR code dies — when it points to a URL you can no longer change. Veyra answers all three in one product. It started as a question — what would Bitly look like if Linear designed it? — and grew into a real exercise in auth, dynamic links, analytics pipelines, QR generation and a landing-page identity worth showing off.

The ideal user is a spectrum. The Solo Creator wants a short URL that just works, a QR for the merch table and a simple chart — and will bounce if the dashboard feels corporate. The Growth Marketer juggles five campaigns and needs expiry dates, click tracking for stakeholders, and the ability to swap a destination mid-campaign without killing QR codes already printed on 10,000 flyers. The Developer skims the stack first. The Design-Aware user decides in three seconds whether it feels like a tool worth their time — Veyra's whole identity is built to earn those three seconds.

Most link tools pick dark mode, blue accents and a grid of cards — safe, forgettable. Veyra went the opposite way: a warm editorial palette influenced by premium lifestyle brands. Beige (#F2E9E0) for the background, dark green (#133622) for gravitas and active nav, sage (#BCC5B8) as the quiet section-breathing hero, cream cards, and coral (#F05C4D) as a focused signal of intent that appears exactly where action is required. Link management is a marketing tool — it should feel like something a marketer wants open, not a utility they tolerate.

A serif for headings and sans for body — the editorial pairing you'd find in a well-produced magazine, giving a dashboard that feels crafted rather than templated. Headlines run generous (8xl on the hero) and present rather than shout, with italics on key words ('a better way to grow') adding conversational rhythm. The landing uses wavy SVG transitions between color zones and Framer Motion throughout — including an orbital 'global reach' system where a Globe, LinkIcon, BarChart and QrCode literally orbit concentric rings to communicate scope viscerally.

Next.js 16 App Router with TypeScript 5, Tailwind v4 and shadcn/ui, Framer Motion for animation and Recharts for charts, over MongoDB Atlas through a type-safe Prisma schema, with NextAuth handling Google OAuth and credentials. Four lean models carry the whole system: User owns Links; Link stores originalUrl, a unique slug, click count, active flag and optional expiresAt; AnalyticsEvent is one row per click capturing ip, browser, referrer, os, device, country and an isQrScan boolean — the raw ledger the dashboard aggregates.

The redirect lives at [slug]/route.ts as a pure server route that runs on every hit: resolve the slug, 404 if missing or inactive, 302 to /expired if past expiry, detect ?ref=qr to flag QR scans, then — the critical detail — call logAnalytics() without await so the redirect fires instantly while the DB write happens in the background. Redirect latency is a user-facing metric; analytics latency is not. Users never wait for the write.

The QR route takes a slug, builds the full short URL, hands it to the qrcode library and streams back a 400px PNG with a one-year immutable Cache-Control. That header is the smart move: the QR for a slug never changes — it's a pure function of the short URL, so cache it forever. The destination can change without ever touching the QR image, which is the entire value proposition of dynamic QR codes. And isQrScan needs zero extra tables — it's just ?ref=qr detected at redirect time.

NextAuth wires sessions straight to MongoDB via the Prisma adapter, and a single getServerSession guard at the top of every server component gates the dashboard — no middleware complexity, no edge-case session state. Mutations run as Next.js server actions (updateLinkDestination, deleteLink) that fold ownership into the query itself: where: { id, userId } makes it impossible to touch another user's link even with a valid session, and revalidatePath refreshes the dashboard without a full reload.

The dashboard home is a server component running three parallel queries — links, total clicks, and QR scans where isQrScan is true — composing a three-metric header over a recent-links list and a dark 'Unlock Potential' anchor card. Analytics builds a 7-day coral line chart by bucketing events with date-fns, and the Top Links breakdown separates QR scans from direct clicks per link via a groupBy — clicks minus qrScans gives clean channel attribution with no extra infrastructure.

The MVP ships the core loop — create link → share → scan QR → see analytics — and leaves the rest as acceleration, not foundation. Custom domains, geo/device routing, password-protected and click-limited links, and team workspaces are all one migration or one rule away: the schema already carries country and device columns and captures the user-agent, so the data model is ready when the features are. It's an MVP with a production-grade visual identity — coherent color tokens from landing button to chart line, and it looks like something worth paying for. That's the hardest part; the rest is just features.