{"type":"excalidraw","version":2,"source":"https://AwesomeSystemDesign.dev","elements":[{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-1"}],"updated":0,"link":null,"locked":false,"id":"shape-0","type":"rectangle","seed":41,"x":30,"y":30,"width":420,"height":68,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-1","type":"text","seed":114,"x":50,"y":52.3,"width":380,"height":23.400000000000002,"fontSize":18,"fontFamily":1,"text":"Image Storage Architecture","originalText":"Image Storage Architecture","textAlign":"left","verticalAlign":"middle","containerId":"shape-0","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-3"}],"updated":0,"link":null,"locked":false,"id":"shape-2","type":"rectangle","seed":187,"x":30,"y":123,"width":420,"height":68,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-3","type":"text","seed":260,"x":50,"y":145.3,"width":380,"height":23.400000000000002,"fontSize":18,"fontFamily":1,"text":"S3 bucket layout:","originalText":"S3 bucket layout:","textAlign":"left","verticalAlign":"middle","containerId":"shape-2","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#9180ac","backgroundColor":"#f4effb","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-5"}],"updated":0,"link":null,"locked":false,"id":"shape-4","type":"rectangle","seed":333,"x":30,"y":216,"width":420,"height":199.8,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-5","type":"text","seed":406,"x":50,"y":234,"width":380,"height":163.8,"fontSize":18,"fontFamily":1,"text":"s3://instagram-photos/\n{user_id}/{post_id}/\noriginal.jpg (3 MB)\nfull_1080.jpg (300 KB)\nmedium_640.jpg (100 KB)\nsmall_320.jpg (40 KB)\nthumb_150.jpg (15 KB)","originalText":"s3://instagram-photos/\n{user_id}/{post_id}/\noriginal.jpg (3 MB)\nfull_1080.jpg (300 KB)\nmedium_640.jpg (100 KB)\nsmall_320.jpg (40 KB)\nthumb_150.jpg (15 KB)","textAlign":"left","verticalAlign":"middle","containerId":"shape-4","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-7"}],"updated":0,"link":null,"locked":false,"id":"shape-6","type":"rectangle","seed":479,"x":30,"y":440.8,"width":481.33948000000004,"height":106.2,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-7","type":"text","seed":552,"x":50,"y":458.8,"width":441.33948000000004,"height":70.2,"fontSize":18,"fontFamily":1,"text":"Naming convention:\nPartitioned by user_id prefix to avoid S3 hot\npartition problems (S3 partitions by key prefix)","originalText":"Naming convention:\nPartitioned by user_id prefix to avoid S3 hot\npartition problems (S3 partitions by key prefix)","textAlign":"left","verticalAlign":"middle","containerId":"shape-6","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-5"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-9"}],"updated":0,"link":null,"locked":false,"id":"shape-8","type":"rectangle","seed":625,"x":30,"y":572,"width":420,"height":68,"customData":{"revealStep":5}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-5"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-9","type":"text","seed":698,"x":50,"y":594.3,"width":380,"height":23.400000000000002,"fontSize":18,"fontFamily":1,"text":"CDN delivery:","originalText":"CDN delivery:","textAlign":"left","verticalAlign":"middle","containerId":"shape-8","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":5}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-6"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-11"}],"updated":0,"link":null,"locked":false,"id":"shape-10","type":"rectangle","seed":771,"x":30,"y":665,"width":474.12724,"height":82.80000000000001,"customData":{"revealStep":6}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-6"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-11","type":"text","seed":844,"x":50,"y":683,"width":434.12724,"height":46.800000000000004,"fontSize":18,"fontFamily":1,"text":"Image URL format:\nhttps://cdn.instagram.com/{size}/{post_id}.jpg","originalText":"Image URL format:\nhttps://cdn.instagram.com/{size}/{post_id}.jpg","textAlign":"left","verticalAlign":"middle","containerId":"shape-10","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":6}},{"angle":0,"strokeColor":"#9180ac","backgroundColor":"#f4effb","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-7"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-13"}],"updated":0,"link":null,"locked":false,"id":"shape-12","type":"rectangle","seed":917,"x":30,"y":772.8,"width":490.7840800000001,"height":153,"customData":{"revealStep":7}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-7"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-13","type":"text","seed":990,"x":50,"y":790.8,"width":450.7840800000001,"height":117,"fontSize":18,"fontFamily":1,"text":"CDN receives request:\n1. Check edge cache -> HIT (95%): return image\n2. MISS: fetch from S3 origin\n3. Cache at edge with TTL = 30 days\n(images are immutable -- never change)","originalText":"CDN receives request:\n1. Check edge cache -> HIT (95%): return image\n2. MISS: fetch from S3 origin\n3. Cache at edge with TTL = 30 days\n(images are immutable -- never change)","textAlign":"left","verticalAlign":"middle","containerId":"shape-12","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":7}},{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-8"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-15"}],"updated":0,"link":null,"locked":false,"id":"shape-14","type":"rectangle","seed":1063,"x":30,"y":950.8,"width":521.4838,"height":106.2,"customData":{"revealStep":8}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-8"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-15","type":"text","seed":1136,"x":50,"y":968.8,"width":481.4838,"height":70.2,"fontSize":18,"fontFamily":1,"text":"Cache hit rate: 95%\n(Popular images cached at edge, long-tail from\nS3)","originalText":"Cache hit rate: 95%\n(Popular images cached at edge, long-tail from\nS3)","textAlign":"left","verticalAlign":"middle","containerId":"shape-14","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":8}},{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-9"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-17"}],"updated":0,"link":null,"locked":false,"id":"shape-16","type":"rectangle","seed":1209,"x":30,"y":1082,"width":420,"height":129.60000000000002,"customData":{"revealStep":9}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-9"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-17","type":"text","seed":1282,"x":50,"y":1100,"width":380,"height":93.60000000000001,"fontSize":18,"fontFamily":1,"text":"Progressive JPEG:\nFirst 20% of bytes -> blurry preview\nFull bytes -> sharp image\nPerceived load time feels instant","originalText":"Progressive JPEG:\nFirst 20% of bytes -> blurry preview\nFull bytes -> sharp image\nPerceived load time feels instant","textAlign":"left","verticalAlign":"middle","containerId":"shape-16","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":9}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-10"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-19"}],"updated":0,"link":null,"locked":false,"id":"shape-18","type":"rectangle","seed":1355,"x":30,"y":1236.6,"width":420,"height":68,"customData":{"revealStep":10}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-10"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-19","type":"text","seed":1428,"x":50,"y":1258.8999999999999,"width":380,"height":23.400000000000002,"fontSize":18,"fontFamily":1,"text":"Client-side optimization:","originalText":"Client-side optimization:","textAlign":"left","verticalAlign":"middle","containerId":"shape-18","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":10}},{"angle":0,"strokeColor":"#9180ac","backgroundColor":"#f4effb","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-11"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-21"}],"updated":0,"link":null,"locked":false,"id":"shape-20","type":"rectangle","seed":1501,"x":30,"y":1329.6,"width":439.47796000000005,"height":129.60000000000002,"customData":{"revealStep":11}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-11"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-21","type":"text","seed":1574,"x":50,"y":1347.6,"width":399.47796000000005,"height":93.60000000000001,"fontSize":18,"fontFamily":1,"text":"Request appropriate size based on device:\nPhone in feed: medium_640\nPhone detail view: full_1080\nThumbnail grid: thumb_150","originalText":"Request appropriate size based on device:\nPhone in feed: medium_640\nPhone detail view: full_1080\nThumbnail grid: thumb_150","textAlign":"left","verticalAlign":"middle","containerId":"shape-20","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":11}},{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-12"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-23"}],"updated":0,"link":null,"locked":false,"id":"shape-22","type":"rectangle","seed":1647,"x":30,"y":1484.1999999999998,"width":509.59695999999997,"height":129.60000000000002,"customData":{"revealStep":12}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-12"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-23","type":"text","seed":1720,"x":50,"y":1502.1999999999998,"width":469.59695999999997,"height":93.60000000000001,"fontSize":18,"fontFamily":1,"text":"Lazy loading: only fetch images as user scrolls\nBlurhash: show color placeholder while loading\n(10-byte hash generates blurry preview client-side)\nDisk cache: LRU cache of recently viewed images","originalText":"Lazy loading: only fetch images as user scrolls\nBlurhash: show color placeholder while loading\n(10-byte hash generates blurry preview client-side)\nDisk cache: LRU cache of recently viewed images","textAlign":"left","verticalAlign":"middle","containerId":"shape-22","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":12}}],"appState":{"viewBackgroundColor":"#fbfbf8","gridSize":null},"files":{}}