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.
- Websites
- YouTube
Examples: facebook.com, twitter.com, reddit.com, quora.com
- Guides
- Case Studies
- Resources
Examples: amazon.com, ebay.com, walmart.com, flipkart.com
- Guides
- Case Studies
- eBay
- 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
- Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals
- How focusing on web performance improved Tokopedia's click-through rate by 35% | web.dev
- How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint
- Lowe's website is among fastest performing e-commerce websites
- JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications
- Resources
Examples: instagram.com, flickr.com
- Guides
- Case Studies
- Resources
Examples: Messenger, WhatsApp Web, Slack, Discord, Telegram
- Guides
- Case Studies
- Facebook & Messenger
- Building Facebook Messenger
- Reverse engineering the Facebook Messenger API
- Facebook Messenger Engineering with Mohsen Agsen
- F8 2019: Facebook: Lighter, Faster, Simpler Messenger
- Building Real Time Infrastructure at Facebook - Facebook - SRECon2017
- Facebook Messenger RTC – The Challenges and Opportunities of Scale
- Building Mobile-First Infrastructure for Messenger
- MySQL for Message - @Scale 2014 - Data
- Project LightSpeed: Rewriting the Messenger codebase for a faster, smaller, and simpler messaging app
- Challenges of E2E Encryption in Facebook Messenger
- Recreating the Facebook Messenger Gradient Effect with CSS
- Slack
- Managing Focus Transitions in Slack
- Gantry: Slack's Fast-booting Frontend Framework
- Making Slack Faster By Being Lazy
- Making Slack Faster By Being Lazy: Part 2
- Getting to Slack faster with incremental boot
- Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support
- Localizing Slack
- Airbnb
- Facebook & Messenger
- Resources
Examples: airbnb.com, booking.com, expedia.com, tripadvisor.com
- Guides
- Case Studies
- Rearchitecting Airbnb's Frontend | The Airbnb Tech Blog
- Building a Faster Web Experience with the postTask Scheduler | The Airbnb Tech Blog
- Server Rendering, Code Splitting, and Lazy Loading with React Router v4 | The Airbnb Tech Blog
- Isomorphic JavaScript: The Future of Web Apps
- Breaking the Monolith — Modular redesign of Agoda.com | Agoda Engineering & Design
- Creating Airbnb's Page Performance Score | The Airbnb Tech Blog
- Measuring Web Performance at Airbnb | The Airbnb Tech Blog
- Yes I'm Lazy | TripAdvisor Engineering and Product Blog
- React Performance Fixes on Airbnb Listing Pages | The Airbnb Tech Blog
- MakeMyTrip.com's new PWA delivers 3X improvement in conversion rates
- Images on the Web: Part 1 — Responsive Images | Expedia Group Technology
- Images on the Web: Part 2 — Implementing responsive images | Expedia Group Technology
- Expedia's Vrbo prioritizes above-the-fold contents and loads code for it first
- 12 Tips to Improve Client Side Page Performance | Expedia Group Technology
- Using Webpack Module Federation to Create an App Shell | Expedia Group Technology
- Optimizing a Page: Resource Hints, Critical CSS, and Webpack | Expedia Group Technology
- Progressive Web Apps with Service Workers | Booking.com Engineering
- Web Applications: Analyzing Client-Side Performance | Expedia Group Technology
- Go Fast or Go Home: The Process of Optimizing for Client Performance
- Building Airbnb's Internationalization Platform | The Airbnb Tech Blog
- Adding support for Arabic and Hebrew languages on Airbnb | The Airbnb Tech Blog
- Resources
Examples: Pinterest
- Guides
- Case Studies
- Resources
Contributions welcome
- Guides
- Case Studies
- YouTube
- Netflix
- Mux
- Foundation
- Resources
- Media | web.dev
- Mobile Web Video Playback | Articles | web.dev
- Streaming
- Performance
- Accessibility
- Tutorials
- Libraries
- Shaka Player: An open-source JavaScript library for adaptive media that supports DASH and HLS.
- Video.js: Similar to Shaka Player, with many different themes and skins.
- Media Chrome: Elements for building media players.
- 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: A framework and collection of UI components for building and managing custom media players on the web.
- Documentation
- Case Studies
- Spotify
- SoundCloud
- Playback on Web at SoundCloud
- Building The Next SoundCloud (A little dated, but has ideas that are still relevant considering it was written in 2012)
- API - Guide - SoundCloud Developers
- Resources
- Documentation
- Case Studies
- What's different about the new Google Docs: Working together, even apart
- What's different about the new Google Docs: Conflict resolution
- What's different about the new Google Docs: Making collaboration fast
- Improved Accessibility in Google Docs and Sites
- The data model behind Notion's flexibility
- How Figma's multiplayer technology works
- Realtime editing of ordered sequences
- Issues and Experiences in Designing Real-time Collaborative Editing Systems
- A Pragmatic Approach to Live Collaboration
- Articles
- Operational Transformations (OTs)
- Visualization of OT with a central server
- Papers
- Concurrency Control in Groupware Systems: Paper that introduces operational transforms
- High-Latency, Low-Bandwidth Windowing in the Jupiter Collaboration System: One of the earliest research papers on operational transforms with a centralized server
- SharesJS ecosystem
- ShareJS: Server & client library to allow concurrent editing of any kind of content via operational transforms
- ShareDB: Realtime database backend based on operational transforms. Successor to ShareJS.
- The Plaintext OT Type: Library for operational transforms on plain text. Used by ShareJS.
- The Plaintext OT Type, with proper unicode positions: Successor to text type which accounts for unicode code points. Used by ShareJS.
- Etherpad: Project acquired by Google then later released as open source.
- OT FAQ: Comprehensive coverage of questions, answers, and references related to the subject of OT.
- Conflict-Free Replicated Data Types (CRDTs)
- An Interactive Intro to CRDTs
- CRDT.tech: Website containing useful resources related to CRDTs.
- Yjs: A CRDT implementation in JavaScript
- 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
- Papers
- Conflict-free Replicated Data Types: One of the first papers that introduced CRDTs.
- CRDTs: Consistency without concurrency control: Introduction to Treedoc, a shared collaborative document built using CRDTs. Its design, implementation, and performance are discussed.
- Technologies
- Fluid Framework: 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.
- Guides
- Case Studies
- Books
- Case Studies
- Photoshop is now on the web!
- Figma
- Keeping Figma fast
- How Figma's multiplayer technology works
- Realtime editing of ordered sequences
- Improving performance with incremental frame loading
- Behind the scenes: international keyboard shortcuts
- Making multiplayer more reliable
- GraphQL, meet LiveGraph: a real-time data system at scale
- Under the hood of Figma’s infrastructure: Here’s what goes into powering a web-based design tool
- How to build a plugin system on the web and also sleep well at night
- Introducing: Figma to React
- Multiplayer Editing in Figma
- Building a professional design tool on the web
- Atlassian Confluence whiteboards
- Open Source
- tldraw: A tiny little drawing app and powerful tools for building diagramming applications
- Excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams
- draw.io: Diagramming and whiteboarding web application
- Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
- xyflow: Library for building node-based UIs with React
- React Diagrams: A flow & process orientated diagramming library written in React
- JointJS: Diagramming library for building interactive diagrams, flowcharts, and other visual representations
- React Easy Diagram: React library for creating diagrams with nodes and edges
- Penpot: Open Source design & prototyping platform
- Craft.js: A React framework for building extensible drag and drop page editors
- Documentation
- Resources
- Examples
- Open Source
- Case Studies
- Trello
- Part 1: Enabling Trello mobile offline
- Part 2: Syncing changes
- Part 3: Sync failure handling
- Part 4: The two ID problem
- Part 5: Offline attachments
- Part 6: Sync is a two-way street
- Part 7: Displaying sync state
- Colorful and accessible theming in Trello with CSS custom properties
- A look at Trello: adopting GraphQL and Apollo in a legacy application
- Trello
- Case Studies
- Why ContentEditable is Terrible (Or: How the Medium Editor Works): By Nick Santos of Medium team
- The data model behind Notion's flexibility
- Talks
- Open Source
- Articles
- Websites
- Guides
- Case Studies
- Resources
- Examples
- Guides
- Case Studies
- Resources
- Guides
- Tutorials
- Accessibility
- Examples
- Tutorials
- Accessibility
- Resources
- Examples
Contributions welcome
- Engineering
- Design
<!-- Template for new applications. -->
## {Product Name}
_Examples: [foo.com](https://www.foo.com), [bar.com](https://www.bar.com)_
- Guides
- Case Studies
- Resources<!-- Template for new UI components. -->
## {UI Component Name}
- Guides
- Tutorials
- Accessibility
- Examples