{"id":25762042,"url":"https://github.com/pinkysamantaray/frontend-system-design","last_synced_at":"2026-03-04T10:31:28.723Z","repository":{"id":276147624,"uuid":"928251343","full_name":"pinkysamantaray/frontend-system-design","owner":"pinkysamantaray","description":"code snippets, examples, notes on Frontend System Design","archived":false,"fork":false,"pushed_at":"2025-03-06T13:12:38.000Z","size":916,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T14:24:04.817Z","etag":null,"topics":["frontend-system-design","web","webapplications"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pinkysamantaray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-06T10:20:38.000Z","updated_at":"2025-03-06T13:12:42.000Z","dependencies_parsed_at":"2025-03-06T14:34:41.202Z","dependency_job_id":null,"html_url":"https://github.com/pinkysamantaray/frontend-system-design","commit_stats":null,"previous_names":["pinkysamantaray/frontend-system-design"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pinkysamantaray/frontend-system-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkysamantaray%2Ffrontend-system-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkysamantaray%2Ffrontend-system-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkysamantaray%2Ffrontend-system-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkysamantaray%2Ffrontend-system-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pinkysamantaray","download_url":"https://codeload.github.com/pinkysamantaray/frontend-system-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinkysamantaray%2Ffrontend-system-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30078308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T08:01:56.766Z","status":"ssl_error","status_checked_at":"2026-03-04T08:00:42.919Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-system-design","web","webapplications"],"created_at":"2025-02-26T19:35:52.808Z","updated_at":"2026-03-04T10:31:28.689Z","avatar_url":"https://github.com/pinkysamantaray.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is Frontend System Design?\n\nImagine you are building a lemonade stand. \nThe front of your stand is what people see and interact with—it has a menu, a place to order, and maybe even a cool sign with your name on it. This is like the frontend of a website or app!\n\nNow, let's break it down into simple parts:\n\n**The Stand (UI - User Interface)**\n    This is what your customers see. It includes the menu (buttons and text), the counter (forms and input boxes), and the decorations (colors and images). Just like how a bright and fun stand makes people want to buy lemonade, a good UI makes people enjoy using a website or app.\n\n**The Helper (Frontend Logic \u0026 Interactivity)**\n    Imagine a helper at your stand who takes the order, writes it down, and passes it to the kitchen. This helper makes sure everything runs smoothly. On a website, this is JavaScript! It makes buttons clickable, updates prices, and helps the page respond when you do something.\n\n**The Kitchen (Backend - but still important for frontend!)**\n    When a customer orders, the lemonade has to be made in the kitchen. The kitchen (backend) does the real work, but the customer only sees the lemonade arriving. The frontend talks to the backend to get things like data from a database (like checking how many lemons are left).\n\n**Delivery System (APIs \u0026 Data Fetching)**\n    If your lemonade stand runs out of lemons, you might call a fruit store to bring more. In websites, APIs are like that store—they bring the right information when needed, like showing new posts on social media or checking if a username is available.\n\n**Make It Pretty \u0026 Fast (Performance \u0026 Design)**\n    If your lemonade stand is slow or messy, customers won't like it. The same goes for websites! The frontend has to load quickly, look nice, and work smoothly on phones and computers.\n\nSo, just like making a great lemonade stand, designing a frontend system is about making it easy to use, fast, and fun so people enjoy their experience! 🍋😃\n\n## Table of Contents\n1. Core Fundamentals \n    - Box Model:\n        Box anatomy(Content box, padding box, border box, margin box), \n        Box size(Intrinsic: content determines space, Restricted: size governed by set of rules), \n        Box type(Block, Inline, Anonymous)\n    - Positioning System: position: static | relative | absolute | sticky | fixed\n    - Formatting Context: Flex, Grid, Inline, Block...\n    - Stacking Context: \n        Single layer is with X and Y Axis. 3D transformation, absolute positioning, or any action that moves an element from the normal flow, we activate an additional axis known as the Stacking Context or Z-axis.\n        All CSS Transformations are GPU accelerated, meaning the browser doesn't need to recalculate the DOM Tree when such operations are performed. This minimizes the reflow cycle.\n    - Browser Rendering Cycle and Reflow \n    - Composition Layers: \n        DOM Tree \u003e Render Object Tree \u003e Render Layer Tree(when placed in position absolute for example, or transform animations, video or canvas etc) \u003e Graphic Layer\n        ![Composition Layers Overview](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/browser-composition-layers.png)\n    - GPU Acceleration \n2. DOM API \n    - API Refresher: windows, document, node\n        Element.prototype ~= DOM API \n        HTMLDocument.prototype ~= DOM API\n    - Querying methods comparison: \n        ![querying methods](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/querying-methods.png)\n    - Optimizing query performance \n        Simplify Selectors, use of IDs, pick the right start point of query\n3. Web Observer APIs for Complex UI Patterns \n    1. Intersection Observer \n        - Virtualization \n        - Lazy Components \n        - Analytics \n        - Dynamic UI Elements \n        Example: https://codepen.io/RayEuji/embed/wvZJvKN\n    2. Mutation Observer \n        - Rich Text Editors \n        - Drawing Tools \n        Example: https://codepen.io/RayEuji/embed/ExJWaEO\n    3. Resize Observer \n        - Adaptive Design \n        - Charting tools \n        - Drawing tools\n        Example: https://codepen.io/RayEuji/embed/QWPprNE\n\n4. Virtualisation \n    Virtualization is a UI optimization technique that involves maintaining a data in memory while rendering only a limited subset, often referred to as a 'sliding window' \n    Goals of the pattern: \n        1. Minimize number of elements rendered in the DOM Tree \n        2. Minimize number of DOM Mutations \n        3. Minimize CPU \u0026 Memory usage that is required to maintain a DOM Tree  \n\n    Pattern: _Top Virtualisation =\u003e Bottom Virtualisation_ \n        Initial Loading =\u003e Rendering first page =\u003e Scrolldown \u003e Selecting Elements to recycle \u003e Recycling Item 1 Item 2 ...Recycling finished =\u003e Update the data Top Observer viewport Empty =\u003e Update Observers position\n        Scrolldown - Load new data =\u003e Scrolldown limit reached, Selecting Elements to recycle and so on...\n    \n5. Application State design \n    - Data classes \u003e UI State \n        - App Config \n            1. User theme \n            2. Locale \n            3. font-size \n            4. accessibility settings \n        - UI Elements State \n            1. Selected controls \n            2. Selected Text formatting (Google Docs) \n            3. Any other elements configuration \n            4. Entered text etc.\n        - Server Data \n            1. Messages \n            2. Post \n\n    - Data Properties \n        - Access level \n        - Read/ Write \n        - Frequency Size\n\n    General Principles:\n    - Search / Access Optimization: \n        - Minimize Access cost \u003e \n            Data Normalization: 1F, 2F, 3F etc..(Optimized Access Performance, Optimized Storage Structure, High Developer Readability and Maintenance)\n\n            **1F** \u003e Data is atomic, It has primary key\n            ```\n            {   \n                id: \"1\",  \n                name: \"Evgenii\",  \n                job: {     \n                    id: \"UIE\",     \n                    title: \"UI Engineer\",     \n                    department: \"Engineering\"  \n                },  \n                location: { \n                    code: \"UK\", \n                    name: \"United Kingdom\" \n                } \n            } \n            =\u003e\n            {  \n                id: \"1\",  \n                name: \"Evgenii\", \n                job_id: \"UIE\",   \n                job_title: \"UI Engineer\",  \n                department: \"Engineering\",  \n                country_code: \"UK\",  \n                country_name: \"United Kingdom\" \n            }\n            ```\n            **2F** \u003e 1NF + non-primary keys depend on entity primary key\n            ```\n            const users = { \n                \"1\": {   \n                    name: \"Evgenii\", \n                    job_id: 'UIE', \n                    country_id: \"UK\"\n                }\n            }\n            const jobs = { \n                UIE: { \n                    title: \"UI Engineer\", \n                    department: 'Engineering' \n                }\n            }\n            const user_jobs = { \n                \"1\": \"UIE\" \n            }; \n            const countries = { \n                UK: \"United Kingdom\" \n            }\n            ```\n            **3F** \u003e  2NF + non-primary keys ONLY depend on entity primary key\n            ```\n            const users = { \n                \"1\": { name: \"Evgenii\", job_id: 'UIE', country_id: \"UK\",  } \n            } \n            const jobs = { \n                UIE: \"UI Engineer\" \n            }; \n            const department = { \n                UIE: \"Engineering\"\n            };  \n            const user_jobs = {\n                \"1\": \"UIE\" \n            }; \n            const countries = { \n                UK: \"United Kingdom\" \n            };\n            ```\n        - Minimize Search cost, Use _Indexes_ if in-app search is required\n        - Minimize RAM usage\n    - Memory Offloading: Offload data to hard-drive when it's needed\n    - Browser Storage API Overview: Pick a suitable storage\n        ![WebStorage types and comparisons.](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/web_storage.png)\n\n6. Network \n    - Browser Networking \n    - Protocols Overview \n    ![protocols overview](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/protocols-overview.png)\n    ![protocols types](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/protocols-types.png)\n    - Talking to server \n        - Long-polling: Easy \u0026 cheap to implement, Battery inefficient (High CPU usage due to open TCP connection and transmitter usage), Network \u0026 Data inefficient. Avoid in Mobile web application\n        - Server Sent Events: fast, automatic reconnection, Battery efficient, Minimal network overhead (you only receive the actual data without header overhead). Limitation is only string data is supported - you’ll have to parse the payload. can be an alternative to WebSockets when some minor latency is acceptable. Avoid in simple desktop apps, you'll be fine with long-polling\n        - Web-sockets: provide almost real-time communication mechanism, Unlimited number of connections. But high infrastructure cost. Web-Sockets are stateful, computing resource ineffeciency. needs to maintain a constant TCP connection, drains energy and utilizes CPU. Works best with machine sensors/controls, Online gaming, Trading, precise location tracking etc.\n         \n    - REST vs GraphQL:\n    GraphQL provides the most value in Complex Apps, can reduce the complexity but needs additional client library to work with server GraphQL API, Additional client caching layer, Additional state manager - GraphQL Client needed to sync state between server and client. Potential impact on your web-bundle size\n    ![REST vs GraphQL](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/REST-vs-GraphQL.png)\n\n7. Web Application Performance\n    ![Web Vitals](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/Web-Vitals.png)\n\n    Network Performance:\n    `\u003clink rel=\"preload\"\u003e` - preloads a resource in background with a high priority. `\u003clink rel=\"prefetch\"\u003e` - preloads and caches a resource in background with a low priority.\n    `defer` (Load when every other asset is ready)\n    - Javascript \u003e Bundle concatenation, Bundle Spliting, Advanced prefetching, Code Minification \u0026 Compression(gzip, brotli)\n    - CSS \u003e Bundle Split, Minification and compression, Fetching critical/non-critical styles, Inline critical resources/styles\n    `\u003clink rel=\"preload\" as=\"style\" href=\"...\"/\u003e`\n    `\u003clink rel=\"stylesheet\" media=\"print\" href=\"...\" onload=\"this.media='all'\"/\u003e`\n\n    - Images \u003e \n        Compessed SVG(less characters/optimized, less size)\n        webp designed to replace png, jpg and gif for usage on the web pages, \n        AVIF: new image encoding format has the same benefits of webp with even better compression and picture quaility\n    - Other Assets:\n        Fonts: allow browser to display content when custom font is downloading\n        ![Font Loading Optimization](https://github.com/pinkysamantaray/frontend-system-design/blob/main/assets/images/Font-Loading-Optimization.png)\n\n\nCheers!\n\n----------------------------------------------------------------------------\n\n\u003e [!NOTE]\n\u003e Useful information that users should know, even when skimming content.\n\n\u003e [!TIP]\n\u003e Helpful advice for doing things better or more easily.\n\n\u003e [!IMPORTANT]\n\u003e Key information users need to know to achieve their goal.\n\n\u003e [!WARNING]\n\u003e Urgent info that needs immediate user attention to avoid problems.\n\n\u003e [!CAUTION]\n\u003e Advises about risks or negative outcomes of certain actions.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinkysamantaray%2Ffrontend-system-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinkysamantaray%2Ffrontend-system-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinkysamantaray%2Ffrontend-system-design/lists"}