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
-
GreatFrontEnd's Front End System Design Guidebook
-
RADIO Framework for Front End System Design
-
Front End Interview Handbook
-
Frontend system design interviews - the definitive guide
Applications
News Feed (e.g. Facebook)
Examples: facebook.com, twitter.com, reddit.com, quora.com
-
GreatFrontEnd's News Feed System Design Solution
- Facebook
-
Rebuilding our tech stack for the new Facebook.com
-
Making Facebook.com accessible to as many people as possible
- Twitter
-
How we built Twitter Lite
-
Building the new Twitter.com
-
Dissecting Twitter's Redux Store
-
Twitter Lite and High Performance React Progressive Web Apps at Scale
- Instagram
-
Making Instagram.com faster: Part 1
-
Making Instagram.com faster: Part 2
-
Making Instagram.com faster: Part 3 — cache first
-
Facebook open sources rich text editor framework Draft.js
-
Evolving API Pagination at Slack
E-Commerce Site (e.g. Amazon)
Examples: amazon.com, ebay.com, walmart.com, flipkart.com
-
GreatFrontEnd's E-Commerce Site System Design Solution (Paid)
- eBay
-
Shopping for speed on eBay.com | web.dev
-
Speed By A Thousand Cuts | eBay Engineering Blog
- 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
-
Milliseconds make millions
-
Autofill on Browsers: A Deep Dive | eBay Engineering Blog
-
Autofilling | web.dev
-
Address forms | Learn Forms! | web.dev
-
Payment and address form best practices | web.dev
-
Frank's Compulsive Guide to Postal Addresses
Photo Sharing (e.g. Instagram)
Examples: instagram.com, flickr.com
-
GreatFrontEnd's Photo Sharing System Design Solution (Paid)
- Instagram
-
Making Instagram.com faster: Part 1
-
Making Instagram.com faster: Part 2
-
Making Instagram.com faster: Part 3 — cache first
-
Making instagram.com faster: Code size and execution optimizations (Part 4)
-
Launching Instagram Messaging on desktop
-
Crafting an Accessible Instagram Feed
-
Instagram.css
Chat App (e.g. Messenger)
Examples: Messenger, WhatsApp Web, Slack, Discord, Telegram_
-
GreatFrontEnd's Chat App System Design Solution (Paid)
- 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
- Instagram
-
Launching Instagram Messaging on desktop
- 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
-
Messaging Sync — Scaling Mobile Messaging at Airbnb
Travel Booking (e.g. Airbnb)
Examples: airbnb.com, booking.com, expedia.com, tripadvisor.com
-
GreatFrontEnd's Travel Booking System Design Solution (Paid)
- Airbnb
-
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 The Future of Web Apps
-
Creating Airbnb's Page Performance Score | The Airbnb Tech Blog
-
Measuring Web Performance at Airbnb | The Airbnb Tech Blog
-
React Performance Fixes on Airbnb Listing Pages | The Airbnb Tech Blog
-
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
- Expedia
-
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
-
Web Applications: Analyzing Client-Side Performance | Expedia Group Technology
- Agoda
-
Breaking the Monolith — Modular redesign of Agoda.com | Agoda Engineering & Design
- TripAdvisor
-
Yes I'm Lazy | TripAdvisor Engineering and Product Blog
- Booking.com
-
Progressive Web Apps with Service Workers | Booking.com Engineering
- Others
-
MakeMyTrip.com's new PWA delivers 3X improvement in conversion rates
-
Expedia Accessibility Guidelines
-
Dynamic rendering | web.dev
-
Autofill on Browsers: A Deep Dive | eBay Engineering Blog
-
Autofilling | web.dev
-
Address forms | Learn Forms! | web.dev
-
Payment and address form best practices | web.dev
-
Frank's Compulsive Guide to Postal Addresses
Pinterest
Examples: Pinterest_
-
GreatFrontEnd's Pinterest System Design Solution (Paid)
-
Design A Pinterest Layout | FrontEnd System Design Interview Question | Component Design
-
A Pinterest Progressive Web App Performance Case Study
-
A one year PWA retrospective
-
Improving GIF performance on Pinterest
-
Gestalt (Pinterest's design system)
-
Gestalt Masonry component
-
How Pinterest Masonry works
Email Client (e.g. Microsoft Outlook)
Contributions welcome
Ridesharing App (e.g. Uber)
-
Front-End System Design - Uber
Video Streaming (e.g. YouTube, Netflix)
-
GreatFrontEnd's Video Streaming System Design Solution (Paid)
- YouTube
-
Building a Better Web - Part 1: A faster YouTube on web
-
How YouTube improved video performance with the Media Capabilities API
-
Reverse-Engineering YouTube
-
Reverse-Engineering YouTube: Revisited
- Netflix
-
HTML5 Video at Netflix
-
Update on HTML5 Video for Netflix
-
Implementing Japanese Subtitles on Netflix
-
Pseudo Localization @ Netflix
-
Modernizing the Web Playback UI
- Mux
-
How we made Mux Player’s loading feel great
-
How video works
-
Digital video introduction
-
Media | web.dev
-
<video> and <source> tags | Articles | web.dev
-
Fast playback with audio and video preload
-
Mobile Web Video Playback | Articles | web.dev
- Streaming
-
Media Source Extensions | Articles | web.dev
-
Synchronize audio and video playback on the web | Articles | web.dev
-
Dynamic Adaptive Streaming over HTTP
-
HTTP Live Streaming
- Performance
-
Lazy loading video | Articles | web.dev
- Accessibility
-
Media accessibility | Articles | web.dev
-
Video and audio | Accessibility | web.dev
-
<video> elements must have a <track> for captions | Articles | web.dev
-
Building a Media Player Series | Chrome for Developers
-
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.
-
<video>: The Video Embed element
-
Guide to streaming audio and video | MDN
-
Media Source API | MDN
-
DASH Adaptive Streaming for HTML 5 Video | MDN
-
Media Capabilities API | MDN
Music Streaming (e.g. Spotify, SoundCloud)
- Spotify
-
Building the Future of Our Desktop Apps
-
Building Spotify’s New Web Player
-
Thinking of State in a World of URLs
-
Web API | Spotify for Developers
- 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
-
What is Encrypted Media Extensions? | web.dev
- Documentation
-
Media Source API
-
Web Audio API
Collaborative Editor (e.g. Google Docs)
- Google Docs
-
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
- Figma
-
How Figma's multiplayer technology works
-
Realtime editing of ordered sequences
- Notion
-
The data model behind Notion's flexibility
- Others
-
Issues and Experiences in Designing Real-time Collaborative Editing Systems
-
A Pragmatic Approach to Live Collaboration
-
Understanding sync engines: How Figma, Linear, and Google Docs work
-
Operational Transformations as an Algorithm for Automatic Conflict Resolution
-
I was wrong. CRDTs are the future
-
You don't need CRDTs for collaborative experiences
- 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
- ShareJS 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.
-
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.
Collaborative Spreadsheet (e.g. Google Sheets)
-
How Does Google Sheets work?
-
Designing Data Structures for Collaborative Apps
-
Why Google Sheets ported its calculation worker from JavaScript to WasmGC
-
Spreadsheet Implementation Technology: Basics and Extensions
Design Tool (e.g. Figma, Excalidraw)
-
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
-
Rendering like Butter – a Confluence Whiteboards Story
-
Triangles at work: GPU rendering shapes and connectors in Confluence whiteboards
-
Understanding sync engines: How Figma, Linear, and Google Docs work
- Canva
-
Behind the draw - How Canva's drawing tool works
-
Real-time mouse pointers
-
How we see groups in design
-
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
Video Call (e.g. Zoom, Skype)
-
Front-End System Design - Video Conference
-
Media Capture and Streams API
-
MediaStream Recording API
-
WebRTC API
-
Real-Time video is (really!) here. | Mux
-
Meet Mux Meet: an open-source video conferencing app
-
Jitsi
Task Tracking (e.g. Linear, Trello)
- 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
- Linear
-
Linear's realtime sync
-
Scaling the Linear Sync Engine
Rich Text Editing (e.g. Lexical, Slate.js, Tiptap)
- Notion
-
The data model behind Notion's flexibility
-
Creating the Notion API
- Medium
-
Why ContentEditable is Terrible (Or: How the Medium Editor Works): By Nick Santos of Medium team
-
Rethinking Rich Text: A Deep Dive Into the Design of Lexical - Acy Watson
-
001: Intro to Lexical iOS — Lexical iOS Tutorial Series
-
Lexical
-
Tiptap
-
Slate.js
-
Draft.js
Techniques / Topics
AI in Frontend
-
Reddit — Query Autocomplete from LLMs
-
Medium – Building a ChatGPT Plugin for Medium
-
Liveblocks — Building an AI copilot inside your Tiptap text editor
Internationalization (i18n) / Localization (l10n)
- Canva
-
How to design in every language at once
- Doordash
-
Overcoming Localization Challenges for International Expansions
Server-driven User Interfaces (SDUI)
-
Server Driven UI (SDUI): The Necessary Evil for Scalable Mobile Apps
-
Introduction to Server-Driven UI
-
Mastering SDUI: A Deep Dive into Server-Driven UI
-
Airbnb — A Deep Dive into Airbnb’s Server-Driven UI System
-
Faire — Transitioning to server-driven UI
-
Shopify — Implementing Server-Driven UI Architecture on the Shop App
-
Lyft — The Journey to Server Driven UI At Lyft Bikes and Scooters
-
Expedia — Expedia Group Transforms Product Development with Apollo
-
Server-Driven User-Interface (SDUI): A framework example for Server Driven UI (SDUI) that teaches you the best practices to scale
Local-first / Offline-sync
-
Are Sync Engines The Future of Web Applications?
-
Airplane mode: enabling Trello mobile offline
-
Database in the Browser, a Spec
-
A Graph-Based Firebase
- Linear
-
Linear's realtime sync
-
Scaling the Linear Sync Engine
- Others
-
Understanding sync engines: How Figma, Linear, and Google Docs work
-
Local-first Software – website dedicated to local-first technologies
-
PouchDB
-
RxDB
-
WatermelonDB
-
Dexie.js
-
TinyBase
-
InstantDB
-
ElectricSQL
-
Replicache
-
Zero
User Interface Components
Autocomplete/Typeahead
-
GreatFrontEnd's Autocomplete Design Solution
-
The Life of a Typeahead Query
-
Building an accessible autocomplete control
-
React Select
Image Carousel
-
GreatFrontEnd's Image Carousel Design Solution (Paid)
-
Building a Faster Web Experience with the postTask Scheduler | The Airbnb Tech Blog
-
Creating an Accessible Image Carousel
-
Designing A Perfect Carousel UX
-
A Content Slider
Dropdown Menu
-
GreatFrontEnd's Dropdown Menu Design Solution (Paid)
-
How to Build a Dropdown Menu with JavaScript
-
Menu Button Pattern
-
Menu Pattern
- Themed
-
Dropdowns · Bootstrap v5.3
-
React Menu component - Material UI
- Headless
-
Dropdown Menu — Radix UI
-
Menu Button — Reach UI
-
Menu (Dropdown) - Headless UI
Modal / Dialog
-
Building a Dialog for Reddit Web
-
A CSS Approach to Trap Focus Inside of an Element
-
Dialog (Modal) Pattern
-
createPortal · React
- Themed
-
Modal · Bootstrap v5.3
-
React Modal component - Material UI
- Headless
-
Dialog — Radix UI
-
Dialog (Modal) — Reach UI
-
Dialog (Modal) - Headless UI
Star Widget
-
Front-End System Design - Star Widget
Tooltip/Popover
Contributions welcome
Design Systems
-
Reddit – From Chaos to Cohesion: Reddit's Design System Story
-
Thumbtack - How Thumbtack structures their design system
-
Figma – The shared language of props
-
Design Systems – A design systems publication by Figma
-
Design systems 101: What is a design system?
-
Design systems 102: How to build your design system
-
The Design System Guide
Miscellaneous
<!-- Template for new applications. -->
{Product Name}
Examples: foo.com, bar.com
- Guides
- Case Studies
- Resources
<!-- Template for new UI components. -->
{UI Component Name}
- Guides
- Tutorials
- Accessibility
- Examples
