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.
- 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
- Guides
- 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
- How Figma's multiplayer technology works
- Realtime editing of ordered sequences
- Issues and Experiences in Designing Real-time Collaborative Editing Systems
- Collaborative Editing Technologies
- I was wrong. CRDTs are the future
- Yjs: A CRDT implementation in JavaScript
- ShareJS: Server & client library to allow concurrent editing of any kind of content via operational tranforms.
- 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.
- Examples
- Guides
- Books
- Case Studies
- Documentation
- Resources
- Examples
- Guides
- Case Studies
- Resources
- Examples
- Guides
- Case Studies
- Resources
- Guides
- Tutorials
- Accessibility
- Examples
- Tutorials
- Accessibility
- Resources
- Examples
Contributions welcome
<!-- 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