https://systemdesignschool.io/_next/static/chunks/pages/%5Bcourse%5D/%5Bid%5D-a32470e533108ea7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6274],{31151:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[course]/[id]",function(){return n(20498)}])},1325:function(e,t,n){"use strict";n.d(t,{g:function(){return l}});var s=n(11163),i=n.n(s),r=n(55459),o=n(11430),a=n(78359);async function l(e){let{plan:t,trackdeskCid:n="",couponId:s=""}=e;try{let l=(0,a.B2)(),{session:c}=await r.Z.createCheckoutSession.post({isSubscription:t.isSubscription,price:t.price,priceId:t.stripePriceId,clientReferenceId:n,couponId:s,...l&&{utmParams:l}}),d=c.url,u=new URL(d);n&&u.searchParams.set("client_reference_id",n),i().push(u.toString())}catch(m){var h;console.error(m),(0,o.Kz)("navigatesToCheckoutError",{plan:t.stripePriceId,trackdeskCid:n,error:null!==(h=null==m?void 0:m.message)&&void 0!==h?h:""}),alert("Something went wrong. Please try again.")}}},75990:function(e,t,n){"use strict";n.d(t,{Z:function(){return l}});var s=n(85893);n(67294);var i=n(41664),r=n.n(i),o=n(45772);let a={"Object storage":"/fundamentals/object-storage","CDN & delivery economics":"/fundamentals/cdn","Async processing":"/fundamentals/message-queue",Caching:"/fundamentals/caching-mental-model",Availability:"/fundamentals/availability","Fan-out":"/fundamentals/fan-out-fan-in","Rate limiting":"/fundamentals/rate-limiting-patterns","Real-time":"/patterns/real-time-transport",WebSockets:"/patterns/real-time-transport","Pub/sub":"/fundamentals/message-queue",Scalability:"/patterns/scaling-reads-and-writes","Read replicas":"/fundamentals/read-write-separation",Sharding:"/fundamentals/database-partitioning","Message queue":"/fundamentals/message-queue",Idempotency:"/patterns/asynchronous-jobs",CDN:"/fundamentals/cdn","Presigned URLs":"/patterns/handling-large-files",Networking:"/technologies/networking-essentials","Load balancing":"/fundamentals/load-balancer",DNS:"/technologies/networking-essentials","Technology selection":"/technologies/technology-choices",Databases:"/fundamentals/sql-vs-nosql",Redis:"/technologies/redis","In-memory cache":"/fundamentals/caching-mental-model","Data structures":"/technologies/redis",Autocomplete:"/technologies/tries-and-prefix-search",Tries:"/technologies/tries-and-prefix-search",Search:"/domain-knowledge/inverted-index-fundamentals",Resilience:"/fundamentals/circuit-breaker","Failure handling":"/domain-knowledge/failure-handling-patterns"};function l(e){let{tags:t,difficulty:n}=e,i=(0,o.YZ)(),l=t&&t.length>0;if(!l&&!n)return null;let c=(n||"").toLowerCase(),d="easy"===c?i.success:"hard"===c?i.danger:i.warning,u="easy"===c?i.successBg:"hard"===c?i.dangerBg:i.warningBg;return(0,s.jsxs)("div",{"aria-label":"What this problem covers",style:{display:"flex",flexWrap:"wrap",gap:8,alignItems:"center",margin:0},children:[n&&(0,s.jsx)("span",{style:{fontSize:12,fontWeight:500,textTransform:"capitalize",color:d,background:u,padding:"3px 11px",borderRadius:999},children:n}),(t||[]).map(e=>{let t=a[e],n={fontSize:12,color:t?i.info:i.textSecondary,background:t?i.infoBg:i.surface,border:"1px solid ".concat(t?i.info:i.border),padding:"3px 11px",borderRadius:999,textDecoration:"none",cursor:t?"pointer":"default"};return t?(0,s.jsx)(r(),{href:t,style:n,children:e},e):(0,s.jsx)("span",{style:n,children:e},e)})]})}},79421:function(e,t,n){"use strict";n.d(t,{Z:function(){return a}});var s=n(85893),i=n(15452),r=n.n(i),o=n(88651);function a(e){let{children:t}=e;return(0,s.jsxs)("div",{className:r().container,children:[(0,s.jsx)(o.Z,{content:'\n## **Grasping the building blocks ("the lego pieces")**\n\nThis part of the guide will focus on the various components that are often used to construct a system (the building blocks), and the design templates that provide a framework for structuring these blocks.\n\n### Core Building blocks\n\nAt the bare minimum you should know the core building blocks of system design\n\n- Scaling stateless services with load balancing\n- Scaling database reads with replication and caching\n- Scaling database writes with partition (aka sharding)\n- Scaling data flow with message queues\n\n### System Design Template\n\nWith these building blocks, you will be able to apply our template to solve many system design problems. We will dive into the details in the [Design Template](/concepts/design-template) section. Here’s a sneak peak:\n\n![System Design Template](/concepts/sd-study-guide/Untitled.png)\n\n### Additional Building Blocks\n\nAdditionally, you will want to understand these concepts\n\n- Processing large amount of data (aka “big data”) with batch and stream processing\n  - Particularly useful for solving data-intensive problems such as designing an analytics app\n- Achieving consistency across services using distribution transaction or event sourcing\n  - Particularly useful for solving problems that require str

