Abhinav

Posted on Dec 14

🔗 Designing a URL Shortener: From Architecture to Node.js Implementation

#systemdesign #interview #node #softwaredevelopment

After practicing system design concepts for a while, I finally decided to apply them by building real projects. This URL shortener is my first assignment, where I focused on translating high-level design ideas into a working system—covering architecture, caching, databases, and scalability considerations. The goal was not just to build a feature, but to think through the trade-offs and design decisions that matter in production systems.

A URL shortener is one of those systems that looks trivial at first glance but reveals deep engineering challenges once we design it for scale, reliability, and performance.

In this blog, we’ll design a URL shortener end-to-end:

What a URL shortener is and why we need it
High-Level Design (HLD)
Database and caching strategy
Browser cache & HTTP redirects
Back-of-the-envelope calculations
A clean Node.js implementation with code

1️⃣ What Is a URL Shortener?

A URL shortener converts a long URL into a compact alias.

Example

Long URL:
https://www.example.com/products/electronics/mobiles/samsung/galaxy-s23-ultra

Short URL:
https://sho.rt/aZ9kQ

When someone opens the short URL, the system:

Finds the original long URL
Redirects the user to it

At its core, this is a key–value mapping:

short_code → long_url

2️⃣ Why Do We Need URL Shorteners?

🔹 Better User Experience

Long URLs are hard to read, remember, and share.

🔹 Platform Constraints

SMS, social media posts, QR codes, and print media benefit from shorter links.

🔹 Analytics

We can track:

Click counts
Time
Location
Device / browser

🔹 Link Management

We gain the ability to:

Expire links
Disable links
Rotate destinations
Run A/B tests

3️⃣ High-Level Design (HLD)

🧱 Logical Architecture

🔹 Why Each Component Exists

Browser Cache → Fastest cache (used carefully)
CDN → Global low latency
Load Balancer → Traffic distribution & failover
Service Layer → Stateless business logic
Redis → Ultra-fast lookups for hot links
Database → Durable storage

4️⃣ Database Design

📦 Data Model

Field	Description
short_code	Primary key
long_url	Original URL
created_at	Creation time
expiry_at	Optional
click_count	Optional

🗄️ SQL vs NoSQL

SQL → Simpler, strong consistency
NoSQL (DynamoDB / Cassandra) → Horizontal scale, high throughput

👉 At scale, this is a NoSQL key-value workload:

Partition Key = short_code

5️⃣ Server-Side Cache (Redis)

Redirect traffic is ~99% reads.

🔥 Why Redis?

Memory-level speed
Offloads database
Handles hot links efficiently

⚡ Redirect Flow

Request
  ↓
Redis hit → Redirect
Redis miss → DB lookup → Cache → Redirect

6️⃣ Browser Cache (Important Trade-off)

Browser cache sits before our servers and can completely bypass them.

Redirect Status Codes Matter

Status	Browser Behavior
301	Cached aggressively
302 / 307	Revalidated / not cached

Typical Production Strategy

We usually disable browser caching:

Cache-Control: no-store, no-cache, must-revalidate

Why?

We don’t lose analytics
We can revoke links
We can rotate destinations

👉 Speed comes from Redis + CDN, not browser cache.

7️⃣ Short Code Generation

Base62 Encoding

Characters:

a–z A–Z 0–9  (62 chars)

Benefits:

URL-safe
Compact
Deterministic

Example:

ID: 125 → cb

8️⃣ Back-of-the-Envelope Calculations

Assumptions

DAU: 10 million
URLs created/user/day: 0.1
Redirects per URL/day: 50

Write Traffic

1M URLs/day ≈ 12 writes/sec

Read Traffic

50M redirects/day ≈ 580 RPS
Peak ≈ 3,000 RPS

👉 System is read-heavy, so caching dominates design.

Storage

~260 bytes / URL
365M URLs/year ≈ 95 GB/year

Manageable with NoSQL.

Redis Cache

10M hot URLs × 300 bytes ≈ 3 GB

9️⃣ Node.js Implementation

📁 Project Structure

src/
 ├── app.ts
 ├── controllers/
 │    └── url.controller.ts
 ├── services/
 │    └── url.service.ts
 ├── repositories/
 │    └── url.repository.ts
 ├── cache/
 │    └── redis.client.ts
 └── utils/
      └── base62.ts

🔹 Base62 Encoder

// utils/base62.ts
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

export function encodeBase62(num: number): string {
  let result = "";
  while (num > 0) {
    result = chars[num % 62] + result;
    num = Math.floor(num / 62);
  }
  return result;
}

🔹 Redis Client

// cache/redis.client.ts
import Redis from "ioredis";

export const redis = new Redis({
  host: "localhost",
  port: 6379
});

🔹 Repository Layer (DB abstraction)

// repositories/url.repository.ts
const db = new Map<string, string>(); // mock DB

export class UrlRepository {
  async save(shortCode: string, longUrl: string) {
    db.set(shortCode, longUrl);
  }

  async findByShortCode(code: string): Promise<string | null> {
    return db.get(code) || null;
  }
}

🔹 Service Layer (Core Logic)

// services/url.service.ts
import { UrlRepository } from "../repositories/url.repository";
import { redis } from "../cache/redis.client";
import { encodeBase62 } from "../utils/base62";

let globalId = 100000;

export class UrlService {
  private repo = new UrlRepository();

  async createShortUrl(longUrl: string): Promise<string> {
    const id = globalId++;
    const shortCode = encodeBase62(id);

    await this.repo.save(shortCode, longUrl);
    await redis.set(shortCode, longUrl);

    return shortCode;
  }

  async getLongUrl(shortCode: string): Promise<string | null> {
    const cached = await redis.get(shortCode);
    if (cached) return cached;

    const longUrl = await this.repo.findByShortCode(shortCode);
    if (!longUrl) return null;

    await redis.set(shortCode, longUrl);
    return longUrl;
  }
}

🔹 Controller Layer

// controllers/url.controller.ts
import { Request, Response } from "express";
import { UrlService } from "../services/url.service";

const service = new UrlService();

export async function shortenUrl(req: Request, res: Response) {
  const { longUrl } = req.body;
  const code = await service.createShortUrl(longUrl);

  res.json({
    shortUrl: `https://sho.rt/${code}`
  });
}

export async function redirect(req: Request, res: Response) {
  const { code } = req.params;
  const longUrl = await service.getLongUrl(code);

  if (!longUrl) {
    return res.status(404).send("Not found");
  }

  res.setHeader("Cache-Control", "no-store");
  res.redirect(302, longUrl);
}

🔹 App Entry Point

// app.ts
import express from "express";
import { shortenUrl, redirect } from "./controllers/url.controller";

const app = express();
app.use(express.json());

app.post("/shorten", shortenUrl);
app.get("/:code", redirect);

app.listen(3000, () => {
  console.log("URL Shortener running on port 3000");
});