discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens
greatfrontend/awesome-front-end-system-design · source
Snapshot 0 · 2026-11-04T12:47:27Z · · MIT
Content fingerprint
d12c20e8f6b410dd89727f274ebfb24b04431c53830dea63de70de5aa0da8657GitHub description at capture
Curated front end system design resources for interviews and learning
README at capture
<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
```