Web Tool · Product prototype · 2026
SnapLink
A front-end prototype of a URL shortener — custom or random slugs, instant copy and an offline QR code for every link, built without a framework.
- Role
- Design & front-end development
- Built with
- HTML · CSS · JavaScript · SVG
Screens
3 screenshots · 1920 × 1080
Overview
SnapLink is a static, framework-free prototype of a link shortener that explores how fast the core flow can feel: paste a link, get a short one, and it is already on your clipboard. Links are stored in the browser — it is a design and front-end prototype, not a production redirect service.
The problem
Most link shorteners put an account, a cookie banner and several steps between you and a short link.
The solution
A single-screen flow with URL validation, custom or random slugs with a live availability check, automatic copy with a fallback, and a QR code generated in the browser.
What I built
Validation & normalisation
Requires a real host and adds https:// automatically, with plain-language error messages.
Custom or random slugs
Pattern-checked custom slugs with a live available/taken hint, or a 6-character code from an unambiguous alphabet.
Instant copy
Copies the short link automatically, falling back gracefully when the Clipboard API is blocked.
Offline QR codes
A dependency-free SVG QR generator (a trimmed port of Project Nayuki’s MIT library) with .svg download.
How it’s built
- Cmd/Ctrl + Enter keyboard shortcut to shorten.
- Theme applied before first paint to avoid a flash, and remembered between visits.
- The analytics views use simulated data — the backend API described in the docs is intentionally not wired up.