ProgramGuru

URL Shortener

URL Shortener — purpose and prerequisites

A URL shortener maps a short code to a validated destination URL. A complete service needs uniqueness, persistence, abuse prevention, and safe redirect handling. This example creates predictable unique short codes in memory and demonstrates lookup; production codes should be designed for collision behavior and abuse resistance.

What you’ll learn

  • Explain the purpose of url shortener.
  • Identify the typed contract, runtime responsibilities and common pitfalls.
  • Run the example and extend its behavior with a practical exercise.

How the idea works

The URL constructor checks syntax, the protocol guard allows only HTTP(S), and the incrementing counter produces the first short code 1. A real HTTP redirect uses an appropriate 3xx response.

Never redirect to arbitrary javascript: URLs, and do not trust sequential in-memory IDs for a real multi-instance public service.

Visualize the flow

URL Shortener — learning flowLong URL → Validate + assign code → Short-code resolutionURL Shortener1Long URL2Validate + assign code3Short-code resolutionProject core logic is executable; integrations may need setup.
A three-step view of the responsibilities and the observable result.

Run the checked TypeScript example

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

class UrlShortener {
  private readonly links = new Map<string, string>();
  private next = 1;
  create(rawUrl: string): string {
    const url = new URL(rawUrl);
    if (url.protocol !== "https:" && url.protocol !== "http:") throw new Error("Unsupported protocol");
    const code = (this.next++).toString(36);
    this.links.set(code, url.toString());
    return code;
  }
  resolve(code: string): string | undefined { return this.links.get(code); }
}
const shortener = new UrlShortener();
const code = shortener.create("https://example.com/docs");
console.log(code);
console.log(shortener.resolve(code));

Verified output

1
https://example.com/docs

Compile: npx tsc --strict --target es2022 --module commonjs url-shortener.ts; run: node url-shortener.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

Trace the execution

The URL constructor checks syntax, the protocol guard allows only HTTP(S), and the incrementing counter produces the first short code 1. A real HTTP redirect uses an appropriate 3xx response.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Common mistake and correction

Never redirect to arbitrary javascript: URLs, and do not trust sequential in-memory IDs for a real multi-instance public service.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Your turn: extend the example

Add custom aliases with duplicate detection and persistence. Return 404 when resolving an unknown code.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

Check your understanding

Which statement correctly describes url shortener in the example?
Choose one answer. You can try again.

Answer and explanation

The URL constructor checks syntax, the protocol guard allows only HTTP(S), and the incrementing counter produces the first short code 1.

The URL constructor checks syntax, the protocol guard allows only HTTP(S), and the incrementing counter produces the first short code 1. A real HTTP redirect uses an appropriate 3xx response.

Key idea to remember

The URL constructor checks syntax, the protocol guard allows only HTTP(S), and the incrementing counter produces the first short code 1. A real HTTP redirect uses an appropriate 3xx response.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: React Task Management Application →