Digital Zen: Why I Built My Own Minimalist URL Shortener

We’ve all been there.

You need to shorten a long, ugly URL. You Google "free url shortener." You click the first result. Boom. Popups. Cookie consent banners that cover half the screen. "Sign up for premium to analyze your clicks." Ads flashing in the sidebar.

I just wanted to make a link shorter. Why does it feel like I’m navigating a minefield?

I’m a developer who values precision and simplicity. Last weekend, I decided I was done with the clutter. I wanted a tool that felt like a breath of fresh air. Something simple. Something "Zen."

So, I bought the domain shrt.surf and built it myself.

Here is the story of how I stripped away the noise and built a secure, anonymous URL shortener from scratch.

The Philosophy: Radical Minimalism The goal was simple: One input field. One button. Zero distractions.

I call this aesthetic "Digital Zen." When you land on the page, there is no dashboard. No "Pricing" tab. Just a blinking cursor waiting for your command.

I built the frontend using React and Tailwind CSS. I focused heavily on micro-interactions—how the input underlines itself when focused, the smooth transition to Dark Mode (because, obviously, we need Dark Mode), and the satisfying "click" when a link is generated.

But making it look simple was the easy part. Making it work securely was the real challenge.

The Architecture: Going Serverless For a project like this, I didn't want to manage a VPS. I wanted speed and scalability.

Database: Firebase Firestore (for lightning-fast reads).

Hosting: Netlify (for the frontend and Edge Functions).

Redirects: Netlify Edge Functions.

The redirection logic happens at the edge. When you visit a short link, a serverless function intercepts the request, looks up the slug in Firestore, and issues a 301 redirect before the React app even thinks about loading. It’s instantaneous.

The Challenge: Fighting the Bots Here is the catch with building a public, anonymous tool: Spam.

If you leave a database write-endpoint open to the public, bots will find it. Within hours, your beautiful project will be hosting phishing links for malware.

I needed a way to verify humanity without ruining the Zen UI. I didn't want users clicking on pictures of traffic lights or crosswalks.

The Solution: Invisible Security

I implemented a "Hard Security" architecture using Google reCAPTCHA v3 and Netlify Functions.

Here is the flow:

Frontend: The user pastes a link. The app silently requests a token from Google reCAPTCHA (invisible in the background).

The Handshake: The frontend sends the URL + the Token to my backend function. It does not write to Firebase directly.

Backend Verification: My Netlify Function takes the token and asks Google: "Is this a human?"

The Verdict: If the score is high (human), the Function uses its Admin privileges to write the link to the database. If it's low (bot), the request is rejected immediately.

This means my database is completely locked down. No one can write to it directly from the browser. The only way in is through the "Bouncer" (my backend function).

The Result The result is SHRT.SURF.

It’s free. It’s fast. It doesn’t track you. It doesn’t show you ads. It just does the one thing it was designed to do: surf the web, simply.