{"id":41175,"url":"https://github.com/greatfrontend/awesome-front-end-system-design","name":"awesome-front-end-system-design","description":"Curated front end system design resources for interviews and learning","projects_count":308,"last_synced_at":"2026-09-28T18:00:36.285Z","repository":{"id":161841120,"uuid":"593048179","full_name":"greatfrontend/awesome-front-end-system-design","owner":"greatfrontend","description":"Curated front end system design resources for interviews and learning","archived":false,"fork":false,"pushed_at":"2026-03-03T13:55:49.000Z","size":294,"stargazers_count":8494,"open_issues_count":1,"forks_count":329,"subscribers_count":48,"default_branch":"main","last_synced_at":"2026-09-08T23:24:35.199Z","etag":null,"topics":["front-end","front-end-system-design","javascript","react","system-design","system-design-interview"],"latest_commit_sha":null,"homepage":"https://greatfrontend.com/front-end-system-design-playbook","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greatfrontend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-25T05:08:57.000Z","updated_at":"2026-09-08T19:54:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"a59f993b-6aad-4a67-b995-80e70b1043c7","html_url":"https://github.com/greatfrontend/awesome-front-end-system-design","commit_stats":{"total_commits":25,"total_committers":3,"mean_commits":8.333333333333334,"dds":0.4,"last_synced_commit":"2d294a05ae8bbcf7c246c65bad8ab00432cafda7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/greatfrontend/awesome-front-end-system-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatfrontend%2Fawesome-front-end-system-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatfrontend%2Fawesome-front-end-system-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatfrontend%2Fawesome-front-end-system-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatfrontend%2Fawesome-front-end-system-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greatfrontend","download_url":"https://codeload.github.com/greatfrontend/awesome-front-end-system-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatfrontend%2Fawesome-front-end-system-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":341301770,"owners_count":37813621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-09-28T02:00:06.534Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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"}},"created_at":"2024-01-13T21:18:04.821Z","updated_at":"2026-09-28T18:00:36.285Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Applications","Techniques","User Interface Components","Techniques / Topics","General","{Product Name}"],"sub_categories":["Travel Booking (e.g. Airbnb)","Local-first / Offline-sync","Video Streaming (e.g. YouTube, Netflix)","Modal / Dialog","Chat App (e.g. Messenger)","Pinterest","Design Tool (e.g. Figma, Excalidraw)","Video Call (e.g. Zoom, Skype)","Collaborative Editor (e.g. Google Docs)","Music Streaming (e.g. Spotify, SoundCloud)","Image Carousel","Server-driven User Interfaces (SDUI)","Kanban Board (e.g. Trello)","News Feed (e.g. Facebook)","Design Systems","Rich Text Editing (e.g. Lexical, Slate.js, Tiptap)","Photo Sharing (e.g. Instagram)","E-Commerce Site (e.g. Amazon)","Ridesharing App (e.g. Uber)","Collaborative Spreadsheet (e.g. Google Sheets)","Autocomplete/Typeahead","Dropdown Menu","Modal","Poll Widget","Star Widget","Task Tracking (e.g. Linear, Trello)","AI in Frontend","Internationalization (i18n) / Localization (l10n)"],"readme":"\u003ca href=\"https://www.greatfrontend.com/system-design/\" target=\"_blank\"\u003e\n  \u003cimg src=\"assets/cover.png\" alt=\"Start reading the Front End System Design Guidebook\" /\u003e\n\u003c/a\u003e\n\nFront end system design resources are rare. Here's a curated list of awesome resources of front end system design resources, great for interview preparation or general learning.\n\n## General\n\n- Websites\n  - [GreatFrontEnd's Front End System Design Guidebook](https://www.greatfrontend.com/system-design)\n    - [RADIO Framework for Front End System Design](https://www.greatfrontend.com/system-design/framework)\n  - [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/front-end-system-design/)\n  - [Frontend system design interviews - the definitive guide](https://frontendmastery.com/posts/frontend-system-design-interview-guide/)\n\n## Applications\n\n### News Feed (e.g. Facebook)\n\n_Examples: [facebook.com](https://www.facebook.com/), [twitter.com](https://www.twitter.com/), [reddit.com](https://www.reddit.com/), [quora.com](https://www.quora.com/)_\n\n- Guides\n  - [GreatFrontEnd's News Feed System Design Solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)\n- Case Studies\n  - Facebook\n    - [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)\n    - [Making Facebook.com accessible to as many people as possible](https://engineering.fb.com/2020/07/30/web/facebook-com-accessibility/)\n  - Twitter\n    - [How we built Twitter Lite](https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite)\n    - [Building the new Twitter.com](https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/buildingthenewtwitter)\n    - [Dissecting Twitter's Redux Store](https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1)\n    - [Twitter Lite and High Performance React Progressive Web Apps at Scale](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3)\n  - Instagram\n    - [Making Instagram.com faster: Part 1](https://instagram-engineering.com/making-instagram-com-faster-part-1-62cc0c327538)\n    - [Making Instagram.com faster: Part 2](https://instagram-engineering.com/making-instagram-com-faster-part-2-f350c8fba0d4)\n    - [Making Instagram.com faster: Part 3 — cache first](https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669)\n- Resources\n  - [Facebook open sources rich text editor framework Draft.js](https://engineering.fb.com/2016/02/26/web/facebook-open-sources-rich-text-editor-framework-draft-js/)\n  - [Evolving API Pagination at Slack](https://slack.engineering/evolving-api-pagination-at-slack)\n\n### E-Commerce Site (e.g. Amazon)\n\n_Examples: [amazon.com](https://www.amazon.com), [ebay.com](https://www.ebay.com), [walmart.com](https://www.walmart.com), [flipkart.com](https://www.flipkart.com)_\n\n- Guides\n  - [GreatFrontEnd's E-Commerce Site System Design Solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon) (Paid)\n- Case Studies\n  - eBay\n    - [Shopping for speed on eBay.com | web.dev](https://web.dev/shopping-for-speed-on-ebay/)\n    - [Speed By A Thousand Cuts | eBay Engineering Blog](https://tech.ebayinc.com/engineering/speed-by-a-thousand-cuts/)\n  - Others\n    - [How Rakuten 24's investment in Core Web Vitals increased revenue per visitor by 53.37% and conversion rate by 33.13% | web.dev](https://web.dev/rakuten/)\n    - [Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals](https://web.dev/farfetch/)\n    - [How focusing on web performance improved Tokopedia's click-through rate by 35% | web.dev](https://web.dev/tokopedia/)\n    - [How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint](https://web.dev/renault/)\n    - [Lowe's website is among fastest performing e-commerce websites](https://web.dev/lowes/)\n    - [JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications](https://web.dev/jdid/)\n- Resources\n  - [Milliseconds make millions](https://web.dev/milliseconds-make-millions/)\n  - [Autofill on Browsers: A Deep Dive | eBay Engineering Blog](https://tech.ebayinc.com/engineering/autofill-deep-dive/)\n  - [Autofilling | web.dev](https://web.dev/learn/forms/autofill/)\n  - [Address forms | Learn Forms! | web.dev](https://web.dev/learn/forms/address/)\n  - [Payment and address form best practices | web.dev](https://web.dev/payment-and-address-form-best-practices/)\n  - [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/)\n\n### Photo Sharing (e.g. Instagram)\n\n_Examples: [instagram.com](https://www.instagram.com), [flickr.com](https://www.flickr.com)_\n\n- Guides\n  - [GreatFrontEnd's Photo Sharing System Design Solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram) (Paid)\n- Case Studies\n  - Instagram\n    - [Making Instagram.com faster: Part 1](https://instagram-engineering.com/making-instagram-com-faster-part-1-62cc0c327538)\n    - [Making Instagram.com faster: Part 2](https://instagram-engineering.com/making-instagram-com-faster-part-2-f350c8fba0d4)\n    - [Making Instagram.com faster: Part 3 — cache first](https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669)\n    - [Making instagram.com faster: Code size and execution optimizations (Part 4)](https://instagram-engineering.com/making-instagram-com-faster-code-size-and-execution-optimizations-part-4-57668be796a8)\n    - [Launching Instagram Messaging on desktop](https://about.instagram.com/blog/engineering/launching-instagram-messaging-on-desktop)\n    - [Crafting an Accessible Instagram Feed](https://about.instagram.com/blog/engineering/crafting-an-accessible-instagram-feed)\n- Resources\n  - [Instagram.css](https://picturepan2.github.io/instagram.css/)\n\n### Chat App (e.g. Messenger)\n\n_Examples: [Messenger](https://www.messenger.com), [WhatsApp Web](https://www.whatsapp.com), [Slack](https://www.slack.com), [Discord](https://www.discord.com), [Telegram](https://www.telegram.org)_\n\n- Guides\n  - [GreatFrontEnd's Chat App System Design Solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger) (Paid)\n- Case Studies\n  - Facebook \u0026 Messenger\n    - [Building Facebook Messenger](https://www.facebook.com/notes/10158791547142200/)\n    - [Reverse engineering the Facebook Messenger API](https://intuitiveexplanations.com/tech/messenger)\n    - [Facebook Messenger Engineering with Mohsen Agsen](https://softwareengineeringdaily.com/2020/03/31/facebook-messenger-engineering-with-mohsen-agsen/)\n    - [F8 2019: Facebook: Lighter, Faster, Simpler Messenger](https://www.youtube.com/watch?v=ulVLD2yzCrc)\n    - [Building Real Time Infrastructure at Facebook - Facebook - SRECon2017](https://www.youtube.com/watch?v=ODkEWsO5I30)\n    - [Facebook Messenger RTC – The Challenges and Opportunities of Scale](https://www.youtube.com/watch?v=F7UWvflUZoc)\n    - [Building Mobile-First Infrastructure for Messenger](https://engineering.fb.com/2014/10/09/production-engineering/building-mobile-first-infrastructure-for-messenger/)\n    - [MySQL for Message - @Scale 2014 - Data](https://www.youtube.com/watch?v=eADBCKKf8PA)\n    - [Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app](https://engineering.fb.com/2020/03/02/data-infrastructure/messenger/)\n    - [Challenges of E2E Encryption in Facebook Messenger](https://www.youtube.com/watch?v=-IXJ7Q01gpY)\n    - [Recreating the Facebook Messenger Gradient Effect with CSS](https://css-tricks.com/recreating-the-facebook-messenger-gradient-effect-with-css/)\n  - Instagram\n    - [Launching Instagram Messaging on desktop](https://engineering.fb.com/2022/07/26/web/launching-instagram-messaging-on-desktop/)\n  - Slack\n    - [Managing Focus Transitions in Slack](https://slack.engineering/managing-focus-transitions-in-slack/)\n    - [Gantry: Slack's Fast-booting Frontend Framework](https://slack.engineering/gantry-slacks-fast-booting-frontend-framework/)\n    - [Making Slack Faster By Being Lazy](https://slack.engineering/making-slack-faster-by-being-lazy/)\n    - [Making Slack Faster By Being Lazy: Part 2](https://slack.engineering/making-slack-faster-by-being-lazy-part-2/)\n    - [Getting to Slack faster with incremental boot](https://slack.engineering/getting-to-slack-faster-with-incremental-boot/)\n    - [Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support](https://slack.engineering/service-workers-at-slack-our-quest-for-faster-boot-times-and-offline-support/)\n    - [Localizing Slack](https://slack.engineering/localizing-slack/)\n  - Airbnb\n    - [Messaging Sync — Scaling Mobile Messaging at Airbnb](https://medium.com/airbnb-engineering/messaging-sync-scaling-mobile-messaging-at-airbnb-659142036f06)\n- Resources\n\n### Travel Booking (e.g. Airbnb)\n\n_Examples: [airbnb.com](https://airbnb.com), [booking.com](https://www.booking.com), [expedia.com](https://www.expedia.com), [tripadvisor.com](https://www.tripadvisor.com)_\n\n- Guides\n  - [GreatFrontEnd's Travel Booking System Design Solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb) (Paid)\n- Case Studies\n  - Airbnb\n    - [Rearchitecting Airbnb's Frontend | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2)\n    - [Building a Faster Web Experience with the postTask Scheduler | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/building-a-faster-web-experience-with-the-posttask-scheduler-276b83454e91)\n    - [Server Rendering, Code Splitting, and Lazy Loading with React Router v4 | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70)\n    - [Isomorphic JavaScript: The Future of Web Apps](https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc)\n    - [Creating Airbnb's Page Performance Score | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/creating-airbnbs-page-performance-score-5f664be0936)\n    - [Measuring Web Performance at Airbnb | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/measuring-web-performance-at-airbnb-122da8d3ea3f)\n    - [React Performance Fixes on Airbnb Listing Pages | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4)\n    - [Go Fast or Go Home: The Process of Optimizing for Client Performance](https://medium.com/expedia-group-tech/go-fast-or-go-home-the-process-of-optimizing-for-client-performance-57bb497402e)\n    - [Building Airbnb's Internationalization Platform | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/building-airbnbs-internationalization-platform-45cf0104b63c)\n    - [Adding support for Arabic and Hebrew languages on Airbnb | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/adding-support-for-arabic-and-hebrew-languages-on-airbnb-355f35a4e6b7)\n  - Expedia\n    - [Images on the Web: Part 1 — Responsive Images | Expedia Group Technology](https://medium.com/expedia-group-tech/images-on-the-web-part-1-responsive-images-5dc0066461bd)\n    - [Images on the Web: Part 2 — Implementing responsive images | Expedia Group Technology](https://medium.com/expedia-group-tech/images-on-web-part-2-implementing-responsive-images-ca1d30f533f8)\n    - [Expedia's Vrbo prioritizes above-the-fold contents and loads code for it first](https://medium.com/expedia-group-tech/improving-vrbo-homepage-loading-experience-e4b2207535f4)\n    - [12 Tips to Improve Client Side Page Performance | Expedia Group Technology](https://medium.com/expedia-group-tech/12-tips-to-improve-client-side-page-performance-88c7bec27933)\n    - [Using Webpack Module Federation to Create an App Shell | Expedia Group Technology](https://medium.com/expedia-group-tech/using-webpack-module-federation-to-share-an-app-shell-7d23633510e)\n    - [Optimizing a Page: Resource Hints, Critical CSS, and Webpack | Expedia Group Technology](https://medium.com/expedia-group-tech/optimize-a-page-resource-hint-critical-css-webpack-c8cc7319fb87)\n    - [Web Applications: Analyzing Client-Side Performance | Expedia Group Technology](https://medium.com/expedia-group-tech/web-applications-analyzing-client-side-performance-37e9cc4ad86b)\n  - Agoda\n    - [Breaking the Monolith — Modular redesign of Agoda.com | Agoda Engineering \u0026 Design](https://medium.com/agoda-engineering/breaking-the-monolith-f3538d9c3ad6)\n  - TripAdvisor\n    - [Yes I'm Lazy | TripAdvisor Engineering and Product Blog](https://www.tripadvisor.com/engineering/yes-im-lazy/)\n  - Booking.com\n    - [Progressive Web Apps with Service Workers | Booking.com Engineering](https://medium.com/booking-com-development/progressive-web-apps-with-service-workers-887e80abf9ef)\n  - Others\n    - [MakeMyTrip.com's new PWA delivers 3X improvement in conversion rates](https://web.dev/make-my-trip/)\n- Resources\n  - [Expedia Accessibility Guidelines](https://accessibility.expedia.biz/pages/exagindex)\n  - [Dynamic rendering | web.dev](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)\n  - [Autofill on Browsers: A Deep Dive | eBay Engineering Blog](https://tech.ebayinc.com/engineering/autofill-deep-dive/)\n  - [Autofilling | web.dev](https://web.dev/learn/forms/autofill/)\n  - [Address forms | Learn Forms! | web.dev](https://web.dev/learn/forms/address/)\n  - [Payment and address form best practices | web.dev](https://web.dev/payment-and-address-form-best-practices/)\n  - [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/)\n\n### Pinterest\n\n_Examples: [Pinterest](https://www.pinterest.com)_\n\n- Guides\n  - [GreatFrontEnd's Pinterest System Design Solution](https://www.greatfrontend.com/questions/system-design/pinterest) (Paid)\n  - [Design A Pinterest Layout | FrontEnd System Design Interview Question | Component Design](https://www.youtube.com/watch?v=y92NFsEKc_M)\n- Case Studies\n  - [A Pinterest Progressive Web App Performance Case Study](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154)\n  - [A one year PWA retrospective](https://medium.com/pinterest-engineering/a-one-year-pwa-retrospective-f4a2f4129e05)\n  - [Improving GIF performance on Pinterest](https://medium.com/pinterest-engineering/improving-gif-performance-on-pinterest-8dad74bf92f1)\n- Resources\n  - [Gestalt (Pinterest's design system)](https://gestalt.pinterest.systems/)\n  - [Gestalt Masonry component](https://gestalt.pinterest.systems/web/masonry)\n  - [How Pinterest Masonry works](https://github.com/pinterest/gestalt/blob/master/packages/gestalt/src/Masonry/README.md)\n\n### Email Client (e.g. Microsoft Outlook)\n\n_Contributions welcome_\n\n### Ridesharing App (e.g. Uber)\n\n- [Ola drives mobility for a billion Indians with Progressive Web App](https://web.dev/ola/)\n\n- Guides\n  - [Front-End System Design - Uber](https://www.youtube.com/watch?v=ijAoqaNYO0c)\n\n### Video Streaming (e.g. YouTube, Netflix)\n\n- Guides\n  - [GreatFrontEnd's Video Streaming System Design Solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix) (Paid)\n- Case Studies\n  - YouTube\n    - [Building a Better Web - Part 1: A faster YouTube on web](https://web.dev/case-studies/better-youtube-web-part1)\n    - [How YouTube improved video performance with the Media Capabilities API](https://web.dev/case-studies/youtube-media-capabilities)\n    - [Reverse-Engineering YouTube](https://tyrrrz.me/blog/reverse-engineering-youtube)\n    - [Reverse-Engineering YouTube: Revisited](https://tyrrrz.me/blog/reverse-engineering-youtube-revisited)\n  - Netflix\n    - [HTML5 Video at Netflix](https://netflixtechblog.com/html5-video-at-netflix-721d1f143979)\n    - [Update on HTML5 Video for Netflix](https://netflixtechblog.com/update-on-html5-video-for-netflix-fbb57e7d7ca0)\n    - [Implementing Japanese Subtitles on Netflix](https://netflixtechblog.com/implementing-japanese-subtitles-on-netflix-c165fbe61989)\n    - [Pseudo Localization @ Netflix](https://netflixtechblog.com/pseudo-localization-netflix-12fff76fbcbe)\n    - [Modernizing the Web Playback UI](https://netflixtechblog.com/modernizing-the-web-playback-ui-1ad2f184a5a0)\n  - Mux\n    - [How we made Mux Player’s loading feel great](https://www.mux.com/blog/mux-player-lazy-loading-with-blurhash)\n- Foundation\n  - [How video works](https://howvideo.works/)\n  - [Digital video introduction](https://github.com/leandromoreira/digital_video_introduction)\n- Resources\n  - [Media | web.dev](https://web.dev/explore/media)\n    - [`\u003cvideo\u003e` and `\u003csource\u003e` tags | Articles | web.dev](https://web.dev/articles/video-and-source-tags)\n    - [Fast playback with audio and video preload](https://web.dev/articles/fast-playback-with-preload)\n  - [Mobile Web Video Playback | Articles | web.dev](https://web.dev/articles/media-mobile-web-video-playback)\n  - Streaming\n    - [Media Source Extensions | Articles | web.dev](https://web.dev/articles/media-mse-basics)\n    - [Synchronize audio and video playback on the web | Articles | web.dev](https://web.dev/articles/audio-output-latency)\n    - [Dynamic Adaptive Streaming over HTTP](https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP)\n    - [HTTP Live Streaming](https://developer.apple.com/streaming/)\n  - Performance\n    - [Lazy loading video | Articles | web.dev](https://web.dev/articles/lazy-loading-video)\n  - Accessibility\n    - [Media accessibility | Articles | web.dev](https://web.dev/articles/media-accessibility)\n    - [Video and audio | Accessibility | web.dev](https://web.dev/learn/accessibility/video-audio/)\n    - [`\u003cvideo\u003e` elements must have a `\u003ctrack\u003e` for captions | Articles | web.dev](https://dequeuniversity.com/rules/axe/4.4/video-caption)\n- Tutorials\n  - [Building a Media Player Series | Chrome for Developers](https://www.youtube.com/watch?v=--KA2VrPDao\u0026list=PLNYkxOF6rcIBykcJ7bvTpqU7vt-oey72J\u0026index=20)\n- Libraries\n  - [Shaka Player](https://github.com/shaka-project/shaka-player): An open-source JavaScript library for adaptive media that supports DASH and HLS.\n  - [Video.js](https://videojs.com/): Similar to Shaka Player, with many different themes and skins.\n  - [Media Chrome](https://www.media-chrome.org/): Elements for building media players.\n  - [dash.js](https://reference.dashif.org/dash.js/): A reference client implementation by the DASH Industry Forum (DASH-IF) for the playback of MPEG-DASH via JavaScript and compliant MSE/EME platforms.\n  - [Vidstack Player](https://www.vidstack.io/): A framework and collection of UI components for building and managing custom media players on the web.\n- Documentation\n  - [`\u003cvideo\u003e`: The Video Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)\n  - [Guide to streaming audio and video | MDN](https://developer.mozilla.org/en-US/docs/Web/Media/Streaming)\n  - [Media Source API | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API)\n  - [DASH Adaptive Streaming for HTML 5 Video | MDN](https://developer.mozilla.org/en-US/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video)\n  - [Media Capabilities API | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API)\n\n### Music Streaming (e.g. Spotify, SoundCloud)\n\n- Case Studies\n  - Spotify\n    - [Building the Future of Our Desktop Apps](https://engineering.atspotify.com/2021/04/building-the-future-of-our-desktop-apps/)\n    - [Building Spotify’s New Web Player](https://engineering.atspotify.com/2019/03/building-spotifys-new-web-player/)\n    - [Thinking of State in a World of URLs](https://engineering.atspotify.com/2017/08/thinking-of-state-in-a-world-of-urls/)\n    - [Web API | Spotify for Developers](https://developer.spotify.com/documentation/web-api)\n  - SoundCloud\n    - [Playback on Web at SoundCloud](https://developers.soundcloud.com/blog/playback-on-web-at-soundcloud)\n    - [Building The Next SoundCloud](https://developers.soundcloud.com/blog/building-the-next-soundcloud) (A little dated, but has ideas that are still relevant considering it was written in 2012)\n    - [API - Guide - SoundCloud Developers](https://developers.soundcloud.com/docs/api/guide)\n  - Resources\n    - [What is Encrypted Media Extensions? | web.dev](https://web.dev/articles/media-eme)\n  - Documentation\n    - [Media Source API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API)\n    - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n\n### Collaborative Editor (e.g. Google Docs)\n\n- Case Studies\n  - Google Docs\n    - [What's different about the new Google Docs: Working together, even apart](https://drive.googleblog.com/2010/09/whats-different-about-new-google-docs_21.html)\n    - [What's different about the new Google Docs: Conflict resolution](https://drive.googleblog.com/2010/09/whats-different-about-new-google-docs_22.html)\n    - [What's different about the new Google Docs: Making collaboration fast](https://drive.googleblog.com/2010/09/whats-different-about-new-google-docs.html)\n    - [Improved Accessibility in Google Docs and Sites](https://drive.googleblog.com/2011/09/improved-accessibility-in-google-docs.html)\n  - Figma\n    - [How Figma's multiplayer technology works](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)\n    - [Realtime editing of ordered sequences](https://www.figma.com/blog/realtime-editing-of-ordered-sequences/)\n  - Notion\n    - [The data model behind Notion's flexibility](https://www.notion.so/blog/data-model-behind-notion)\n  - Others\n    - [Issues and Experiences in Designing Real-time Collaborative Editing Systems](https://www.youtube.com/watch?v=84zqbXUQIHc)\n    - [A Pragmatic Approach to Live Collaboration](https://hex.tech/blog/a-pragmatic-approach-to-live-collaboration/)\n    - [Understanding sync engines: How Figma, Linear, and Google Docs work](https://liveblocks.io/blog/understanding-sync-engines-how-figma-linear-and-google-docs-work)\n- Articles\n  - [Operational Transformations as an Algorithm for Automatic Conflict Resolution](https://medium.com/coinmonks/operational-transformations-as-an-algorithm-for-automatic-conflict-resolution-3bf8920ea447)\n  - [I was wrong. CRDTs are the future](https://josephg.com/blog/crdts-are-the-future/)\n  - [You don't need CRDTs for collaborative experiences](https://zknill.io/posts/collaboration-no-crdts/)\n- Operational Transformations (OTs)\n  - [Visualization of OT with a central server](https://operational-transformation.github.io/)\n  - Papers\n    - [Concurrency Control in Groupware Systems](https://dl.acm.org/doi/pdf/10.1145/67544.66963): Paper that introduces operational transforms\n    - [High-Latency, Low-Bandwidth Windowing in the Jupiter Collaboration System](https://dl.acm.org/doi/pdf/10.1145/215585.215706): One of the earliest research papers on operational transforms with a centralized server\n  - ShareJS ecosystem\n    - [ShareJS](https://github.com/josephg/sharejs): Server \u0026 client library to allow concurrent editing of any kind of content via operational transforms\n    - [ShareDB](https://github.com/share/sharedb): Realtime database backend based on operational transforms. Successor to ShareJS.\n    - [The Plaintext OT Type](https://github.com/ottypes/text): Library for operational transforms on plain text. Used by ShareJS.\n    - [The Plaintext OT Type, with proper unicode positions](https://github.com/ottypes/text-unicode): Successor to [text type](https://github.com/ottypes/text) which accounts for unicode code points. Used by ShareJS.\n  - [Etherpad](https://github.com/ether/etherpad-lite): Project acquired by Google then later released as open source.\n  - [OT FAQ](https://web.archive.org/web/20200623064915/https://www3.ntu.edu.sg/home/czsun/projects/otfaq/): Comprehensive coverage of questions, answers, and references related to the subject of OT.\n- Conflict-Free Replicated Data Types (CRDTs)\n  - [An Interactive Intro to CRDTs](https://jakelazaroff.com/words/an-interactive-intro-to-crdts/)\n  - [CRDT.tech](https://crdt.tech/): Website containing useful resources related to CRDTs.\n  - [Yjs](https://github.com/yjs/yjs): A CRDT implementation in JavaScript\n  - [Automerge](https://github.com/automerge/automerge/): Library which provides fast implementations of several different CRDTs, a compact compression format for these CRDTs, and a sync protocol for efficiently transmitting those changes over the network.\n  - [An introduction to Conflict-Free Replicated Data Types](https://lars.hupel.info/topics/crdt/01-intro/)\n  - Papers\n    - [Conflict-free Replicated Data Types](https://pages.lip6.fr/Marc.Shapiro/papers/RR-7687.pdf): One of the first papers that introduced CRDTs.\n    - [CRDTs: Consistency without concurrency control](https://arxiv.org/pdf/0907.0929): Introduction to Treedoc, a shared collaborative document built using CRDTs. Its design, implementation, and performance are discussed.\n- Technologies\n  - [Fluid Framework](https://fluidframework.com/): A collection of client libraries for distributing and synchronizing shared state, built by Microsoft. It can be viewed as a hybrid of operational transformations and CRDTs.\n\n### Collaborative Spreadsheet (e.g. Google Sheets)\n\n- Guides\n  - [How Does Google Sheets work?](https://medium.com/google-cloud/system-designing-google-sheet-bdf12321b99c)\n  - [Designing Data Structures for Collaborative Apps](https://mattweidner.com/2022/02/10/collaborative-data-design.html)\n- Case Studies\n  - [Why Google Sheets ported its calculation worker from JavaScript to WasmGC](https://web.dev/case-studies/google-sheets-wasmgc)\n- Books\n  - [Spreadsheet Implementation Technology: Basics and Extensions](https://www.amazon.com/Spreadsheet-Implementation-Technology-Basics-Extensions/dp/0262526646)\n\n### Design Tool (e.g. Figma, Excalidraw)\n\n- Case Studies\n  - [Photoshop is now on the web!](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a)\n  - Figma\n    - [Keeping Figma fast](https://www.figma.com/blog/keeping-figma-fast/)\n    - [How Figma's multiplayer technology works](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)\n    - [Realtime editing of ordered sequences](https://www.figma.com/blog/realtime-editing-of-ordered-sequences/)\n    - [Improving performance with incremental frame loading](https://www.figma.com/blog/incremental-frame-loading/)\n    - [Behind the scenes: international keyboard shortcuts](https://www.figma.com/blog/behind-the-scenes-international-keyboard-shortcuts/)\n    - [Making multiplayer more reliable](https://www.figma.com/blog/making-multiplayer-more-reliable/)\n    - [GraphQL, meet LiveGraph: a real-time data system at scale](https://www.figma.com/blog/livegraph-real-time-data-fetching-at-figma/)\n    - [Under the hood of Figma’s infrastructure: Here’s what goes into powering a web-based design tool](https://www.figma.com/blog/under-the-hood-of-figmas-infrastructure/)\n    - [How to build a plugin system on the web and also sleep well at night](https://www.figma.com/blog/how-we-built-the-figma-plugin-system/)\n    - [Introducing: Figma to React](https://www.figma.com/blog/introducing-figma-to-react/)\n    - [Multiplayer Editing in Figma](https://www.figma.com/blog/multiplayer-editing-in-figma/)\n    - [Building a professional design tool on the web](https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/)\n  - Atlassian Confluence whiteboards\n    - [Rendering like Butter – a Confluence Whiteboards Story](https://www.atlassian.com/engineering/rendering-like-butter-a-confluence-whiteboards-story)\n    - [Triangles at work: GPU rendering shapes and connectors in Confluence whiteboards](https://www.atlassian.com/engineering/gpu-rendering-shapes-and-connectors-in-confluence-whiteboards)\n    - [Understanding sync engines: How Figma, Linear, and Google Docs work](https://liveblocks.io/blog/understanding-sync-engines-how-figma-linear-and-google-docs-work)\n  - Canva\n    - [Behind the draw - How Canva's drawing tool works](https://www.canva.dev/blog/engineering/behind-the-draw/)\n    - [Real-time mouse pointers](https://www.canva.dev/blog/engineering/realtime-mouse-pointers/)\n    - [How we see groups in design](https://www.canva.dev/blog/engineering/how-we-see-groups-in-design/)\n- Open Source\n  - [tldraw](https://github.com/tldraw/tldraw): A tiny little drawing app and powerful tools for building diagramming applications\n  - [Excalidraw](https://github.com/excalidraw/excalidraw): Virtual whiteboard for sketching hand-drawn like diagrams\n  - [draw.io](https://github.com/jgraph/drawio): Diagramming and whiteboarding web application\n  - [Mermaid](https://github.com/mermaid-js/mermaid): Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown\n  - [xyflow](https://github.com/xyflow/xyflow): Library for building node-based UIs with React\n  - [React Diagrams](https://github.com/projectstorm/react-diagrams): A flow \u0026 process orientated diagramming library written in React\n  - [JointJS](https://github.com/clientio/joint): Diagramming library for building interactive diagrams, flowcharts, and other visual representations\n  - [React Easy Diagram](https://github.com/tokarchyn/react-easy-diagram): React library for creating diagrams with nodes and edges\n  - [Penpot](https://github.com/penpot/penpot): Open Source design \u0026 prototyping platform\n  - [Craft.js](https://craft.js.org/): A React framework for building extensible drag and drop page editors\n\n### Video Call (e.g. Zoom, Skype)\n\n- Guides\n  - [Front-End System Design - Video Conference](https://www.youtube.com/watch?v=xKyB7x--NKU)\n- Documentation\n  - [Media Capture and Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API)\n  - [MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)\n  - [WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)\n- Resources\n  - [Real-Time video is (really!) here. | Mux](https://www.mux.com/blog/real-time-video-is-really-here)\n- Examples\n  - [Meet Mux Meet: an open-source video conferencing app](https://www.mux.com/blog/open-source-video-conferencing-app)\n- Open Source\n  - [Jitsi](https://jitsi.org/)\n\n### Task Tracking (e.g. Linear, Trello)\n\n- Case Studies\n  - Trello\n    - [Part 1: Enabling Trello mobile offline](https://www.atlassian.com/engineering/sync-architecture)\n    - [Part 2: Syncing changes](https://www.atlassian.com/engineering/syncing-changes)\n    - [Part 3: Sync failure handling](https://www.atlassian.com/engineering/sync-failure-handling)\n    - [Part 4: The two ID problem](https://www.atlassian.com/engineering/sync-two-id-problem)\n    - [Part 5: Offline attachments](https://www.atlassian.com/engineering/sync-offline-attachments)\n    - [Part 6: Sync is a two-way street](https://www.atlassian.com/engineering/sync-downloads)\n    - [Part 7: Displaying sync state](https://www.atlassian.com/engineering/sync-indicators)\n    - [Colorful and accessible theming in Trello with CSS custom properties](https://www.atlassian.com/engineering/colorful-and-accessible-theming-in-trello)\n    - [A look at Trello: adopting GraphQL and Apollo in a legacy application](https://www.atlassian.com/engineering/a-look-at-trello-adopting-graphql-and-apollo-in-a-legacy-application)\n  - Linear\n    - [Linear's realtime sync](https://www.youtube.com/live/WxK11RsLqp4?t=2175s)\n    - [Scaling the Linear Sync Engine](https://www.youtube.com/watch?v=Wo2m3jaJixU)\n\n### Rich Text Editing (e.g. Lexical, Slate.js, Tiptap)\n\n- Case Studies\n  - Notion\n    - [The data model behind Notion's flexibility](https://www.notion.so/blog/data-model-behind-notion)\n    - [Creating the Notion API](https://www.notion.so/blog/creating-the-notion-api)\n  - Medium\n    - [Why ContentEditable is Terrible (Or: How the Medium Editor Works)](https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480): By Nick Santos of Medium team\n- Talks\n  - [Rethinking Rich Text: A Deep Dive Into the Design of Lexical - Acy Watson](https://www.youtube.com/watch?v=EwoS0dIx_OI)\n  - [001: Intro to Lexical iOS — Lexical iOS Tutorial Series](https://www.youtube.com/watch?v=_maPaQy9jWY)\n- Open Source\n  - [Lexical](https://lexical.dev/)\n  - [Tiptap](https://tiptap.dev/)\n  - [Slate.js](https://docs.slatejs.org/)\n  - [Draft.js](https://draftjs.org/)\n\n## Techniques / Topics\n\n### AI in Frontend\n\n- Case Studies\n  - [Reddit — Query Autocomplete from LLMs](https://www.reddit.com/r/RedditEng/comments/1loewqg/query_autocomplete_from_llms/)\n  - [Medium – Building a ChatGPT Plugin for Medium](https://medium.engineering/building-a-chatgpt-plugin-for-medium-6813b59e4b24)\n  - [Liveblocks — Building an AI copilot inside your Tiptap text editor](https://liveblocks.io/blog/building-an-ai-copilot-inside-your-tiptap-text-editor)\n\n### Internationalization (i18n) / Localization (l10n)\n\n- Case Studies\n  - Canva\n    - [How to design in every language at once](https://www.canva.dev/blog/engineering/how-to-design-in-every-language-at-once/)\n  - Doordash\n    - [Overcoming Localization Challenges for International Expansions](https://careersatdoordash.com/blog/overcoming-localization-internalization-challenges/)\n\n### Server-driven User Interfaces (SDUI)\n\n- Articles\n  - [Server Driven UI (SDUI): The Necessary Evil for Scalable Mobile Apps](https://medium.com/digia-studio/server-driven-ui-sdui-the-necessary-evil-for-scalable-mobile-apps-80c650a2c8de)\n  - [Introduction to Server-Driven UI](https://joakimkemeny.com/writing/2023-10-18-server-driven-ui-intro)\n  - [Mastering SDUI: A Deep Dive into Server-Driven UI](https://medium.com/androidiots/mastering-sdui-a-deep-dive-into-server-driven-ui-8329ad90ab44)\n- Case Studies\n  - [Airbnb — A Deep Dive into Airbnb’s Server-Driven UI System](https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5)\n  - [Faire — Transitioning to server-driven UI](https://craft.faire.com/transitioning-to-server-driven-ui-a76b216ed408)\n  - [Shopify — Implementing Server-Driven UI Architecture on the Shop App](https://shopify.engineering/server-driven-ui-in-shop-app)\n  - [Lyft — The Journey to Server Driven UI At Lyft Bikes and Scooters](https://eng.lyft.com/the-journey-to-server-driven-ui-at-lyft-bikes-and-scooters-c19264a0378e)\n  - [Expedia — Expedia Group Transforms Product Development with Apollo](https://www.apollographql.com/customers/expediagroup)\n- Open Source\n  - [Server-Driven User-Interface (SDUI)](https://github.com/csmets/Server-Driven-UI): A framework example for Server Driven UI (SDUI) that teaches you the best practices to scale\n\n### Local-first / Offline-sync\n\n- Articles\n  - [Are Sync Engines The Future of Web Applications?](https://dev.to/isaachagoel/are-sync-engines-the-future-of-web-applications-1bbi)\n  - [Airplane mode: enabling Trello mobile offline](https://www.atlassian.com/engineering/sync-architecture)\n  - [Database in the Browser, a Spec](https://www.instantdb.com/essays/db_browser)\n  - [A Graph-Based Firebase](https://www.instantdb.com/essays/next_firebase)\n- Case Studies\n  - Linear\n    - [Linear's realtime sync](https://www.youtube.com/live/WxK11RsLqp4?t=2175s)\n    - [Scaling the Linear Sync Engine](https://www.youtube.com/watch?v=Wo2m3jaJixU)\n  - Others\n    - [Understanding sync engines: How Figma, Linear, and Google Docs work](https://liveblocks.io/blog/understanding-sync-engines-how-figma-linear-and-google-docs-work)\n- Websites\n  - [Local-first Software – website dedicated to local-first technologies](https://localfirstweb.dev/)\n- Open source\n  - [PouchDB](https://pouchdb.com/)\n  - [RxDB](https://rxdb.info/)\n  - [WatermelonDB](https://watermelondb.dev/)\n  - [Dexie.js](https://dexie.org/)\n  - [TinyBase](https://tinybase.org/)\n  - [InstantDB](https://www.instantdb.com/)\n  - [ElectricSQL](https://electric-sql.com/)\n- Products\n  - [Replicache](https://replicache.dev/)\n  - [Zero](https://zerosync.dev/)\n\n## User Interface Components\n\n### Autocomplete/Typeahead\n\n- Guides\n  - [GreatFrontEnd's Autocomplete Design Solution](https://www.greatfrontend.com/questions/system-design/autocomplete)\n- Case Studies\n- Resources\n  - [The Life of a Typeahead Query](https://engineering.fb.com/2010/05/17/web/the-life-of-a-typeahead-query/)\n  - [Building an accessible autocomplete control](https://adamsilver.io/blog/building-an-accessible-autocomplete-control/)\n- Examples\n  - [React Select](https://react-select.com)\n\n### Image Carousel\n\n- Guides\n  - [GreatFrontEnd's Image Carousel Design Solution](https://www.greatfrontend.com/questions/system-design/image-carousel) (Paid)\n- Case Studies\n  - [Building a Faster Web Experience with the postTask Scheduler | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/building-a-faster-web-experience-with-the-posttask-scheduler-276b83454e91)\n- Resources\n  - [Creating an Accessible Image Carousel](https://www.aleksandrhovhannisyan.com/blog/image-carousel-tutorial/)\n  - [Designing A Perfect Carousel UX](https://www.smashingmagazine.com/2022/04/designing-better-carousel-ux/)\n  - [A Content Slider](https://inclusive-components.design/a-content-slider/)\n\n### Dropdown Menu\n\n- Guides\n  - [GreatFrontEnd's Dropdown Menu Design Solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)\n- Tutorials\n  - [How to Build a Dropdown Menu with JavaScript](https://www.freecodecamp.org/news/how-to-build-a-dropdown-menu-with-javascript/)\n- Accessibility\n  - [Menu Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/)\n  - [Menu Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/)\n- Examples\n  - Themed\n    - [Dropdowns · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/components/dropdowns)\n    - [React Menu component - Material UI](https://mui.com/material-ui/react-menu/)\n  - Headless\n    - [Dropdown Menu — Radix UI](https://www.radix-ui.com/docs/primitives/components/dropdown-menu)\n    - [Menu Button — Reach UI](https://reach.tech/menu-button)\n    - [Menu (Dropdown) - Headless UI](https://headlessui.com/react/menu)\n\n### Modal / Dialog\n\n- Case studies\n  - [Building a Dialog for Reddit Web](https://www.reddit.com/r/RedditEng/comments/1hfp4mj/building_a_dialog_for_reddit_web/)\n- Tutorials\n  - [A CSS Approach to Trap Focus Inside of an Element](https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/)\n- Accessibility\n  - [Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/)\n- Resources\n  - [createPortal · React](https://beta.reactjs.org/reference/react-dom/createPortal)\n- Examples\n  - Themed\n    - [Modal · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/components/modal)\n    - [React Modal component - Material UI](https://mui.com/material-ui/react-modal/)\n  - Headless\n    - [Dialog — Radix UI](https://www.radix-ui.com/docs/primitives/components/dialog)\n    - [Dialog (Modal) — Reach UI](https://reach.tech/dialog)\n    - [Dialog (Modal) - Headless UI](https://headlessui.com/react/dialog)\n\n### Star Widget\n\n- Guides\n  - [Front-End System Design - Star Widget](https://www.youtube.com/watch?v=IBm1vsK0vXE)\n\n### Tooltip/Popover\n\n_Contributions welcome_\n\n### Design Systems\n\n- Case studies\n  - [Reddit – From Chaos to Cohesion: Reddit's Design System Story](https://www.reddit.com/r/RedditEng/comments/17kxwri/from_chaos_to_cohesion_reddits_design_system_story/)\n  - [Thumbtack - How Thumbtack structures their design system](https://www.figma.com/blog/how-thumbtack-structures-their-design-system/)\n  - [Figma – The shared language of props](https://www.figma.com/blog/the-shared-language-of-props/)\n- Design\n  - [Design Systems – A design systems publication by Figma](https://www.designsystems.com/)\n  - [Design systems 101: What is a design system?](https://www.figma.com/blog/design-systems-101-what-is-a-design-system/)\n  - [Design systems 102: How to build your design system](https://www.figma.com/blog/design-systems-102-how-to-build-your-design-system/)\n  - [The Design System Guide](https://thedesignsystem.guide/)\n\n## Miscellaneous\n\n```md\n\u003c!-- Template for new applications. --\u003e\n\n## {Product Name}\n\n_Examples: [foo.com](https://www.foo.com), [bar.com](https://www.bar.com)_\n\n- Guides\n- Case Studies\n- Resources\n```\n\n```md\n\u003c!-- Template for new UI components. --\u003e\n\n## {UI Component Name}\n\n- Guides\n- Tutorials\n- Accessibility\n- Examples\n```\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/greatfrontend%2Fawesome-front-end-system-design/projects"}