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

说明与用途

构建了一个交互式系统设计参考，支持在 AWS、Azure、GCP 和开源服务之间切换架构，并提供逐步请求演练。

问题

System design diagrams were static, vendor‑specific, and scattered across notes, making it hard to understand or translate architectures between clouds.

结果

The project delivers an interactive reference that lets users view and switch system architectures across multiple clouds, walk through request flows, and explore component options, aiding interview prep and real‑world design work.

工作流

• Create a static site with Next.js and React Flow for diagrams
• Define system data in typed content files validated with Zod
• Implement cloud‑agnostic component mapping and one‑click cloud switching
• Add hop‑by‑hop walkthroughs highlighting request flow
• Provide component pages with provider options and pitfalls
• Build learning paths and search functionality

证据

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

来源

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

来源

Instead of just looking at a diagram, you can follow a request step by step

来源