Menu

Post image 1
Post image 2
1 / 2
0

How I Built Expiring Links With Zero Backend (React + TypeScript Only)

DEV Community·Umair Shakoor·about 1 month ago
#N49EygIn
#react#typescript#webdev#server#const#expiry
Reading 0:00
15s threshold

Most "expiring link" tools work the same way: generate a link, store the destination and expiry in a database, check the database on every click, redirect or block accordingly. That's the obvious approach. It's also the one that requires a backend, a database, server costs, and a breach surface. I had a constraint: React + TypeScript only, deployed on Vercel, no Node.js, no database, no backend whatsoever. So I had to find a different way. The Core Idea: Put Everything in the URL Instead of storing link data on a server, encode it directly into the URL itself. When a user creates an expiring link, the app: Takes the destination URL Takes the expiry timestamp (Unix ms) Combines them into a JSON object Encodes it with btoa() (base64) Appends it as a URL parameter Shortens the full URL via TinyURL's API const payload = { url : destinationUrl , exp : expiryTimestamp }; const encoded = btoa ( JSON .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More