Library

FE System Design

General

0 topics

Applications

16 topics

News Feed (e.g. Facebook)

E-Commerce Site (e.g. Amazon)

Chat App (e.g. Messenger)

Travel Booking (e.g. Airbnb)

Case Studies

Email Client (e.g. Microsoft Outlook)

Contributions welcome

Video Streaming (e.g. YouTube, Netflix)

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.

Collaborative Editor (e.g. Google Docs)

Operational Transformations (OTs)

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)

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.

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.

Design Tool (e.g. Figma, Excalidraw)

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

Techniques / Topics

4 topics

Server-driven User Interfaces (SDUI)

User Interface Components

7 topics