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

Источник