From e7e87a35196efbe28bd8527c2a52b38be9cb43e1 Mon Sep 17 00:00:00 2001 From: Harivansh Rathi Date: Tue, 6 Jan 2026 23:52:49 +0530 Subject: [PATCH] new routes --- src/routes/compare/+page.svelte | 54 ++++++ src/routes/compare/api-design/+page.svelte | 155 ++++++++++++++++++ src/routes/compute/+page.svelte | 54 ++++++ src/routes/compute/containers/+page.svelte | 75 +++++++++ .../compute/virtual-machines/+page.svelte | 107 ++++++++++++ src/routes/databases/+page.svelte | 54 ++++++ src/routes/databases/nosql/+page.svelte | 62 +++++++ src/routes/databases/sql/+page.svelte | 59 +++++++ src/routes/decisions/+page.svelte | 54 ++++++ src/routes/decisions/serverless/+page.svelte | 109 ++++++++++++ src/routes/decisions/which-queue/+page.svelte | 124 ++++++++++++++ src/routes/fundamentals/+page.svelte | 54 ++++++ .../fundamentals/consistency/+page.svelte | 97 +++++++++++ src/routes/fundamentals/latency/+page.svelte | 105 ++++++++++++ src/routes/fundamentals/scaling/+page.svelte | 109 ++++++++++++ src/routes/messaging/+page.svelte | 54 ++++++ .../messaging/event-driven/+page.svelte | 51 ++++++ src/routes/messaging/pubsub/+page.svelte | 58 +++++++ src/routes/messaging/queues/+page.svelte | 61 +++++++ src/routes/networking/+page.svelte | 54 ++++++ src/routes/networking/cdn/+page.svelte | 55 +++++++ src/routes/networking/vpc/+page.svelte | 77 +++++++++ src/routes/security/+page.svelte | 54 ++++++ src/routes/security/encryption/+page.svelte | 54 ++++++ src/routes/security/iam/+page.svelte | 59 +++++++ src/routes/security/secrets/+page.svelte | 58 +++++++ src/routes/storage/+page.svelte | 54 ++++++ src/routes/storage/block/+page.svelte | 56 +++++++ src/routes/storage/file/+page.svelte | 57 +++++++ src/routes/storage/object/+page.svelte | 58 +++++++ 30 files changed, 2132 insertions(+) create mode 100644 src/routes/compare/+page.svelte create mode 100644 src/routes/compare/api-design/+page.svelte create mode 100644 src/routes/compute/+page.svelte create mode 100644 src/routes/compute/containers/+page.svelte create mode 100644 src/routes/compute/virtual-machines/+page.svelte create mode 100644 src/routes/databases/+page.svelte create mode 100644 src/routes/databases/nosql/+page.svelte create mode 100644 src/routes/databases/sql/+page.svelte create mode 100644 src/routes/decisions/+page.svelte create mode 100644 src/routes/decisions/serverless/+page.svelte create mode 100644 src/routes/decisions/which-queue/+page.svelte create mode 100644 src/routes/fundamentals/+page.svelte create mode 100644 src/routes/fundamentals/consistency/+page.svelte create mode 100644 src/routes/fundamentals/latency/+page.svelte create mode 100644 src/routes/fundamentals/scaling/+page.svelte create mode 100644 src/routes/messaging/+page.svelte create mode 100644 src/routes/messaging/event-driven/+page.svelte create mode 100644 src/routes/messaging/pubsub/+page.svelte create mode 100644 src/routes/messaging/queues/+page.svelte create mode 100644 src/routes/networking/+page.svelte create mode 100644 src/routes/networking/cdn/+page.svelte create mode 100644 src/routes/networking/vpc/+page.svelte create mode 100644 src/routes/security/+page.svelte create mode 100644 src/routes/security/encryption/+page.svelte create mode 100644 src/routes/security/iam/+page.svelte create mode 100644 src/routes/security/secrets/+page.svelte create mode 100644 src/routes/storage/+page.svelte create mode 100644 src/routes/storage/block/+page.svelte create mode 100644 src/routes/storage/file/+page.svelte create mode 100644 src/routes/storage/object/+page.svelte diff --git a/src/routes/compare/+page.svelte b/src/routes/compare/+page.svelte new file mode 100644 index 0000000..e7da194 --- /dev/null +++ b/src/routes/compare/+page.svelte @@ -0,0 +1,54 @@ + + + + Compare - System Design Explorer + + +
+
+
+ Overview + + Compare +
+

Compare

