Menu

1 / 2

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

DEV Community·Umair Shakoor·6 months ago
#N49EygIn
#react#typescript#webdev#server#const
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.