1ict transactions such as designing financial apps\n- Full text search: full-text index\n- Storing data for the long term: data warehousing\n\nOn top of these, there are ad hoc knowledge you would want to know tailored to certain problems. For example, geohashing for designing location-based services like Yelp or Uber, operational transform to solve problems like designing Google Doc. You can learn these these on a case-by-case basis. System design interviews are supposed to test your general design skills and not specific knowledge.\n\n## **Working through problems and building solutions using the building blocks**\n\nFinally, we have a series of practical problems for you to work through. You can find the problem in /problems. This hands-on practice will not only help you apply the principles learned but will also enhance your understanding of how to use the building blocks to construct effective solutions. The list of questions grow. We are actively adding more questions to the list.\n',className:r().content}),(0,s.jsx)("div",{className:r().interactionBarrier}),(0,s.jsx)("div",{className:r().accessTip,children:t})]})}},89730:function(e,t,n){"use strict";n.d(t,{Z:function(){return u}});var s=n(85893),i=n(21634),r=n(13264),o=n.n(r),a=n(67294),l=n(11163),c=n(90512),d=n(87386);function u(e){let{title:t,description:n,navbarActive:r,showBackgroundImages:u=!1,children:h,sideToggle:m,hideSidebar:g,toggleAskAiPanel:p}=e,{scrollDirection:x}=function(){let[e,t]=(0,a.useState)(null),n=(0,a.useRef)(!1),s=(0,a.useRef)(0);return(0,a.useEffect)(()=>{let e;s.current=document.body.scrollTop;let i=()=>{clearTimeout(e);let i=document.body.scrollTop,r=i-s.current;r>10?t("down"):r<0&&t("up"),s.current=i,e=setTimeout(()=>{n.current=!1},50)};return document.body.addEventListener("scroll",i,{passive:!0}),()=>{document.body.removeEventListener("scroll",i),clearTimeout(e)}},[]),{scrollDirection:e}}(),f=(0,l.useRouter)();return(0,a.useEffect)(()=>{let e=()=>{let e=document.getElementsByTagName("body")[0];e&&e.scrollTo(0,0,"smooth")};return f.events.on("routeChangeComplete",e),()=>{f.events.off("routeChangeComplete",e)}},[f]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(d.Z,{title:t,description:n}),(0,s.jsx)("header",{className:(0,c.Z)(o().header,{[o().hidden]:"down"===x}),children:(0,s.jsx)(i.Z,{active:r,sideToggle:m,hideSidebar:g,toggleAskAiPanel:p})}),(0,s.jsx)("div",{className:o().container+(u?" "+o().containerBgImages:""),children:h})]})}},78597:function(e,t,n){"use strict";n.d(t,{Z:function(){return h}});var s=n(85893),i=n(58472),r=n(1325),o=n(7933),a=n(25675),l=n.n(a),c=n(11163),d=n.n(c),u=n(67294);function h(e){let{plan:t}=e,[n,a]=(0,u.useState)(""),c=(0,o.l)();return(0,u.useEffect)(()=>{let e=document.cookie.match("(^|;)\\s*trakdesk_cid\\s*=\\s*([^;]+)");if(Array.isArray(e))try{let t=null==e?void 0:e.pop();if(t){let n=JSON.parse(t),s=n.cid;s&&a(s)}}catch(i){console.log(i)}},[d()]),(0,s.jsxs)("div",{className:"mx-auto max-w-[min(56rem,90vw)]",children:[(0,s.jsx)(l(),{className:"mx-auto",src:"/problems/pro-member-exclusive.svg",alt:"Pro Member",width:250,height:166}),(0,s.jsx)("div",{className:"mt-8 max-md:mt-4 text-3xl font-bold text-[#252A2D] dark:text-white text-center",children:"Pro Member Exclusive"}),(0,s.jsx)("div",{className:"text-base text-[#4E5860DD] dark:text-gray-300 mt-1 text-center",children:"Upgrade your account to continue"}),(0,s.jsx)("div",{className:"text-xl text-start font-bold text-[#252A2D] dark:text-white mt-8",children:"Benefits"}),(0,s.jsx)("div",{className:"mt-4 grid grid-cols-2 gap-x-8 gap-y-2 max-md:grid-cols-1 max-md:!mt-2 max-md:!gap-2",children:["Unlimited access to practice tool with AI grading","Unlimited access to expert-written solutions","Unlock 100+ lessons with full course access","Access to all future content while subscribed"].map((e,t)=>(0,s.jsxs)("div",{className:"flex gap-3 max-md:!gap-2",children:[(0,s.jsx)("img",{src:"/problems/correct.svg",alt:"check"}),(0,s.jsx)("div",{className:"text-base text-[#4E5860] dark:text-gray-300 text-start",children:e})]},t))}),(0,s.jsx)("hr",{className:"my-10 border-[#C5C7D3] dark:border-gray-600 max-md:my-5"}),t&&(0,s.jsxs)("div",{className:"flex gap-4 mb-16 max-md:mb-4 justify-center",children:[(0,s.jsx)(i.z,{className:"flex-grow h-14 border-2 border-[#283594] text-[#283594] dark:border-blue-400 dark:text-blue-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-base font-semibold",variant:"outline",onClick(){d().push("/pricing")},children:"View Plans"}),(0,s.jsx)(i.z,{className:"flex-grow h-14 bg-[#4358F6] dark:bg-blue-600 text-white text-base font-semibold",variant:"default",onClick:()=>(0,r.g)({plan:t,trackdeskCid:n,couponId:null==c?void 0:c.couponId}),children:"Subscribe Now"})]})]})}},20498:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSP:function(){return ec},default:function(){return ed}});var s=n(85893),i=n(89730),r=n(51032),o=n.n(r),a=n(67294),l=n(43489),c=n(49517),d=n(10682),u=n(34051),h=n(31555),m=n(35005),g=n(88375),p=n(46417),x=n(62631),f=n.n(x),_=n(77639),b=n(69386),v=n(60277),w=n(7990),j=n(63878),y=n(41664),k=n.n(y),C=n(11163),N=n(93621),B=n(13137),T=n(51479),S=n(47806),I=n(10283),F=n.n(I),E=n(63466),W=n.n(E),Z=n(58472),A=n(41352);function L(e){let{style:t,searchQuery:n,setSearchQuery:i}=e;return(0,s.jsxs)("div",{className:W().searchInput,style:t,children:[(0,s.jsx)("input",{value:n,placeholder:"Search",onChange:e=>i(e.target.value)}),(0,s.jsx)("div",{className:W().searchButton,children:(0,s.jsx)("img",{src:"/search.svg"})}),(0,s.jsx)(Z.z,{variant:"ghost",size:"icon",className:W().closeButton,onClick:()=>i(""),children:(0,s.jsx)(A.Z,{className:"h-4 w-4 ".concat(W().closeButtonIcon)})})]})}let D=e=>{let{eventKey:t,pattern:n}=e,i=(0,N.k)(t);return(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)("img",{src:"/toc/".concat(n.id,".svg"),className:"inline-block w-5 h-5 mr-1"}),(0,s.jsx)("button",{className:F().patternToggle,onClick:i,children:(0,s.jsx)("p",{className:F().patternTitle,children:n.title})}),(0,s.jsx)("img",{src:"/CaretDown.svg"})]})},P=e=>{let{sideBarRef:t,toc:n,courseId:i,sectionId:r,conceptId:o,onNavigate:l,starredConceptIds:c,hideSideBar:d}=e,u=(0,C.useRouter)(),h=(0,_.b)(),{isCompleted:m,percent:g}=(0,p.SE)(n),[x,f]=(0,a.useState)(),[y,N]=(0,a.useState)(""),I=n.flatMap(e=>e.subpatterns).flatMap(e=>e.concepts),E=(0,a.useMemo)(()=>new b.Z(I,{useExtendedSearch:!0,keys:["title",{name:"tag",weight:.7}

