Repository navigation
Templates: ten architecture diagrams for systems that only had a tutorial - #30
Merged
Merged
Conversation
…a tutorial New templates, each with a written guide: WhatsApp, Twitter, Airbnb, Discord, Zoom, Spotify, LinkedIn, Figma, GitHub and a rate limiter. Each contains every component its system design tutorial teaches plus the parts a complete design needs, with labelled connections (data/templates/tutorial-systems.ts). - Each template links to its tutorial and each tutorial back to its own template (a dedicated template now wins over the generic chat system). - Named products get the public-information note; the rate limiter is listed with the interview classics. - YouTube, Stripe, Shopify, DoorDash and Notion are left out: video streaming, payment system, e-commerce, food delivery and collaborative editor already cover them, and a second page would compete with it. - Spotify's clients are one node: two clients each fanning to the CDN and gateway broke fan centring (75px vs the 10px limit); all ten new templates now pass the layout ratchets at the defaults.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars.
 |
This was referenced Nov 7, 2026
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ten systems had a system design tutorial but no architecture diagram page, so searches like "WhatsApp architecture diagram" had nowhere to land. This PR adds a template for each, with a written guide:
WhatsApp, Twitter, Airbnb, Discord, Zoom, Spotify, LinkedIn, Figma, GitHub, Rate Limiter
data/templates/tutorial-systems.ts, with 11–18 components and labelled connections. Each contains every component its tutorial teaches, so the template page and the tutorial agree, plus the parts a complete design needs. An earlier version generated them straight from the tutorials, but several tutorials teach only eight components and some of their links read wrongly out of context.FAQPageJSON-LD. The rendered pages are 916–1,030 words.templateForTutorialnow prefers a template whose main tutorial is this one, so the WhatsApp tutorial links to the WhatsApp template instead of the generic chat system.Deliberately not added: YouTube, Stripe, Shopify, DoorDash and Notion. The existing video streaming, payment system, e-commerce, food delivery and collaborative editor templates already cover them and link to those tutorials. A second, near-identical page would compete with the first.
Spotify: the web and mobile clients are a single "Client Apps" node. With two clients each fanning out to both the CDN and the gateway, fan centring measured 75px against the 10px limit. All ten new templates pass the layout-quality checks at the default limits, with no per-template exceptions.
Base:
feat/template-guides-2(#29). Merge #28, then #29, then this.Test plan
tscand eslint cleandiagram-light.svgimages return 200; sitemap lists 36 template pages