I Built a Visual System Design Reference — Switch Any Architecture Between AWS, Azure, GCP & Open Source

Description and use

An interactive reference that lets users switch system architectures across AWS, Azure, GCP, and open source, with hop‑by‑hop walkthroughs.

Problem

Diagrams were static, vendor‑specific, and notes were scattered, making it hard to understand real‑world system flows.

Outcome

The project provides a unified, cloud‑agnostic visual reference that simplifies learning, interview preparation, and real‑world system design.

Workflow

• Build interactive diagrams for each system
• Implement cloud‑agnostic labeling
• Add hop‑by‑hop walkthroughs
• Create component detail pages
• Publish live site and GitHub repo

Evidence

Diagrams were static — you could see the boxes, but not how a request actually flows through them.

Source

Every diagram was tied to one vendor's vocabulary. An AWS diagram says "S3, SQS, DynamoDB", a GCP one says "Cloud Storage, Pub/Sub, Bigtable" — and translating between them in your head is tiring.

Source

Like a lot of developers, I've spent hours reading system design articles, watching interview prep videos, and staring at static diagrams trying to understand how YouTube actually handles an upload or how Uber matches a rider to a driver in real time.

Source

System Design Explainer is an interactive system design reference site where you can visualise architectures of real-world systems and view the same architecture through different tool lenses — a generic view, AWS, Google Cloud, Azure, or open-source tooling.

Source

Every architecture can be relabelled for Generic, AWS, Google Cloud, Azure, or Open source.

Source

You can follow a request step by step — upload a video, book a seat, pay a merchant, create a short link.

Source