---
title: "Shortwick: a URL shortener with click analytics"
author: "@chris"
author_url: https://elements.dev/users/chris
published: 2026-09-30T21:16:54.039Z
url: https://elements.dev/demos/30d9n0os/shortwick-a-url-shortener-with-click-analytics
kind: post
format: article
---

# Shortwick: a URL shortener with click analytics

by [@chris](https://elements.dev/users/chris) · 2026-09-30

## Description

Short links with custom back-halves and expiry dates, instant redirects, live click counts, referrer, country and device breakdowns, tags, search and QR codes.

Shortwick needed short links that redirect at once, a click count that climbs while the owner watches, breakdowns by referrer, country and device, QR codes and accounts. Each of those is a part of Elements, so the agent spent its 18 minutes on the shortener itself.

**What Elements gave the app**

- **Live click counts.** Links are a LiveTable, one view per owner, and a trigger publishes each new count, so the dashboard's numbers climb as visitors click.
- **Links edited straight through the view.** The dashboard creates, edits, switches off and deletes links through the live view itself. The table checks the owner, validates the url and back-half, and reports a taken back-half on the form.
- **Redirects first, counting after.** A short link sends the visitor on their way, then stores the click and bumps the count in one transaction. Expired and switched-off links get their own page.
- **Analytics that update as clicks arrive.** Each click also goes out on a channel, and a link's analytics page adds it to the chart and the referrer, country and device lists over 7, 30 or 90 days.
- **QR codes.** Each link has a QR code served as a PNG, built with an npm package.
- **Data and sessions from SQL.** Migrations define the shortener and seed two users, twenty links and three months of clicks, and each owner signs in with a session.

**What the project server gave the agent**

The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.

**What shipped**

The app type-checks with zero errors and all 32 tests pass. Every page works on desktop and phone.