A few weeks ago, I failed an interview. The task was simple: build a URL shortener. I had the knowledge and design of how to build it, but I couldn't. I was stuck, and my mind was frozen - literally, at that time, I couldn't think rationally. After this rejection, I realized that I was learning wrongly, or in other words, I didn't know how to connect the dots/concepts together into a whole piece. Then I was determined to do a project from scratch - not only coding but also finding answers to the questions: why this product is necessary, what problem it solves, and how much revenue it generates.
What It Is
First of all, let me start with what a URL shortener is, for the beginner guys. It is a tool that takes a long, messy web address (URL) and turns it into a short, clean link usually made up of a domain and a unique code. For example:
Original URL
https://www.example.com/blog/article?id=12345&utm_source=twitter&utm_campaign=summer_sale
Shortened URL
https://www.dwindle.com/abc123
Who Founded It and When
A web developer named Kevin Gilbertson was the first to create the popular URL shortener service called "TinyURL" in 2002. It helped people share long links in newspapers and emails without looking messy. Then came Bitly (2008), offering click tracking, analytics, and custom domains - converting URL shortening into a full business tool. Google also started their own called goo.gl (2009), but they shut it down completely in 2019.
Why We Need It
Just simple - wherever we want to use small, clean links and wherever there is a limitation to the number of characters used.
Where It Is Used
1. Advertising - Clean and small links are easy to grab attention.
2. Social Media - Platforms like X (formerly known as Twitter) have character limits. So in X, Instagram bios are a perfect use case.
3. Marketing - It is also used to track clicks, user devices, and location details so that campaigning and marketing can be done effectively.
4. Custom Domains - Instead of random letters, you can have your own domain for your brand. Increases trust and user experience.
How It Works
A URL shortener maps the original long URL to a short link and saves that in a database. Whenever a user clicks it, it uses redirection logic to redirect the user to the original URL.
Now if you are a techie/web programmer, something should strike you now!
I hope you got that - HTTP status codes - 3xx
Basic Flow:
- User submits a long URL on the frontend.
- Backend generates a unique short ID (like abc123).
- Mapping is saved in the database:
- { short: "abc123", original: "https://longsite.com/page?id=12345" }
- When someone visits dwin.gl/abc123, the backend:
- Looks up abc123 in the DB
- Redirects to the original URL
Basically there are two types of redirect - Permanent & Temporary:
301 Moved Permanently
For the first time alone, when the user clicks the shortened link, the URL shortening service looks for the mapped long URL and redirects the user and tells the browser that this is moved permanently.
Then the browser stores this mapping in its cache. From the next time onwards, the browser itself directly redirects to the original link.
302 Found or 307 Temporary Redirect
Same as above, but the browser doesn't store it in cache. Each time the user clicks the short URL, the URL shortener finds the original URL in the database and then redirects the user.
"Actually, what fascinates me is how on earth someone pre-calculated this redirection feature, designed and built the browser with so much precision. It made me very curious. Then I started exploring how browsers work and what browser engines are."
About Mine
Dwindle - the name of my URL shortener. If it sounds unfamiliar, you are not alone. I just googled other words for "tiny", "short" - then this word caught my eye.
✂️ Clean, short link generator
📊 Real-time click tracking via Supabase
🌎 Location + device analytics
🌈 Beautiful UI with ShadCN + Tailwind
⚡ Fast performance - client fetch, no page reload
Stack Used:
- React js
- Supabase (DB + Auth + Realtime)
- TailwindCSS
- ShadCN UI
- Netlify (Deployment)
Business and Stats
If you are someone who thought there is nothing big in URL shorteners, let numbers speak, my friend.
Bitly, founded in 2008, earns $50–70 million annually just using a freemium model. They have shortened 5 billion+ links and see 800 million+ clicks monthly.
Rebrandly, a company founded in 2015, earns $5–15 million per year. Their focus is mainly on marketing brands.
My Learnings
- Routing and dynamic link handling
- Handling QR-code generation and storage
- Supabase's Row-Level Security and queries
- Tailwind layout systems + responsiveness
- Tracking user behavior in DB
- Using charts for real-time analytics
- Handling async logic + loading states
- Sharpening debugging and console workflow
Also the business of how a simple tool can earn millions of dollars annually.
"Short links, Long reach"
Links
Live link
GitHub
Twitter
If there is any mistake, forgive me - it is not intentional. Kindly bring it to my notice. We discuss, share knowledge, and help each other.
Top comments (0)