Repository: greatfrontend/awesome-front-end-system-design
Branch: main
Commit: f56c0f3a4a76
Files: 2
Total size: 40.7 KB

Directory structure:
gitextract_uqm2arrm/

├── LICENSE
└── README.md

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2023 GreatFrontEnd

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
<a href="https://www.greatfrontend.com/system-design/" target="_blank">
  <img src="assets/cover.png" alt="Start reading the Front End System Design Guidebook" />
</a>

Front 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.

## General

- Websites
  - [GreatFrontEnd's Front End System Design Guidebook](https://www.greatfrontend.com/system-design)
    - [RADIO Framework for Front End System Design](https://www.greatfrontend.com/system-design/framework)
  - [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/front-end-system-design/)
  - [Frontend system design interviews - the definitive guide](https://frontendmastery.com/posts/frontend-system-design-interview-guide/)

## Applications

### News Feed (e.g. Facebook)

_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/)_

- Guides
  - [GreatFrontEnd's News Feed System Design Solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
- Case Studies
  - Facebook
    - [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
    - [Making Facebook.com accessible to as many people as possible](https://engineering.fb.com/2020/07/30/web/facebook-com-accessibility/)
  - Twitter
    - [How we built Twitter Lite](https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite)
    - [Building the new Twitter.com](https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/buildingthenewtwitter)
    - [Dissecting Twitter's Redux Store](https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1)
    - [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)
  - Instagram
    - [Making Instagram.com faster: Part 1](https://instagram-engineering.com/making-instagram-com-faster-part-1-62cc0c327538)
    - [Making Instagram.com faster: Part 2](https://instagram-engineering.com/making-instagram-com-faster-part-2-f350c8fba0d4)
    - [Making Instagram.com faster: Part 3 — cache first](https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669)
- Resources
  - [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/)
  - [Evolving API Pagination at Slack](https://slack.engineering/evolving-api-pagination-at-slack)

### E-Commerce Site (e.g. Amazon)

_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)_

- Guides
  - [GreatFrontEnd's E-Commerce Site System Design Solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon) (Paid)
- Case Studies
  - eBay
    - [Shopping for speed on eBay.com | web.dev](https://web.dev/shopping-for-speed-on-ebay/)
    - [Speed By A Thousand Cuts | eBay Engineering Blog](https://tech.ebayinc.com/engineering/speed-by-a-thousand-cuts/)
  - Others
    - [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/)
    - [Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals](https://web.dev/farfetch/)
    - [How focusing on web performance improved Tokopedia's click-through rate by 35% | web.dev](https://web.dev/tokopedia/)
    - [How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint](https://web.dev/renault/)
    - [Lowe's website is among fastest performing e-commerce websites](https://web.dev/lowes/)
    - [JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications](https://web.dev/jdid/)
- Resources
  - [Milliseconds make millions](https://web.dev/milliseconds-make-millions/)
  - [Autofill on Browsers: A Deep Dive | eBay Engineering Blog](https://tech.ebayinc.com/engineering/autofill-deep-dive/)
  - [Autofilling | web.dev](https://web.dev/learn/forms/autofill/)
  - [Address forms | Learn Forms! | web.dev](https://web.dev/learn/forms/address/)
  - [Payment and address form best practices | web.dev](https://web.dev/payment-and-address-form-best-practices/)
  - [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/)

### Photo Sharing (e.g. Instagram)

_Examples: [instagram.com](https://www.instagram.com), [flickr.com](https://www.flickr.com)_

- Guides
  - [GreatFrontEnd's Photo Sharing System Design Solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram) (Paid)
- Case Studies
  - Instagram
    - [Making Instagram.com faster: Part 1](https://instagram-engineering.com/making-instagram-com-faster-part-1-62cc0c327538)
    - [Making Instagram.com faster: Part 2](https://instagram-engineering.com/making-instagram-com-faster-part-2-f350c8fba0d4)
    - [Making Instagram.com faster: Part 3 — cache first](https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669)
    - [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)
    - [Launching Instagram Messaging on desktop](https://about.instagram.com/blog/engineering/launching-instagram-messaging-on-desktop)
    - [Crafting an Accessible Instagram Feed](https://about.instagram.com/blog/engineering/crafting-an-accessible-instagram-feed)
- Resources
  - [Instagram.css](https://picturepan2.github.io/instagram.css/)

### Chat App (e.g. Messenger)

_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)_

- Guides
  - [GreatFrontEnd's Chat App System Design Solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger) (Paid)
- Case Studies
  - Facebook & Messenger
    - [Building Facebook Messenger](https://www.facebook.com/notes/10158791547142200/)
    - [Reverse engineering the Facebook Messenger API](https://intuitiveexplanations.com/tech/messenger)
    - [Facebook Messenger Engineering with Mohsen Agsen](https://softwareengineeringdaily.com/2020/03/31/facebook-messenger-engineering-with-mohsen-agsen/)
    - [F8 2019: Facebook: Lighter, Faster, Simpler Messenger](https://www.youtube.com/watch?v=ulVLD2yzCrc)
    - [Building Real Time Infrastructure at Facebook - Facebook - SRECon2017](https://www.youtube.com/watch?v=ODkEWsO5I30)
    - [Facebook Messenger RTC – The Challenges and Opportunities of Scale](https://www.youtube.com/watch?v=F7UWvflUZoc)
    - [Building Mobile-First Infrastructure for Messenger](https://engineering.fb.com/2014/10/09/production-engineering/building-mobile-first-infrastructure-for-messenger/)
    - [MySQL for Message - @Scale 2014 - Data](https://www.youtube.com/watch?v=eADBCKKf8PA)
    - [Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app](https://engineering.fb.com/2020/03/02/data-infrastructure/messenger/)
    - [Challenges of E2E Encryption in Facebook Messenger](https://www.youtube.com/watch?v=-IXJ7Q01gpY)
    - [Recreating the Facebook Messenger Gradient Effect with CSS](https://css-tricks.com/recreating-the-facebook-messenger-gradient-effect-with-css/)
  - Instagram
    - [Launching Instagram Messaging on desktop](https://engineering.fb.com/2022/07/26/web/launching-instagram-messaging-on-desktop/)
  - Slack
    - [Managing Focus Transitions in Slack](https://slack.engineering/managing-focus-transitions-in-slack/)
    - [Gantry: Slack's Fast-booting Frontend Framework](https://slack.engineering/gantry-slacks-fast-booting-frontend-framework/)
    - [Making Slack Faster By Being Lazy](https://slack.engineering/making-slack-faster-by-being-lazy/)
    - [Making Slack Faster By Being Lazy: Part 2](https://slack.engineering/making-slack-faster-by-being-lazy-part-2/)
    - [Getting to Slack faster with incremental boot](https://slack.engineering/getting-to-slack-faster-with-incremental-boot/)
    - [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/)
    - [Localizing Slack](https://slack.engineering/localizing-slack/)
  - Airbnb
    - [Messaging Sync — Scaling Mobile Messaging at Airbnb](https://medium.com/airbnb-engineering/messaging-sync-scaling-mobile-messaging-at-airbnb-659142036f06)
- Resources

### Travel Booking (e.g. Airbnb)

_Examples: [airbnb.com](https://airbnb.com), [booking.com](https://www.booking.com), [expedia.com](https://www.expedia.com), [tripadvisor.com](https://www.tripadvisor.com)_

- Guides
  - [GreatFrontEnd's Travel Booking System Design Solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb) (Paid)
- Case Studies
  - Airbnb
    - [Rearchitecting Airbnb's Frontend | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2)
    - [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)
    - [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)
    - [Isomorphic JavaScript: The Future of Web Apps](https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc)
    - [Creating Airbnb's Page Performance Score | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/creating-airbnbs-page-performance-score-5f664be0936)
    - [Measuring Web Performance at Airbnb | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/measuring-web-performance-at-airbnb-122da8d3ea3f)
    - [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)
    - [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)
    - [Building Airbnb's Internationalization Platform | The Airbnb Tech Blog](https://medium.com/airbnb-engineering/building-airbnbs-internationalization-platform-45cf0104b63c)
    - [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)
  - Expedia
    - [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)
    - [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)
    - [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)
    - [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)
    - [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)
    - [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)
    - [Web Applications: Analyzing Client-Side Performance | Expedia Group Technology](https://medium.com/expedia-group-tech/web-applications-analyzing-client-side-performance-37e9cc4ad86b)
  - Agoda
    - [Breaking the Monolith — Modular redesign of Agoda.com | Agoda Engineering & Design](https://medium.com/agoda-engineering/breaking-the-monolith-f3538d9c3ad6)
  - TripAdvisor
    - [Yes I'm Lazy | TripAdvisor Engineering and Product Blog](https://www.tripadvisor.com/engineering/yes-im-lazy/)
  - Booking.com
    - [Progressive Web Apps with Service Workers | Booking.com Engineering](https://medium.com/booking-com-development/progressive-web-apps-with-service-workers-887e80abf9ef)
  - Others
    - [MakeMyTrip.com's new PWA delivers 3X improvement in conversion rates](https://web.dev/make-my-trip/)
- Resources
  - [Expedia Accessibility Guidelines](https://accessibility.expedia.biz/pages/exagindex)
  - [Dynamic rendering | web.dev](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)
  - [Autofill on Browsers: A Deep Dive | eBay Engineering Blog](https://tech.ebayinc.com/engineering/autofill-deep-dive/)
  - [Autofilling | web.dev](https://web.dev/learn/forms/autofill/)
  - [Address forms | Learn Forms! | web.dev](https://web.dev/learn/forms/address/)
  - [Payment and address form best practices | web.dev](https://web.dev/payment-and-address-form-best-practices/)
  - [Frank's Compulsive Guide to Postal Addresses](http://www.columbia.edu/~fdc/postal/)

### Pinterest

_Examples: [Pinterest](https://www.pinterest.com)_

- Guides
  - [GreatFrontEnd's Pinterest System Design Solution](https://www.greatfrontend.com/questions/system-design/pinterest) (Paid)
  - [Design A Pinterest Layout | FrontEnd System Design Interview Question | Component Design](https://www.youtube.com/watch?v=y92NFsEKc_M)
- Case Studies
  - [A Pinterest Progressive Web App Performance Case Study](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154)
  - [A one year PWA retrospective](https://medium.com/pinterest-engineering/a-one-year-pwa-retrospective-f4a2f4129e05)
  - [Improving GIF performance on Pinterest](https://medium.com/pinterest-engineering/improving-gif-performance-on-pinterest-8dad74bf92f1)
- Resources
  - [Gestalt (Pinterest's design system)](https://gestalt.pinterest.systems/)
  - [Gestalt Masonry component](https://gestalt.pinterest.systems/web/masonry)
  - [How Pinterest Masonry works](https://github.com/pinterest/gestalt/blob/master/packages/gestalt/src/Masonry/README.md)

### Email Client (e.g. Microsoft Outlook)

_Contributions welcome_

### Ridesharing App (e.g. Uber)

- [Ola drives mobility for a billion Indians with Progressive Web App](https://web.dev/ola/)

- Guides
  - [Front-End System Design - Uber](https://www.youtube.com/watch?v=ijAoqaNYO0c)

### Video Streaming (e.g. YouTube, Netflix)

- Guides
  - [GreatFrontEnd's Video Streaming System Design Solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix) (Paid)
- Case Studies
  - YouTube
    - [Building a Better Web - Part 1: A faster YouTube on web](https://web.dev/case-studies/better-youtube-web-part1)
    - [How YouTube improved video performance with the Media Capabilities API](https://web.dev/case-studies/youtube-media-capabilities)
    - [Reverse-Engineering YouTube](https://tyrrrz.me/blog/reverse-engineering-youtube)
    - [Reverse-Engineering YouTube: Revisited](https://tyrrrz.me/blog/reverse-engineering-youtube-revisited)
  - Netflix
    - [HTML5 Video at Netflix](https://netflixtechblog.com/html5-video-at-netflix-721d1f143979)
    - [Update on HTML5 Video for Netflix](https://netflixtechblog.com/update-on-html5-video-for-netflix-fbb57e7d7ca0)
    - [Implementing Japanese Subtitles on Netflix](https://netflixtechblog.com/implementing-japanese-subtitles-on-netflix-c165fbe61989)
    - [Pseudo Localization @ Netflix](https://netflixtechblog.com/pseudo-localization-netflix-12fff76fbcbe)
    - [Modernizing the Web Playback UI](https://netflixtechblog.com/modernizing-the-web-playback-ui-1ad2f184a5a0)
  - Mux
    - [How we made Mux Player’s loading feel great](https://www.mux.com/blog/mux-player-lazy-loading-with-blurhash)
- Foundation
  - [How video works](https://howvideo.works/)
  - [Digital video introduction](https://github.com/leandromoreira/digital_video_introduction)
- Resources
  - [Media | web.dev](https://web.dev/explore/media)
    - [`<video>` and `<source>` tags | Articles | web.dev](https://web.dev/articles/video-and-source-tags)
    - [Fast playback with audio and video preload](https://web.dev/articles/fast-playback-with-preload)
  - [Mobile Web Video Playback | Articles | web.dev](https://web.dev/articles/media-mobile-web-video-playback)
  - Streaming
    - [Media Source Extensions | Articles | web.dev](https://web.dev/articles/media-mse-basics)
    - [Synchronize audio and video playback on the web | Articles | web.dev](https://web.dev/articles/audio-output-latency)
    - [Dynamic Adaptive Streaming over HTTP](https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP)
    - [HTTP Live Streaming](https://developer.apple.com/streaming/)
  - Performance
    - [Lazy loading video | Articles | web.dev](https://web.dev/articles/lazy-loading-video)
  - Accessibility
    - [Media accessibility | Articles | web.dev](https://web.dev/articles/media-accessibility)
    - [Video and audio | Accessibility | web.dev](https://web.dev/learn/accessibility/video-audio/)
    - [`<video>` elements must have a `<track>` for captions | Articles | web.dev](https://dequeuniversity.com/rules/axe/4.4/video-caption)
- Tutorials
  - [Building a Media Player Series | Chrome for Developers](https://www.youtube.com/watch?v=--KA2VrPDao&list=PLNYkxOF6rcIBykcJ7bvTpqU7vt-oey72J&index=20)
- Libraries
  - [Shaka Player](https://github.com/shaka-project/shaka-player): An open-source JavaScript library for adaptive media that supports DASH and HLS.
  - [Video.js](https://videojs.com/): Similar to Shaka Player, with many different themes and skins.
  - [Media Chrome](https://www.media-chrome.org/): Elements for building media players.
  - [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.
  - [Vidstack Player](https://www.vidstack.io/): A framework and collection of UI components for building and managing custom media players on the web.
- Documentation
  - [`<video>`: The Video Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
  - [Guide to streaming audio and video | MDN](https://developer.mozilla.org/en-US/docs/Web/Media/Streaming)
  - [Media Source API | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API)
  - [DASH Adaptive Streaming for HTML 5 Video | MDN](https://developer.mozilla.org/en-US/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video)
  - [Media Capabilities API | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API)

### Music Streaming (e.g. Spotify, SoundCloud)

- Case Studies
  - Spotify
    - [Building the Future of Our Desktop Apps](https://engineering.atspotify.com/2021/04/building-the-future-of-our-desktop-apps/)
    - [Building Spotify’s New Web Player](https://engineering.atspotify.com/2019/03/building-spotifys-new-web-player/)
    - [Thinking of State in a World of URLs](https://engineering.atspotify.com/2017/08/thinking-of-state-in-a-world-of-urls/)
    - [Web API | Spotify for Developers](https://developer.spotify.com/documentation/web-api)
  - SoundCloud
    - [Playback on Web at SoundCloud](https://developers.soundcloud.com/blog/playback-on-web-at-soundcloud)
    - [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)
    - [API - Guide - SoundCloud Developers](https://developers.soundcloud.com/docs/api/guide)
  - Resources
    - [What is Encrypted Media Extensions? | web.dev](https://web.dev/articles/media-eme)
  - Documentation
    - [Media Source API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API)
    - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

### Collaborative Editor (e.g. Google Docs)

- Case Studies
  - Google Docs
    - [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)
    - [What's different about the new Google Docs: Conflict resolution](https://drive.googleblog.com/2010/09/whats-different-about-new-google-docs_22.html)
    - [What's different about the new Google Docs: Making collaboration fast](https://drive.googleblog.com/2010/09/whats-different-about-new-google-docs.html)
    - [Improved Accessibility in Google Docs and Sites](https://drive.googleblog.com/2011/09/improved-accessibility-in-google-docs.html)
  - Figma
    - [How Figma's multiplayer technology works](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)
    - [Realtime editing of ordered sequences](https://www.figma.com/blog/realtime-editing-of-ordered-sequences/)
  - Notion
    - [The data model behind Notion's flexibility](https://www.notion.so/blog/data-model-behind-notion)
  - Others
    - [Issues and Experiences in Designing Real-time Collaborative Editing Systems](https://www.youtube.com/watch?v=84zqbXUQIHc)
    - [A Pragmatic Approach to Live Collaboration](https://hex.tech/blog/a-pragmatic-approach-to-live-collaboration/)
    - [Understanding sync engines: How Figma, Linear, and Google Docs work](https://liveblocks.io/blog/understanding-sync-engines-how-figma-linear-and-google-docs-work)
- Articles
  - [Operational Transformations as an Algorithm for Automatic Conflict Resolution](https://medium.com/coinmonks/operational-transformations-as-an-algorithm-for-automatic-conflict-resolution-3bf8920ea447)
  - [I was wrong. CRDTs are the future](https://josephg.com/blog/crdts-are-the-future/)
  - [You don't need CRDTs for collaborative experiences](https://zknill.io/posts/collaboration-no-crdts/)
- Operational Transformations (OTs)
  - [Visualization of OT with a central server](https://operational-transformation.github.io/)
  - Papers
    - [Concurrency Control in Groupware Systems](https://dl.acm.org/doi/pdf/10.1145/67544.66963): Paper that introduces operational transforms
    - [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
  - ShareJS ecosystem
    - [ShareJS](https://github.com/josephg/sharejs): Server & client library to allow concurrent editing of any kind of content via operational transforms
    - [ShareDB](https://github.com/share/sharedb): Realtime database backend based on operational transforms. Successor to ShareJS.
    - [The Plaintext OT Type](https://github.com/ottypes/text): Library for operational transforms on plain text. Used by ShareJS.
    - [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.
  - [Etherpad](https://github.com/ether/etherpad-lite): Project acquired by Google then later released as open source.
  - [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.
- Conflict-Free Replicated Data Types (CRDTs)
  - [An Interactive Intro to CRDTs](https://jakelazaroff.com/words/an-interactive-intro-to-crdts/)
  - [CRDT.tech](https://crdt.tech/): Website containing useful resources related to CRDTs.
  - [Yjs](https://github.com/yjs/yjs): A CRDT implementation in JavaScript
  - [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.
  - [An introduction to Conflict-Free Replicated Data Types](https://lars.hupel.info/topics/crdt/01-intro/)
  - Papers
    - [Conflict-free Replicated Data Types](https://pages.lip6.fr/Marc.Shapiro/papers/RR-7687.pdf): One of the first papers that introduced CRDTs.
    - [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.
- Technologies
  - [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.

### Collaborative Spreadsheet (e.g. Google Sheets)

- Guides
  - [How Does Google Sheets work?](https://medium.com/google-cloud/system-designing-google-sheet-bdf12321b99c)
  - [Designing Data Structures for Collaborative Apps](https://mattweidner.com/2022/02/10/collaborative-data-design.html)
- Case Studies
  - [Why Google Sheets ported its calculation worker from JavaScript to WasmGC](https://web.dev/case-studies/google-sheets-wasmgc)
- Books
  - [Spreadsheet Implementation Technology: Basics and Extensions](https://www.amazon.com/Spreadsheet-Implementation-Technology-Basics-Extensions/dp/0262526646)

### Design Tool (e.g. Figma, Excalidraw)

- Case Studies
  - [Photoshop is now on the web!](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a)
  - Figma
    - [Keeping Figma fast](https://www.figma.com/blog/keeping-figma-fast/)
    - [How Figma's multiplayer technology works](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)
    - [Realtime editing of ordered sequences](https://www.figma.com/blog/realtime-editing-of-ordered-sequences/)
    - [Improving performance with incremental frame loading](https://www.figma.com/blog/incremental-frame-loading/)
    - [Behind the scenes: international keyboard shortcuts](https://www.figma.com/blog/behind-the-scenes-international-keyboard-shortcuts/)
    - [Making multiplayer more reliable](https://www.figma.com/blog/making-multiplayer-more-reliable/)
    - [GraphQL, meet LiveGraph: a real-time data system at scale](https://www.figma.com/blog/livegraph-real-time-data-fetching-at-figma/)
    - [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/)
    - [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/)
    - [Introducing: Figma to React](https://www.figma.com/blog/introducing-figma-to-react/)
    - [Multiplayer Editing in Figma](https://www.figma.com/blog/multiplayer-editing-in-figma/)
    - [Building a professional design tool on the web](https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/)
  - Atlassian Confluence whiteboards
    - [Rendering like Butter – a Confluence Whiteboards Story](https://www.atlassian.com/engineering/rendering-like-butter-a-confluence-whiteboards-story)
    - [Triangles at work: GPU rendering shapes and connectors in Confluence whiteboards](https://www.atlassian.com/engineering/gpu-rendering-shapes-and-connectors-in-confluence-whiteboards)
    - [Understanding sync engines: How Figma, Linear, and Google Docs work](https://liveblocks.io/blog/understanding-sync-engines-how-figma-linear-and-google-docs-work)
  - Canva
    - [Behind the draw - How Canva's drawing tool works](https://www.canva.dev/blog/engineering/behind-the-draw/)
    - [Real-time mouse pointers](https://www.canva.dev/blog/engineering/realtime-mouse-pointers/)
    - [How we see groups in design](https://www.canva.dev/blog/engineering/how-we-see-groups-in-design/)
- Open Source
  - [tldraw](https://github.com/tldraw/tldraw): A tiny little drawing app and powerful tools for building diagramming applications
  - [Excalidraw](https://github.com/excalidraw/excalidraw): Virtual whiteboard for sketching hand-drawn like diagrams
  - [draw.io](https://github.com/jgraph/drawio): Diagramming and whiteboarding web application
  - [Mermaid](https://github.com/mermaid-js/mermaid): Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
  - [xyflow](https://github.com/xyflow/xyflow): Library for building node-based UIs with React
  - [React Diagrams](https://github.com/projectstorm/react-diagrams): A flow & process orientated diagramming library written in React
  - [JointJS](https://github.com/clientio/joint): Diagramming library for building interactive diagrams, flowcharts, and other visual representations
  - [React Easy Diagram](https://github.com/tokarchyn/react-easy-diagram): React library for creating diagrams with nodes and edges
  - [Penpot](https://github.com/penpot/penpot): Open Source design & prototyping platform
  - [Craft.js](https://craft.js.org/): A React framework for building extensible drag and drop page editors

### Video Call (e.g. Zoom, Skype)

- Guides
  - [Front-End System Design - Video Conference](https://www.youtube.com/watch?v=xKyB7x--NKU)
- Documentation
  - [Media Capture and Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API)
  - [MediaStream Recording API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)
  - [WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
- Resources
  - [Real-Time video is (really!) here. | Mux](https://www.mux.com/blog/real-time-video-is-really-here)
- Examples
  - [Meet Mux Meet: an open-source video conferencing app](https://www.mux.com/blog/open-source-video-conferencing-app)
- Open Source
  - [Jitsi](https://jitsi.org/)

### Task Tracking (e.g. Linear, Trello)

- Case Studies
  - Trello
    - [Part 1: Enabling Trello mobile offline](https://www.atlassian.com/engineering/sync-architecture)
    - [Part 2: Syncing changes](https://www.atlassian.com/engineering/syncing-changes)
    - [Part 3: Sync failure handling](https://www.atlassian.com/engineering/sync-failure-handling)
    - [Part 4: The two ID problem](https://www.atlassian.com/engineering/sync-two-id-problem)
    - [Part 5: Offline attachments](https://www.atlassian.com/engineering/sync-offline-attachments)
    - [Part 6: Sync is a two-way street](https://www.atlassian.com/engineering/sync-downloads)
    - [Part 7: Displaying sync state](https://www.atlassian.com/engineering/sync-indicators)
    - [Colorful and accessible theming in Trello with CSS custom properties](https://www.atlassian.com/engineering/colorful-and-accessible-theming-in-trello)
    - [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)
  - Linear
    - [Linear's realtime sync](https://www.youtube.com/live/WxK11RsLqp4?t=2175s)
    - [Scaling the Linear Sync Engine](https://www.youtube.com/watch?v=Wo2m3jaJixU)

### Rich Text Editing (e.g. Lexical, Slate.js, Tiptap)

- Case Studies
  - Notion
    - [The data model behind Notion's flexibility](https://www.notion.so/blog/data-model-behind-notion)
    - [Creating the Notion API](https://www.notion.so/blog/creating-the-notion-api)
  - Medium
    - [Why ContentEditable is Terrible (Or: How the Medium Editor Works)](https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480): By Nick Santos of Medium team
- Talks
  - [Rethinking Rich Text: A Deep Dive Into the Design of Lexical - Acy Watson](https://www.youtube.com/watch?v=EwoS0dIx_OI)
  - [001: Intro to Lexical iOS — Lexical iOS Tutorial Series](https://www.youtube.com/watch?v=_maPaQy9jWY)
- Open Source
  - [Lexical](https://lexical.dev/)
  - [Tiptap](https://tiptap.dev/)
  - [Slate.js](https://docs.slatejs.org/)
  - [Draft.js](https://draftjs.org/)

## Techniques / Topics

### AI in Frontend

- Case Studies
  - [Reddit — Query Autocomplete from LLMs](https://www.reddit.com/r/RedditEng/comments/1loewqg/query_autocomplete_from_llms/)
  - [Medium – Building a ChatGPT Plugin for Medium](https://medium.engineering/building-a-chatgpt-plugin-for-medium-6813b59e4b24)
  - [Liveblocks — Building an AI copilot inside your Tiptap text editor](https://liveblocks.io/blog/building-an-ai-copilot-inside-your-tiptap-text-editor)

### Internationalization (i18n) / Localization (l10n)

- Case Studies
  - Canva
    - [How to design in every language at once](https://www.canva.dev/blog/engineering/how-to-design-in-every-language-at-once/)
  - Doordash
    - [Overcoming Localization Challenges for International Expansions](https://careersatdoordash.com/blog/overcoming-localization-internalization-challenges/)

### Server-driven User Interfaces (SDUI)

- Articles
  - [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)
  - [Introduction to Server-Driven UI](https://joakimkemeny.com/writing/2023-10-18-server-driven-ui-intro)
  - [Mastering SDUI: A Deep Dive into Server-Driven UI](https://medium.com/androidiots/mastering-sdui-a-deep-dive-into-server-driven-ui-8329ad90ab44)
- Case Studies
  - [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)
  - [Faire — Transitioning to server-driven UI](https://craft.faire.com/transitioning-to-server-driven-ui-a76b216ed408)
  - [Shopify — Implementing Server-Driven UI Architecture on the Shop App](https://shopify.engineering/server-driven-ui-in-shop-app)
  - [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)
  - [Expedia — Expedia Group Transforms Product Development with Apollo](https://www.apollographql.com/customers/expediagroup)
- Open Source
  - [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

### Local-first / Offline-sync

- Articles
  - [Are Sync Engines The Future of Web Applications?](https://dev.to/isaachagoel/are-sync-engines-the-future-of-web-applications-1bbi)
  - [Airplane mode: enabling Trello mobile offline](https://www.atlassian.com/engineering/sync-architecture)
  - [Database in the Browser, a Spec](https://www.instantdb.com/essays/db_browser)
  - [A Graph-Based Firebase](https://www.instantdb.com/essays/next_firebase)
- Case Studies
  - Linear
    - [Linear's realtime sync](https://www.youtube.com/live/WxK11RsLqp4?t=2175s)
    - [Scaling the Linear Sync Engine](https://www.youtube.com/watch?v=Wo2m3jaJixU)
  - Others
    - [Understanding sync engines: How Figma, Linear, and Google Docs work](https://liveblocks.io/blog/understanding-sync-engines-how-figma-linear-and-google-docs-work)
- Websites
  - [Local-first Software – website dedicated to local-first technologies](https://localfirstweb.dev/)
- Open source
  - [PouchDB](https://pouchdb.com/)
  - [RxDB](https://rxdb.info/)
  - [WatermelonDB](https://watermelondb.dev/)
  - [Dexie.js](https://dexie.org/)
  - [TinyBase](https://tinybase.org/)
  - [InstantDB](https://www.instantdb.com/)
  - [ElectricSQL](https://electric-sql.com/)
- Products
  - [Replicache](https://replicache.dev/)
  - [Zero](https://zerosync.dev/)

## User Interface Components

### Autocomplete/Typeahead

- Guides
  - [GreatFrontEnd's Autocomplete Design Solution](https://www.greatfrontend.com/questions/system-design/autocomplete)
- Case Studies
- Resources
  - [The Life of a Typeahead Query](https://engineering.fb.com/2010/05/17/web/the-life-of-a-typeahead-query/)
  - [Building an accessible autocomplete control](https://adamsilver.io/blog/building-an-accessible-autocomplete-control/)
- Examples
  - [React Select](https://react-select.com)

### Image Carousel

- Guides
  - [GreatFrontEnd's Image Carousel Design Solution](https://www.greatfrontend.com/questions/system-design/image-carousel) (Paid)
- Case Studies
  - [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)
- Resources
  - [Creating an Accessible Image Carousel](https://www.aleksandrhovhannisyan.com/blog/image-carousel-tutorial/)
  - [Designing A Perfect Carousel UX](https://www.smashingmagazine.com/2022/04/designing-better-carousel-ux/)
  - [A Content Slider](https://inclusive-components.design/a-content-slider/)

### Dropdown Menu

- Guides
  - [GreatFrontEnd's Dropdown Menu Design Solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)
- Tutorials
  - [How to Build a Dropdown Menu with JavaScript](https://www.freecodecamp.org/news/how-to-build-a-dropdown-menu-with-javascript/)
- Accessibility
  - [Menu Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/)
  - [Menu Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/)
- Examples
  - Themed
    - [Dropdowns · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/components/dropdowns)
    - [React Menu component - Material UI](https://mui.com/material-ui/react-menu/)
  - Headless
    - [Dropdown Menu — Radix UI](https://www.radix-ui.com/docs/primitives/components/dropdown-menu)
    - [Menu Button — Reach UI](https://reach.tech/menu-button)
    - [Menu (Dropdown) - Headless UI](https://headlessui.com/react/menu)

### Modal / Dialog

- Case studies
  - [Building a Dialog for Reddit Web](https://www.reddit.com/r/RedditEng/comments/1hfp4mj/building_a_dialog_for_reddit_web/)
- Tutorials
  - [A CSS Approach to Trap Focus Inside of an Element](https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/)
- Accessibility
  - [Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/)
- Resources
  - [createPortal · React](https://beta.reactjs.org/reference/react-dom/createPortal)
- Examples
  - Themed
    - [Modal · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/components/modal)
    - [React Modal component - Material UI](https://mui.com/material-ui/react-modal/)
  - Headless
    - [Dialog — Radix UI](https://www.radix-ui.com/docs/primitives/components/dialog)
    - [Dialog (Modal) — Reach UI](https://reach.tech/dialog)
    - [Dialog (Modal) - Headless UI](https://headlessui.com/react/dialog)

### Star Widget

- Guides
  - [Front-End System Design - Star Widget](https://www.youtube.com/watch?v=IBm1vsK0vXE)

### Tooltip/Popover

_Contributions welcome_

### Design Systems

- Case studies
  - [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/)
  - [Thumbtack - How Thumbtack structures their design system](https://www.figma.com/blog/how-thumbtack-structures-their-design-system/)
  - [Figma – The shared language of props](https://www.figma.com/blog/the-shared-language-of-props/)
- Design
  - [Design Systems – A design systems publication by Figma](https://www.designsystems.com/)
  - [Design systems 101: What is a design system?](https://www.figma.com/blog/design-systems-101-what-is-a-design-system/)
  - [Design systems 102: How to build your design system](https://www.figma.com/blog/design-systems-102-how-to-build-your-design-system/)
  - [The Design System Guide](https://thedesignsystem.guide/)

## Miscellaneous

```md
<!-- Template for new applications. -->

## {Product Name}

_Examples: [foo.com](https://www.foo.com), [bar.com](https://www.bar.com)_

- Guides
- Case Studies
- Resources
```

```md
<!-- Template for new UI components. -->

## {UI Component Name}

- Guides
- Tutorials
- Accessibility
- Examples
```