+

+ Side-by-side analysis with quick “when to use” guidance. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Comparison guide

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/compare/api-design/+page.svelte b/src/routes/compare/api-design/+page.svelte new file mode 100644 index 0000000..2962237 --- /dev/null +++ b/src/routes/compare/api-design/+page.svelte @@ -0,0 +1,155 @@ + + + + REST vs GraphQL vs gRPC - System Design Explorer + + +
+
+
+ Compare + + REST vs GraphQL vs gRPC +
+

REST vs GraphQL vs gRPC

+

+ API style is a product and operational decision: clients, latency, caching, and contracts all matter. +

+
+ +
+ +
+ +
+

References

+ +
+
diff --git a/src/routes/compute/+page.svelte b/src/routes/compute/+page.svelte new file mode 100644 index 0000000..f9ad3fa --- /dev/null +++ b/src/routes/compute/+page.svelte @@ -0,0 +1,54 @@ + + + + Compute - System Design Explorer + + +
+
+
+ Overview + + Compute +
+

Compute

+

+ How your code runs: VMs, containers, Kubernetes, and serverless execution models. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Concepts + trade-offs

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/compute/containers/+page.svelte b/src/routes/compute/containers/+page.svelte new file mode 100644 index 0000000..079800a --- /dev/null +++ b/src/routes/compute/containers/+page.svelte @@ -0,0 +1,75 @@ + + + + Containers - System Design Explorer + + +
+
+
+ Compute + + Containers +
+

Containers

+

+ Lightweight deployment units: ship code as images and run them with predictable runtime boundaries. +