1,{name:"id",weight:.2}],threshold:.3}),[]),W=y?E.search(y,{limit:50}).map(e=>e.item):n.flatMap(e=>e.subpatterns).flatMap(e=>e.concepts),Z=()=>{N(""),null==l||l(),d()};(0,a.useEffect)(()=>{{let e=window.location.href.split("/"),n=e[e.length-1],s=document.getElementById(n),i=t.current;s&&setTimeout(()=>(function(e,t){let n=t.offsetTop,s=t.offsetHeight,i=e.offsetHeight;e.scrollTop=n-i/2+s/2})(i,s),500)}},[t]);let A=e=>(0,s.jsx)("ul",{className:F().conceptList,children:e.map(e=>{let{id:t,title:n,tocTitle:r,access:a}=e,l=(0,j.p1)(a,h);return(0,s.jsx)("li",{id:t,className:[t===o?F().selected:"",m(t)?F().completed:"",l?F().locked:""].join(" "),children:(0,s.jsx)(k(),{href:t.startsWith("/problems/")?t:v.Z.courseArticle(i,t),legacyBehavior:!0,children:(0,s.jsx)("a",{onClick:Z,children:r||n})})},t)})}),P=e=>{e.preventDefault(),0!==W.length&&(Z(),u.push(v.Z.concept(W[0].id)))};(0,a.useEffect)(()=>{let e=n.find(e=>e.subpatterns.find(e=>e.concepts.find(e=>e.id===o)));f(null==e?void 0:e.id)},[o]),(0,a.useEffect)(()=>{r&&f(r)},[r]),(0,a.useEffect)(()=>{if(void 0===x)return;let e=setTimeout(()=>{var e;let t=(0,w.vA)(document.getElementById("search-form"),"#search-form"),n=(0,w.vA)(document.getElementById("toc-pattern-".concat(x)),"#toc-pattern-".concat(x)),s=n.offsetTop-t.clientHeight;null===(e=n.offsetParent)||void 0===e||e.scrollTo({top:s})},400);return()=>clearTimeout(e)},[x]);let[z,R]=(0,a.useState)("all"),[q,M]=(0,a.useState)([]),Q=e=>{if(R(e),N(""),"star"===e){let t=new Set(c);M(I.filter(e=>t.has(e.id)))}else M([])};return(0,a.useEffect)(()=>{if("star"===z){let e=new Set(c);M(I.filter(t=>e.has(t.id)))}},[c]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(B.Z,{id:"search-form",className:F().searchForm,onSubmit:P,children:[(0,s.jsxs)("div",{className:F().tabs,children:[(0,s.jsx)("div",{className:F().tab+("all"===z?" ".concat(F().active):""),onClick:()=>Q("all"),children:"All"}),(0,s.jsx)("div",{className:F().tab+("star"===z?" ".concat(F().active):""),onClick:()=>Q("star"),children:"Fav"})]}),"all"===z&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(T.Z,{now:g,label:"".concat(g,"%"),style:{cursor:"pointer"},onClick:()=>u.push("/my-stats")}),(0,s.jsx)(L,{searchQuery:y,setSearchQuery:N,style:{marginTop:"var(--size-11)"}})]})]}),(0,s.jsxs)("div",{className:F().content,children:[(y||"star"===z)&&(0,s.jsx)("div",{className:F().searchResult,children:0===W.length&&0===q.length?(0,s.jsxs)("span",{children:["No ",y?"results":"stars","."]}):A(y?W:q)}),(0,s.jsx)(S.Z,{activeKey:x,onSelect:e=>f(null!=e?e:void 0),hidden:!!y||"all"!==z,children:n.map(e=>(0,s.jsxs)("section",{id:"toc-pattern-".concat(e.id),style:{marginBottom:"var(--size-11)"},children:[(0,s.jsx)(D,{eventKey:e.id,pattern:e}),(0,s.jsx)(S.Z.Collapse,{eventKey:e.id,children:(0,s.jsx)(s.Fragment,{children:e.subpatterns.map((e,t)=>(0,s.jsxs)("div",{className:F().subpattern,children:[(0,s.jsx)("p",{className:F().sectionTitle,children:e.title}),A(e.concepts)]},t))})})]},e.id))})]})]})};function z(e){let{show:t,toc:n,courseId:i,conceptId:r,starredConceptIds:o,style:l,customClassNames:c,hideSideBar:d}=e,u=(0,a.useRef)(null);return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)("div",{className:f().mask,onClick:d}),(0,s.jsx)("div",{className:f().sideBar+(t?"":" "+f().sideBarHidden)+" "+(null!=c?c:""),ref:u,style:l,children:(0,s.jsx)(P,{sideBarRef:u,courseId:i,toc:n,conceptId:r,starredConceptIds:o,hideSideBar:d})})]})}var R=n(88767),q=n(55459),M=n(79421),Q=n(65398),O=n(88651),U=n(24345),H=n.n(U);function V(e){let{headings:t}=e,[n,i]=(0,a.useState)("");return((0,a.useEffect)(()=>{if(!t.length)return;let e=()=>{let e="";for(let n of t){let s=document.getElementById(n.id);s&&s.getBoundingClientRect().top<=140&&(e=n.id)}i(e)};return e(),window.addEventListener("scroll",e,!0),()=>window.removeEventListener("scroll",e,!0)},[t]),t.length)?(0,s.jsxs)("nav",{className:H().toc,"aria-label":"On this page",children:[(0,s.jsx)("div",{className:H().title,children:"On this page"}),(0,s.jsx)("ul",{children:t.map(e=>(0,s.jsx)("li",{className:3===e.level?H().sub:"",children:(0,s.jsx)("a",{href:"#".concat(e.id),className:n===e.id?H().active:"",onClick:()=>i(e.id),children:e.text})},e.id))})]}):null}var Y=n(75990),K=n(15125),G=n(57644),J=n(99607),X=n(78597),$=n(18008),ee=n(90512),et=n(86234);function en(e){let{showAskPart:t,showToc:n,setShowToc:i,showTocInBiggerWindow:r,setShowTocInBiggerWindow:a,customClassName:d,showAnyway:u}=e,h=e=>

1(0,s.jsxs)(l.Z,{id:"button-tooltip",...e,children:[u||r?"Close":"Open"," sidebar"]});return(0,s.jsx)("div",{className:"position-absolute h-100 top-0 left-0 pointer-events-none",children:(0,s.jsx)(c.Z,{placement:"right",delay:{show:250,hide:0},overlay:h,children:(0,s.jsx)("div",{className:"".concat(o().sideBarToggle," ").concat(u||r?"":o().sideBarCollapsed," ").concat(null!=d?d:""," ").concat(u?o().collapseSidebarToggle:"")+" pointer-events-auto",style:t?{display:"none"}:{},onClick(){i&&i(!n),a&&a(!r)}})})})}let es=(e,t)=>{let{id:n,access:s}=e,{status:i,data:r,error:o}=(0,R.useQuery)(["concept",n],async()=>{let{concept:e}=await q.Z.concept(n).get();return e.id!==n&&console.warn("full concept id mismatch: ".concat(e.id," !== ").concat(n)),e},{enabled:"open"!==e.access&&(0,j.gz)(t,s)});return{status:"idle"===i?"success":i,concept:null!=r?r:e,error:o}},ei=()=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-loader animate-spin",children:[(0,s.jsx)("line",{x1:"12",y1:"2",x2:"12",y2:"6"}),(0,s.jsx)("line",{x1:"12",y1:"18",x2:"12",y2:"22"}),(0,s.jsx)("line",{x1:"4.93",y1:"4.93",x2:"7.76",y2:"7.76"}),(0,s.jsx)("line",{x1:"16.24",y1:"16.24",x2:"19.07",y2:"19.07"}),(0,s.jsx)("line",{x1:"2",y1:"12",x2:"6",y2:"12"}),(0,s.jsx)("line",{x1:"18",y1:"12",x2:"22",y2:"12"}),(0,s.jsx)("line",{x1:"4.93",y1:"19.07",x2:"7.76",y2:"16.24"}),(0,s.jsx)("line",{x1:"16.24",y1:"7.76",x2:"19.07",y2:"4.93"})]}),"Loading"]}),er=()=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-check-circle",children:[(0,s.jsx)("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),(0,s.jsx)("polyline",{points:"22 4 12 14.01 9 11.01"})]}),"Completed (Click to Unmark)"]}),eo=e=>{let{hasNext:t}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-check",children:(0,s.jsx)("polyline",{points:"20 6 9 17 4 12"})}),t?"Complete & Continue":"Mark as Completed"]})},ea=e=>{let t,{isCompleted:n,nextConcept:i,conceptId:r,setCompleted:o,progressStatus:a,courseId:l}=e,c=(0,C.useRouter)(),d=n(r),u=()=>{let e=n(r);if(o(r,!e),!e&&i){let t=i.id;c.push(t.startsWith("/problems/")?"".concat(t):"/".concat(l,"/").concat(t))}};return t="success"!==a?(0,s.jsx)(ei,{}):d?(0,s.jsx)(er,{}):(0,s.jsx)(eo,{hasNext:!!i}),(0,s.jsx)("button",{className:(0,ee.Z)("w-full md:w-auto px-4 md:px-6 py-2.5 flex items-center justify-center gap-2 max-w-xs md:min-w-[180px]  rounded-lg transition-colors duration-300 font-semibold",{"bg-[#414FDC] text-white hover:bg-[#283594] dark:bg-[#414FDC] dark:hover:bg-[#283594] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 ":d,"hover:bg-blue-700 hover:text-white text-[#414FDC] border-2 border-[#414FDC] dark:text-gray-200 dark:border-gray-200 dark:hover:border-blue-700 dark:hover:bg-blue-700 dark:hover:text-white":!d}),onClick:u,children:t})},el=()=>(0,s.jsxs)("div",{className:"flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400 font-medium",children:[(0,s.jsxs)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,s.jsx)("circle",{cx:"10",cy:"10",r:"9",stroke:"currentColor",strokeWidth:"2"}),(0,s.jsx)("path",{d:"M6 10L9 13L14 7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),"Lesson complete"]});var ec=!0;function ed(e){let{toc:t,concept:n,quizExisted:r,nextConcept:l,subscriptionPlan:c}=e,x=(0,_.a)(),f=(0,_.b)(),{status:b,concept:v,error:w}=es(n,f),{status:j,isFavorite:y,favorite:k,unfavorite:N,getFavoriteConceptIds:B,mutStatus:T}=(0,p.$h)(),S=(0,C.useRouter)(),[I,F]=(0,a.useState)(!1),[E,W]=(0,a.useState)([]);(0,a.useEffect)(()=>{"success"===j&&("success"===T||"idle"===T)&&W(B())},[j,T]);let{status:Z,isCompleted:A,setCompleted:L}=(0,p.SE)(t),{setVisible:D}=(0,$.B)(),[P,R]=(0,a.useState)(!1),q=e=>{R(e),D(!e)},[U,H]=(0,a.useState)(!1),[ee,ei]=(0,a.useState)(!0),{showLoginModal:er}=(0,G.f)(),eo=(0,a.useMemo)(()=>{let e=[];for(let t of v.content){let n="string"==typeof t.data?t.data:"",s=!1;for(let i of n.split("\n")){if(i.trim().startsWith("```")){s=!s;continue}if(s)continue;let r=/^(#{2,3})\s+(.+?)\s*$/.exec(i);if(!r)continue;let o=r[2].replace(/\s*data-toc-title="[^"]+"\s*/,"").trim();e.push({id:(0,K.TS)(o),text:o,level:r[1].length})}}return e},[v.content]),ec=(0,a.useRef)(null),ed=(0,a.useRef)(null),eu=(0,a.useRef)(null),eh="open"!==v.access,em=S.query.course,[eg,ep]=(0,a.useState)("auto");(0,a.useEffect)(()=>{let e;if(!ed.current)return;let t=-1,n=()=>{let s=ed.current;if(s){let i=s.getBoundingClientRect().top;i!==t&&(t=i,ep("calc(100vh - ".concat(Math.max(0,i),"px)")))}e=requestAnimationFrame(n)};return e=requestAnimationFrame(n),()=>{cancelAnimationFrame(e)}},[ed,P]),(0,a.useEffect)(()=>{let e="true"===sessionStorage.getItem("scrollToBottom");if(e){if(sessionStorage.removeItem("scrollToBottom"),eu.current){let t=document.body,n=eu.current.getBoundingClientRect(),s=window.pageYOffset||document.documentElement.scrollTop,i=n.top+s;t.scrollTo(0,i),setTimeout(()=>{let e=window.pageYOffset||document.documentElement.scrollTop;Math.abs(e-i)>50&&t.scrollTo(0,document.body.scrollHeight)},200)}else document.body.scrollTo(0,document.body.scrollHeight)}},[]);let ex=(0,s.jsx)("div",{className:o().bookmarkButton,onClick(){let e=v.id;y(e)?N(e):k(e)},children:(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:y(v.id)?"#414FDC":"none",stroke:y(v.id)?"#414FDC":"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})})});return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(i.Z,{title:n.seoTitle||n.title,de

1scription:n.description,navbarActive:"concepts",sideToggle:()=>(0,s.jsx)("div",{className:"".concat(o().toggle," navbar-toggler me-2 me-sm-3"),onClick:()=>F(!I),children:(0,s.jsx)("img",{src:"/ellipsis.svg"})}),hideSidebar:()=>F(!1),toggleAskAiPanel:()=>q(!P),children:(0,s.jsxs)("div",{className:o().outer,children:[(0,s.jsx)(z,{courseId:em,show:I,toc:t,conceptId:v.id,starredConceptIds:E,style:P?{display:"none"}:void 0,customClassNames:ee?"":o().hideSideBarInBiggerWindow,hideSideBar:()=>F(!1)}),(0,s.jsxs)("div",{className:o().contentWrapper+" "+(P?o().contentWrapperShowingAskPart:""),children:[(0,s.jsxs)("main",{id:"content-container",className:o().content,onClick:()=>I&&F(!1),children:[(0,s.jsx)(J.E,{setQuote(e){var t;q(!0),null===(t=ec.current)||void 0===t||t.setQuote(e)},askAi(e,t){var n;q(!0),null===(n=ec.current)||void 0===n||n.askAI({question:e,quote:t})},children:(0,s.jsxs)("article",{children:[(0,s.jsxs)(d.Z,{className:o().articleTitleContainer,children:[(0,s.jsx)(u.Z,{children:(0,s.jsx)(h.Z,{className:"pl-0",xs:r?12:11,children:(0,s.jsx)("h1",{children:v.title})})}),(0,s.jsxs)("div",{className:"flex justify-between items-center gap-3 mt-2 mb-2",children:[(0,s.jsx)("div",{className:"flex-1 min-w-0",children:(0,s.jsx)(Y.Z,{tags:v.tags,difficulty:v.difficulty})}),!r&&(0,s.jsx)("div",{className:"flex items-center shrink-0",children:ex})]}),A(v.id)&&(0,s.jsx)("div",{className:"flex items-center mb-4",children:(0,s.jsx)(el,{})}),r&&"open"===v.access&&(0,s.jsxs)("div",{className:"flex justify-content-between mt-6 mb-6",children:[(0,s.jsxs)(m.Z,{className:"w-full md:w-auto px-4 md:px-6 py-2.5 bg-[#414FDC] text-white dark:bg-[#414FDC] dark:hover:bg-[#283594] rounded-lg transition-colors duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center justify-center gap-2 hover:bg-[#283594]",onClick:()=>S.push(window.location.pathname+"/play"),children:[(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-play-circle",children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,s.jsx)("polygon",{points:"10 8 16 12 10 16 10 8"})]}),"Start Quiz"]}),(0,s.jsx)("div",{className:"flex items-center",children:ex})]})]}),(0,s.jsxs)(d.Z,{className:o().articleBodyContainer,children:[v.content.map((e,t)=>(0,s.jsx)(O.Z,{content:e.data},t)),"loading"===b?(0,s.jsx)(g.Z,{variant:"info",className:"dark:bg-gray-800 dark:text-gray-400",children:"Loading full content..."}):"open"!==n.access&&"error"===b?(0,s.jsx)("div",{children:null!=w?w:""}):"login"===v.access?(0,s.jsxs)(M.Z,{children:[(0,s.jsx)("div",{className:o().tipText,style:{marginBottom:"1.5rem"},children:"Sign Up for Free to Access the Full Article"}),(0,s.jsx)("button",{onClick:()=>er(),className:"bg-[#414FDC] text-white dark:bg-[#414FDC] dark:hover:bg-[#283594] rounded-lg transition-colors duration-300 font-semibold py-2 px-6 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-[#283594]",children:"Login"})]}):"paid"===v.access?(0,s.jsx)(M.Z,{children:(0,s.jsx)("div",{children:(0,s.jsx)(X.Z,{plan:c})})}):(0,s.jsx)(s.Fragment,{})]})]})}),x&&(0,s.jsx)(et.Z,{articleId:n.id}),"success"===b&&"open"===v.access&&(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("div",{className:"w-full max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-center gap-4 my-8",ref:eu,children:r?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(m.Z,{className:"w-full md:w-auto px-4 md:px-6 py-2.5 bg-[#414FDC] text-white dark:bg-[#414FDC] dark:hover:bg-[#283594] rounded-lg transition-colors duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center justify-center gap-2 hover:bg-[#283594]",onClick:()=>S.push(window.location.pathname+"/play"),children:[(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-play-circle",children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,s.jsx)("polygon",{points:"10 8 16 12 10 16 10 8"})]}),"Start Quiz"]}),(0,s.jsx)("div",{className:"flex items-center gap-2",children:(0,s.jsx)(ea,{isCompleted:A,nextConcept:l,conceptId:v.id,setCompleted:L,progressStatus:Z,courseId:em})})]}):(0,s.jsx)("div",{className:"flex items-center gap-2",children:(0,s.jsx)(ea,{isCompleted:A,nextConcept:l,conceptId:v.id,setCompleted:L,progressStatus:Z,courseId:em})})})})]}),"open"===v.access&&!P&&(0,s.jsx)(V,{headings:eo}),(0,s.jsx)(en,{showToc:U,setShowToc:H,showTocInBiggerWindow:ee,setShowTocInBiggerWindow:ei,showAskPart:P,customClassName:o().sideBarToggleInBiggerWindow})]}),(0,s.jsx)("div",{className:o().askPart,ref:ed,style:P?{height:eg}:{display:"none"},children:(0,s.jsx)(Q.Z,{ref:ec,articleId:n.id,contentLocked:eh,onClose:()=>q(!1)})})]})})})}},24345:function(e){e.exports={toc:"ArticleToc_toc__WzVOX",sub:"ArticleToc_sub__IzaJZ",active:"ArticleToc_active__UT_tQ",title:"ArticleToc_title__TLQg4"}},62631:function(e){e.exports={sideBar:"ConceptSideBar_sideBar__T1P74",sideBarHidden:"ConceptSideBar_sideBarHidden__t8kQl",mask:"ConceptSideBar_mask__pfXP8"}},15452:function(e){e.exports={container:"ContentDummy_container__X9pWw",content:"ContentDummy_content__GIX04",interactionBarrier:"ContentDummy_interactionBarrier__E3GY2",accessTip:"ContentDummy_accessTip__VP9BQ"}},13264:function(e){e.exports={container:"ContentLayout_container__f6b0g",header:"ContentLayout_header__7JnQc",hidden:"ContentLayout_hidden__UtnSP",containerBgImages:"ContentLayout_containerBgImages__K15h_"}},63466:function(e){e.exports={searchInput:"SearchInput_searchInput___CZUf",dark:"SearchInput_dark__VF7TI",searchButton:"SearchInput_searchButton__1i9SQ",closeButton:"SearchInput_closeButton__2Vkut",closeButtonIcon:"SearchInput_closeButtonIcon__578x0"}},10283:function(e){e.exports={searchForm:"Toc_searchForm__aBCCM",tabs:"Toc_tabs__6pcDN",tab:"Toc_tab__w5jHM",active:"Toc_active__FWbEv",searchResult:"Toc_searchResult__3MyqF",patternToggle:"Toc_patternToggle__ev_ci",patternTitle:"Toc_patternTitle__Zk5Fr",subpattern:"Toc_subpattern__bP146",sectionTitle:"Toc_sectionTitle__5wwuv",conceptList:"Toc_conceptList__z3K12",completed:"Toc_completed__zP3fi",locked:"Toc_locked__Rcgef",selected:"Toc_selected__vkNxC"}},51032:function(e){e.exports={outer:"_id__outer__2jbuh",contentWrapper:"_id__

1contentWrapper__IbiQB",content:"_id__content__iH1tY",bookmarkButton:"_id__bookmarkButton__HfY6J",articleTitleContainer:"_id__articleTitleContainer__i7UFt",articleBodyContainer:"_id__articleBodyContainer__DGj9W",tipText:"_id__tipText__GVatd",quizzesContainer:"_id__quizzesContainer__ZDEB2",commentListWrapper:"_id__commentListWrapper__n7Zcl",commentEngageBarWrapper:"_id__commentEngageBarWrapper__QEIJf",contentWrapperShowingAskPart:"_id__contentWrapperShowingAskPart__KnNSV",askPart:"_id__askPart__kuID3",toggle:"_id__toggle__JFfQT",quiz:"_id__quiz__KYNbU",quizTitle:"_id__quizTitle__BENRK",quizOption:"_id__quizOption__8Ef1O",answerSheet:"_id__answerSheet__idkpj",correctAnswer:"_id__correctAnswer__wBXNe",explanationSwitcher:"_id__explanationSwitcher__RGFBz",explanation:"_id__explanation__ecNnv",sideBarToggle:"_id__sideBarToggle__zVxzu",sideBarCollapsed:"_id__sideBarCollapsed__cseVa",hideForBiggerWindow:"_id__hideForBiggerWindow__ndlne",collapseSidebarToggle:"_id__collapseSidebarToggle__vb1Sq",sideBarToggleInBiggerWindow:"_id__sideBarToggleInBiggerWindow__5NYJb",hideSideBarInBiggerWindow:"_id__hideSideBarInBiggerWindow__rkOKF"}}},function(e){e.O(0,[5762,6279,5675,4799,1157,5146,7459,3112,893,9386,6881,1634,6396,3951,9774,2888,179],function(){return e(e.s=31151)}),_N_E=e.O()}]);