// Generated by orrery. Edit the diagram spec and re-render instead of editing this file. import { type SVGProps, useId } from "react"; export default function URLShortenerSystemDesign(props: SVGProps) { const uid = useId().replace(/[^A-Za-z0-9_-]/g, ""); return ( URL shortener system design URL shortener system design. 11 components in 1 groups. Connections: Clients to CDN (GET /abc123); Clients to Load balancer (POST /links); CDN to Load balancer (cache miss); Load balancer to API servers; API servers to Redis (lookup, fill on miss); API servers to PostgreSQL (read on miss, insert new); API servers to ID generator (new link); API servers to Kafka (click event); CDN to Kafka (edge logs); Kafka to Apache Flink; Apache Flink to ClickHouse; ClickHouse to Dashboards (query). URL SHORTENER SYSTEM DESIGN Redirects are served from the CDN and a Redis cache in front of PostgreSQL; every click streams through Kafka into an analytics pipeline GET /ABC123 GET /ABC123 POST /LINKS CACHE MISS CACHE MISS LOOKUP, FILL ON MISS READ ON MISS, INSERT NEW NEW LINK CLICK EVENT CLICK EVENT EDGE LOGS QUERY CLICK ANALYTICS PIPELINE CLIENTS Browsers and apps CDN Caches popular redirects LOAD BALANCER API SERVERS Stateless X3 REDIS Hot short codes POSTGRESQL Sharded by short code ID GENERATOR Base62 key ranges KAFKA clicks topic APACHE FLINK Counts per link CLICKHOUSE Click analytics DASHBOARDS REQUEST OR QUERY ASYNCHRONOUS EVENT OR STREAM ); }