+
+ +
+ {#each highlights as h} +
+

{h.title}

+

{h.desc}

+
+ {/each} +
+ +
+

Operational Notes

+
    +
  • Use immutable images; avoid “ssh and fix” in running containers.
    • +
  • Prefer one process per container; scale via replicas.
    • +
  • Log to stdout/stderr; let the platform aggregate.
    • +
  • Define CPU/memory limits to prevent noisy neighbors.
    • +
+
+ +
+

References

+ +
+ +
+ + Virtual Machines + + + Kubernetes + +
+
+ diff --git a/src/routes/compute/virtual-machines/+page.svelte b/src/routes/compute/virtual-machines/+page.svelte new file mode 100644 index 0000000..6de14fd --- /dev/null +++ b/src/routes/compute/virtual-machines/+page.svelte @@ -0,0 +1,107 @@ + + + + Virtual Machines - System Design Explorer + + +
+
+
+ Compute + + Virtual Machines +
+

Virtual Machines

+

+ A VM gives you an isolated OS environment—max control, max operational responsibility. +

+
+ + + +
+
+

When VMs shine

+
    +
  • Legacy apps that expect full OS control
    • +
  • Specialized kernel / drivers / networking
    • +
  • Long-running services with predictable load
    • +
+
+
+

Common pitfalls

+
    +
  • Config drift without automation (IaC + images)
    • +
  • Snowflake servers (manual fixes)
    • +
  • Slow patching and inconsistent security posture
    • +
+
+
+ +
+

References

+ +
+ +
+ + Compute + + + Containers + +
+
diff --git a/src/routes/databases/+page.svelte b/src/routes/databases/+page.svelte new file mode 100644 index 0000000..76e7b4e --- /dev/null +++ b/src/routes/databases/+page.svelte @@ -0,0 +1,54 @@ + + + + Databases - System Design Explorer + + +
+
+
+ Overview + + Databases +
+

Databases

+

+ Choose the right data model and scaling strategy: SQL, NoSQL, caching, and replication. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Concepts + patterns

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/databases/nosql/+page.svelte b/src/routes/databases/nosql/+page.svelte new file mode 100644 index 0000000..ffc7e87 --- /dev/null +++ b/src/routes/databases/nosql/+page.svelte @@ -0,0 +1,62 @@ + + + + NoSQL Databases - System Design Explorer + + +
+
+
+ Databases + + NoSQL Databases +
+

NoSQL Databases

+

+ A family of models optimized for scale, availability, and flexible schemas—at the cost of uniform query power. +

+
+ +
+ {#each models as m} +
+

{m.title}

+

{m.desc}

+
+ {/each} +
+ +
+

Design note

+

+ With NoSQL, model around access patterns: define the queries first, then shape the data to serve them cheaply. +

+
+ {#each references as ref} + + {ref.label} + + {/each} +
+
+
diff --git a/src/routes/databases/sql/+page.svelte b/src/routes/databases/sql/+page.svelte new file mode 100644 index 0000000..e34d71d --- /dev/null +++ b/src/routes/databases/sql/+page.svelte @@ -0,0 +1,59 @@ + + + + SQL Databases - System Design Explorer + + +
+
+
+ Databases + + SQL Databases +
+

SQL Databases

+

+ The default choice for many products: strong correctness, powerful querying, and mature tooling. +

+
+ +
+ {#each traits as t} +
+

{t.title}

+

{t.desc}

+
+ {/each} +
+ +
+

Next steps

+
+ {#each references as ref} + + {ref.label} + + {/each} + SQL vs NoSQL +
+
+
diff --git a/src/routes/decisions/+page.svelte b/src/routes/decisions/+page.svelte new file mode 100644 index 0000000..96bf641 --- /dev/null +++ b/src/routes/decisions/+page.svelte @@ -0,0 +1,54 @@ + + + + Decision Trees - System Design Explorer + + +
+
+
+ Overview + + Decision Trees +
+

Decision Trees

+

+ Interactive guides that turn requirements into an architecture choice. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Decision walkthrough

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/decisions/serverless/+page.svelte b/src/routes/decisions/serverless/+page.svelte new file mode 100644 index 0000000..0d5f389 --- /dev/null +++ b/src/routes/decisions/serverless/+page.svelte @@ -0,0 +1,109 @@ + + + + Serverless or Not? - System Design Explorer + + +
+
+
+ Decision Trees + + Serverless or Not? +
+

Serverless or Not?

+

+ Use this quick decision tree to pick between serverless functions and always-on compute. +

+
+ +
+ +
+ +
+

References

+ +
+
diff --git a/src/routes/decisions/which-queue/+page.svelte b/src/routes/decisions/which-queue/+page.svelte new file mode 100644 index 0000000..8f7bcbe --- /dev/null +++ b/src/routes/decisions/which-queue/+page.svelte @@ -0,0 +1,124 @@ + + + + Which Message Queue? - System Design Explorer + + +
+
+
+ Decision Trees + + Which Message Queue? +
+

Which Message Queue?

+

+ Decide between queue, pub/sub, broker, and event streaming based on your requirements. +

+
+ +
+ +
+ +
+

References

+ +
+ Kafka vs RabbitMQ +
+
+
diff --git a/src/routes/fundamentals/+page.svelte b/src/routes/fundamentals/+page.svelte new file mode 100644 index 0000000..507b0e0 --- /dev/null +++ b/src/routes/fundamentals/+page.svelte @@ -0,0 +1,54 @@ + + + + Fundamentals - System Design Explorer + + +
+
+
+ Overview + + Fundamentals +
+

Fundamentals

+

+ Core distributed systems concepts: consistency, scaling, and performance trade-offs. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Interactive explainer

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/fundamentals/consistency/+page.svelte b/src/routes/fundamentals/consistency/+page.svelte new file mode 100644 index 0000000..911ce74 --- /dev/null +++ b/src/routes/fundamentals/consistency/+page.svelte @@ -0,0 +1,97 @@ + + + + Consistency Models - System Design Explorer + + +
+
+
+ Fundamentals + + Consistency Models +
+

Consistency Models

+

+ How quickly reads reflect writes in a distributed system (and what you trade for it). +

+
+ +
+

Common Models

+
+
+

Strong consistency

+

+ Reads always see the latest successful write. Simple mental model; can cost availability/latency under partitions. +

+
+
+

Eventual consistency

+

+ Replicas converge over time. Higher availability and lower latency; clients may observe stale data temporarily. +

+
+
+

Read-your-writes

+

+ After a client writes, they will see their own write on subsequent reads (session guarantees). +

+
+
+

Causal consistency

+

+ Preserves cause→effect ordering (if A influenced B, everyone sees A before B) without full strong consistency. +

+
+
+
+ +
+

Design Checklist

+
    +
  • What user-visible anomalies are acceptable (stale reads, reordering, duplicates)?
    • +
  • Do you need monotonic reads (no going “back in time”)?
    • +
  • What happens during partitions: fail (CP) or serve stale (AP)?
    • +
  • Can clients handle retries/idempotency to compensate?
    • +
+
+ +
+

References

+ +

+ References are external; open in a new tab. +

+
+ +
+ + CAP Theorem + + + Scaling + +
+
diff --git a/src/routes/fundamentals/latency/+page.svelte b/src/routes/fundamentals/latency/+page.svelte new file mode 100644 index 0000000..4e9bd91 --- /dev/null +++ b/src/routes/fundamentals/latency/+page.svelte @@ -0,0 +1,105 @@ + + + + Latency vs Throughput - System Design Explorer + + +
+
+
+ Fundamentals + + Latency vs Throughput +
+

Latency vs Throughput

+

+ Fast single requests and high volume are related—but optimizing one can hurt the other. +

+
+ +
+ {#each concepts as c} + {@const Icon = getIcon(c.icon)} +
+
+
+ +
+
+

{c.title}

+

{c.desc}

+
+
+
+ {/each} +
+ +
+

Practical Tips

+
    +
  • Track p50/p95/p99; p99 drives user experience and incident pain.
    • +
  • Bound queues and add timeouts; unbounded retries create latency collapse.
    • +
  • Use load shedding when overloaded to keep the system responsive for some users.
    • +
  • Prefer idempotent operations so retries don’t amplify failures.
    • +
+
+ +
+

References

+ +
+ +
+ + Scaling + + + Compute + +
+
+ diff --git a/src/routes/fundamentals/scaling/+page.svelte b/src/routes/fundamentals/scaling/+page.svelte new file mode 100644 index 0000000..5bdef3c --- /dev/null +++ b/src/routes/fundamentals/scaling/+page.svelte @@ -0,0 +1,109 @@ + + + + Scaling - System Design Explorer + + +
+
+
+ Fundamentals + + Scaling +
+

Scaling

+

+ Techniques to handle more traffic and data while keeping reliability, latency, and cost under control. +

+
+ +
+ {#each strategies as s} + {@const Icon = getIcon(s.icon)} +
+
+
+ +
+
+

{s.title}

+

{s.desc}

+
+
+
+ {/each} +
+ +
+

Rule of Thumb

+
+
+

Start simple

+

Scale up first when you can; introduce distributed complexity only when needed.

+
+
+

Measure, then optimize

+

Use SLOs and profiling to find the real bottleneck: CPU, DB, network, locks, or tail latency.

+
+
+
+ +
+

References

+ +
+ +
+ + Consistency Models + + + Latency vs Throughput + +
+
+ diff --git a/src/routes/messaging/+page.svelte b/src/routes/messaging/+page.svelte new file mode 100644 index 0000000..8c99db1 --- /dev/null +++ b/src/routes/messaging/+page.svelte @@ -0,0 +1,54 @@ + + + + Messaging - System Design Explorer + + +
+
+
+ Overview + + Messaging +
+

Messaging

+

+ Decouple services with asynchronous communication: queues, pub/sub, and event-driven patterns. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Concepts + trade-offs

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/messaging/event-driven/+page.svelte b/src/routes/messaging/event-driven/+page.svelte new file mode 100644 index 0000000..296cb7a --- /dev/null +++ b/src/routes/messaging/event-driven/+page.svelte @@ -0,0 +1,51 @@ + + + + Event-Driven Architecture - System Design Explorer + + +
+
+
+ Messaging + + Event-Driven +
+

Event-Driven Architecture

+

+ Systems communicate by emitting and reacting to events, enabling fanout, resilience, and evolution over time. +

+
+ +
+ {#each principles as p} +
+

{p.title}

+

{p.desc}

+
+ {/each} +
+ +
+

Next steps

+
+ {#each references as ref} + {ref.label} + {/each} +
+
+
+ diff --git a/src/routes/messaging/pubsub/+page.svelte b/src/routes/messaging/pubsub/+page.svelte new file mode 100644 index 0000000..7e79379 --- /dev/null +++ b/src/routes/messaging/pubsub/+page.svelte @@ -0,0 +1,58 @@ + + + + Pub/Sub - System Design Explorer + + +
+
+
+ Messaging + + Pub/Sub +
+

Pub/Sub

+

+ Publish events once; multiple subscribers consume independently. Great for fanout and integrations. +

+
+ +
+
+

When to use

+
    +
  • One event triggers multiple side effects
    • +
  • You want to add consumers without changing producers
    • +
  • Integrations with email/SMS/webhooks/queues
    • +
+
+
+

Trade-offs

+
    +
  • Harder to reason about end-to-end flows
    • +
  • Delivery semantics vary by system and subscription type
    • +
  • You still need idempotent handlers
    • +
+
+
+ +
+

References

+ +
+
+ diff --git a/src/routes/messaging/queues/+page.svelte b/src/routes/messaging/queues/+page.svelte new file mode 100644 index 0000000..8757f90 --- /dev/null +++ b/src/routes/messaging/queues/+page.svelte @@ -0,0 +1,61 @@ + + + + Message Queues - System Design Explorer + + +
+
+
+ Messaging + + Message Queues +
+

Message Queues

+

+ Queue-based messaging for background work: one message is typically handled by one consumer. +

+
+ +
+
+

What you get

+
    +
  • Decoupling between producers and workers
    • +
  • Smoothing bursty load (buffering)
    • +
  • Retry + DLQ patterns for failures
    • +
+
+
+

Design gotchas

+
    +
  • At-least-once delivery means duplicates; consumers must be idempotent.
    • +
  • Visibility timeouts and retries can amplify load if misconfigured.
    • +
  • Ordering is rarely global; assume partial ordering at best.
    • +
+
+
+ +
+

References

+ +
+ Which Message Queue? +
+
+
+ diff --git a/src/routes/networking/+page.svelte b/src/routes/networking/+page.svelte new file mode 100644 index 0000000..ac01d87 --- /dev/null +++ b/src/routes/networking/+page.svelte @@ -0,0 +1,54 @@ + + + + Networking - System Design Explorer + + +
+
+
+ Overview + + Networking +
+

Networking

+

+ How traffic reaches your system: VPCs, DNS, load balancing, and CDNs. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Concepts + trade-offs

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/networking/cdn/+page.svelte b/src/routes/networking/cdn/+page.svelte new file mode 100644 index 0000000..ea50e9a --- /dev/null +++ b/src/routes/networking/cdn/+page.svelte @@ -0,0 +1,55 @@ + + + + CDN - System Design Explorer + + +
+
+
+ Networking + + CDN +
+

CDN (Content Delivery Network)

+

+ A globally distributed caching layer that accelerates content delivery and protects your origin. +

+
+ +
+ {#each benefits as b} +
+

{b.title}

+

{b.desc}

+
+ {/each} +
+ +
+

References

+ +
+
+ diff --git a/src/routes/networking/vpc/+page.svelte b/src/routes/networking/vpc/+page.svelte new file mode 100644 index 0000000..b97fedf --- /dev/null +++ b/src/routes/networking/vpc/+page.svelte @@ -0,0 +1,77 @@ + + + + VPC & Subnets - System Design Explorer + + +
+
+
+ Networking + + VPC & Subnets +
+

VPC & Subnets

+

+ A private network boundary for your workloads: address space, segmentation, and routing. +

+
+ + + +
+

References

+ +
+ +
+ + Networking + + + DNS + +
+
diff --git a/src/routes/security/+page.svelte b/src/routes/security/+page.svelte new file mode 100644 index 0000000..2c8df30 --- /dev/null +++ b/src/routes/security/+page.svelte @@ -0,0 +1,54 @@ + + + + Security - System Design Explorer + + +
+
+
+ Overview + + Security +
+

Security

+

+ Identity, encryption, and secrets: the baseline controls behind most reliable systems. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Core concepts

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/security/encryption/+page.svelte b/src/routes/security/encryption/+page.svelte new file mode 100644 index 0000000..34e0363 --- /dev/null +++ b/src/routes/security/encryption/+page.svelte @@ -0,0 +1,54 @@ + + + + Encryption - System Design Explorer + + +
+
+
+ Security + + Encryption +
+

Encryption

+

+ Protect data in transit and at rest. The hard part is key management and access control—not the cipher. +

+
+ +
+
+

In transit

+

+ Use TLS everywhere (client→edge, edge→service, service→service). Rotate certificates and enforce modern ciphers. +

+
+
+

At rest

+

+ Encrypt disks, databases, and object storage. Centralize keys, control access, and log usage. +

+
+
+ +
+

References

+ +
+
+ diff --git a/src/routes/security/iam/+page.svelte b/src/routes/security/iam/+page.svelte new file mode 100644 index 0000000..84c052c --- /dev/null +++ b/src/routes/security/iam/+page.svelte @@ -0,0 +1,59 @@ + + + + IAM - System Design Explorer + + +
+
+
+ Security + + IAM +
+

IAM (Identity & Access Management)

+

+ Define who can do what on which resources. Start with least privilege and strong auditability. +

+
+ +
+
+

Core building blocks

+
    +
  • Identities: users, roles, workloads
    • +
  • Policies: allow/deny rules
    • +
  • Authentication vs authorization
    • +
  • Audit logs and rotation
    • +
+
+
+

Pitfalls to avoid

+
    +
  • Over-broad permissions (“*:*”)
    • +
  • Long-lived secrets instead of short-lived tokens
    • +
  • No separation between prod and non-prod
    • +
+
+
+ +
+

References

+ +
+
+ diff --git a/src/routes/security/secrets/+page.svelte b/src/routes/security/secrets/+page.svelte new file mode 100644 index 0000000..f169ce1 --- /dev/null +++ b/src/routes/security/secrets/+page.svelte @@ -0,0 +1,58 @@ + + + + Secrets Management - System Design Explorer + + +
+
+
+ Security + + Secrets Management +
+

Secrets Management

+

+ Store and rotate credentials safely. Prefer short-lived credentials and least privilege over static keys. +

+
+ +
+
+

Do

+
    +
  • Centralize secrets and audit access
    • +
  • Rotate automatically and regularly
    • +
  • Use workload identity where possible
    • +
+
+
+

Avoid

+
    +
  • Hardcoding secrets in code or images
    • +
  • Long-lived access keys with broad permissions
    • +
  • Sharing credentials across environments
    • +
+
+
+ +
+

References

+ +
+
+ diff --git a/src/routes/storage/+page.svelte b/src/routes/storage/+page.svelte new file mode 100644 index 0000000..511497a --- /dev/null +++ b/src/routes/storage/+page.svelte @@ -0,0 +1,54 @@ + + + + Storage - System Design Explorer + + +
+
+
+ Overview + + Storage +
+

Storage

+

+ Pick the right storage interface: object, block, or file—each fits a different access pattern. +

+
+ +
+ {#each section?.children ?? [] as child} + {@const Icon = getIcon(child.icon)} + +
+
+ +
+
+

+ {child.label} +

+

Concepts + trade-offs

+
+
+
+ Open + +
+ + {/each} +
+
+ diff --git a/src/routes/storage/block/+page.svelte b/src/routes/storage/block/+page.svelte new file mode 100644 index 0000000..5062a09 --- /dev/null +++ b/src/routes/storage/block/+page.svelte @@ -0,0 +1,56 @@ + + + + Block Storage - System Design Explorer + + +
+
+
+ Storage + + Block Storage +
+

Block Storage

+

+ A virtual disk you attach to a machine. Low-latency random reads/writes; typically single-writer. +

+
+ +
+
+

Best for

+
    +
  • Databases and workloads needing random IO
    • +
  • Boot volumes and durable VM state
    • +
+
+
+

Trade-offs

+
    +
  • Often attached to one host/zone at a time
    • +
  • Scaling is vertical; sharding/replication required for horizontal scale
    • +
+
+
+ +
+

References

+ +
+
+ diff --git a/src/routes/storage/file/+page.svelte b/src/routes/storage/file/+page.svelte new file mode 100644 index 0000000..c862c73 --- /dev/null +++ b/src/routes/storage/file/+page.svelte @@ -0,0 +1,57 @@ + + + + File Storage - System Design Explorer + + +
+
+
+ Storage + + File Storage +
+

File Storage

+

+ Shared filesystem semantics (often POSIX-like) over the network. Multiple clients can mount and read/write. +

+
+ +
+
+

Best for

+
    +
  • Shared assets (media processing, ML models)
    • +
  • Legacy apps expecting a filesystem
    • +
  • Multiple compute nodes reading the same data
    • +
+
+
+

Trade-offs

+
    +
  • Network latency and throughput constraints
    • +
  • Locking/coordination can limit scale for heavy writes
    • +
+
+
+ +
+

References

+ +
+
+ diff --git a/src/routes/storage/object/+page.svelte b/src/routes/storage/object/+page.svelte new file mode 100644 index 0000000..e84f975 --- /dev/null +++ b/src/routes/storage/object/+page.svelte @@ -0,0 +1,58 @@ + + + + Object Storage - System Design Explorer + + +
+
+
+ Storage + + Object Storage +
+

Object Storage

+

+ Store blobs (objects) addressed by key, typically accessed via an HTTP API. Great durability and scale. +

+
+ +
+
+

Best for

+
    +
  • Images, video, backups, logs, data lakes
    • +
  • Static web assets + CDN
    • +
  • Immutable or append-like workflows
    • +
+
+
+

Trade-offs

+
    +
  • Not a POSIX filesystem (no in-place edits like a disk)
    • +
  • Higher per-operation latency than local disk
    • +
  • Consistency semantics depend on provider/features
    • +
+
+
+ +
+

References

+ +
+
+