awesome-front-end-system-design: A repository from zhuohuwu0603

Start reading the Front End System Design Guidebook

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

Applications

Examples: Pinterest

Email Client (e.g. Microsoft Outlook)

Contributions welcome

Ridesharing App (e.g. Uber)

Video Streaming (e.g. YouTube, Netflix)

Guides
- GreatFrontEnd's Video Streaming System Design Solution (Paid)
Case Studies
Foundation
- How video works
- Digital video introduction
Resources
Tutorials
- Building a Media Player Series | Chrome for Developers
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

Music Streaming (e.g. Spotify, SoundCloud)

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
  - What is Encrypted Media Extensions? | web.dev
- Documentation
  - Media Source API
  - Web Audio API

Collaborative Editor (e.g. Google Docs)

Case Studies
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.

Collaborative Spreadsheet (e.g. Google Sheets)

Design Tool (e.g. Figma, Excalidraw)

Case Studies
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

Video Call (e.g. Zoom, Skype)

Documentation
Resources
- Real-Time video is (really!) here. | Mux
Examples
- Meet Mux Meet: an open-source video conferencing app
Open Source
- Jitsi

Kanban Board (e.g. Trello)

Case Studies
- Trello

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

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
- Rethinking Rich Text: A Deep Dive Into the Design of Lexical - Acy Watson
- 001: Intro to Lexical iOS — Lexical iOS Tutorial Series
Open Source
- Lexical
- Tiptap
- Slate.js
- Draft.js

Techniques

Local-first / Offline-sync

User Interface Components

Autocomplete/Typeahead

Guides
- GreatFrontEnd's Autocomplete Design Solution
- [Front-End System Design] - Typeahead Widget
Case Studies
Resources
- The Life of a Typeahead Query
- Building an accessible autocomplete control
Examples
- React Select

Image Carousel

Guides
- GreatFrontEnd's Image Carousel Design Solution (Paid)
Case Studies
- Building a Faster Web Experience with the postTask Scheduler | The Airbnb Tech Blog
Resources

Dropdown Menu

Guides
- GreatFrontEnd's Dropdown Menu Design Solution (Paid)
Tutorials
- How to Build a Dropdown Menu with JavaScript
Accessibility
- Menu Button Pattern
- Menu Pattern
Examples
- Themed
  - Dropdowns · Bootstrap v5.3
  - React Menu component - Material UI
- Headless

Modal

Tutorials
- A CSS Approach to Trap Focus Inside of an Element
Accessibility
- Dialog (Modal) Pattern
Resources
- createPortal · React
Examples
- Themed
  - Modal · Bootstrap v5.3
  - React Modal component - Material UI
- Headless

Poll Widget

Guides
- [Front-End System Design] - Design a Poll Widget

Star Widget

Guides
- Front-End System Design - Star Widget

Tooltip/Popover