greatfrontend/awesome-front-end-system-design

Curated front end system design resources for interviews and learning

8,546

33 commits

updated Mar 3, 2026

greatfrontend.com/front-end-system-design-playbook

See the code

README

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

Websites

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
- 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.
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)

Guides
- Front-End System Design - Video Conference
Documentation
Resources
- Real-Time video is (really!) here. | Mux
Examples
- Meet Mux Meet: an open-source video conferencing app
Open Source
- Jitsi

Task Tracking (e.g. Linear, Trello)

Case Studies
- Trello
- Linear
  - Linear's realtime sync
  - Scaling the Linear Sync Engine

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

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

AI in Frontend

Case Studies

Internationalization (i18n) / Localization (l10n)

Case Studies
- Canva
  - How to design in every language at once
- Doordash
  - Overcoming Localization Challenges for International Expansions

Server-driven User Interfaces (SDUI)

Articles
Case Studies
Open Source
- 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

Articles
Case Studies
- Linear
  - Linear's realtime sync
  - Scaling the Linear Sync Engine
- Others
  - Understanding sync engines: How Figma, Linear, and Google Docs work
Websites
- Local-first Software – website dedicated to local-first technologies
Open source
- PouchDB
- RxDB
- WatermelonDB
- Dexie.js
- TinyBase
- InstantDB
- ElectricSQL
Products
- Replicache
- Zero

User Interface Components

Autocomplete/Typeahead

Guides
- GreatFrontEnd's Autocomplete Design Solution
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

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

Case studies
- Building a Dialog for Reddit Web
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

Guides
- Front-End System Design - Star Widget

Tooltip/Popover

Contributions welcome

Design Systems

Miscellaneous

<!-- 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

front-end

front-end-system-design

javascript

react

system-design

system-design-interview

Significant stargazers

(top 24 of 30)

Necati Özmen

1,268 followers · starred Mar 2026

Prateek Bhatnagar

634 followers · starred Feb 2024

Windson yang

260 followers · starred Jan 2024

Kunall Banerjee

61 followers · starred Aug 2025

Similar repos

andrew--r/frontend-case-studies

💼 A curated list of talks and articles about real world frontend development

7,432

Coder-World04/Complete-System-Design

This repository contains everything you need to become proficient in System Design

5,176

imteekay/web-performance-research

⚡️ Web Performance Research

1,054

codingknite/frontend-development

A curated list of resources for Frontend development

2,337

systemdesign42/system-design-academy

If you want to become good at AI engineering & system design, join this newsletter 👇

29,335

amruthpillai/awesome-react

A collection of awesome things regarding React ecosystem

javabuddy/best-system-design-resources

A collection of best resources to learn System Design, Software architecture, and prepare for…

4,491

grab/front-end-guide

📚 Study guide and introduction to the modern front end stack.

15,226

greatfrontend/awesome-front-end-system-design

Curated front end system design resources for interviews and learning

8,546

33 commits

updated Mar 3, 2026

greatfrontend.com/front-end-system-design-playbook

See the code

README

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

Websites

Applications

News Feed (e.g. Facebook)

Examples: facebook.com, twitter.com, reddit.com, quora.com

E-Commerce Site (e.g. Amazon)

Examples: amazon.com, ebay.com, walmart.com, flipkart.com

Examples: instagram.com, flickr.com

Guides
- GreatFrontEnd's Photo Sharing System Design Solution (Paid)
Case Studies
- Instagram
Resources
- Instagram.css

Chat App (e.g. Messenger)

Examples: Messenger, WhatsApp Web, Slack, Discord, Telegram

Travel Booking (e.g. Airbnb)

Examples: airbnb.com, booking.com, expedia.com, tripadvisor.com

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
- 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.
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)

Guides
- Front-End System Design - Video Conference
Documentation
Resources
- Real-Time video is (really!) here. | Mux
Examples
- Meet Mux Meet: an open-source video conferencing app
Open Source
- Jitsi

Task Tracking (e.g. Linear, Trello)

Case Studies
- Trello
- Linear
  - Linear's realtime sync
  - Scaling the Linear Sync Engine

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

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

AI in Frontend

Case Studies

Internationalization (i18n) / Localization (l10n)

Case Studies
- Canva
  - How to design in every language at once
- Doordash
  - Overcoming Localization Challenges for International Expansions

Server-driven User Interfaces (SDUI)

Articles
Case Studies
Open Source
- 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

Articles
Case Studies
- Linear
  - Linear's realtime sync
  - Scaling the Linear Sync Engine
- Others
  - Understanding sync engines: How Figma, Linear, and Google Docs work
Websites
- Local-first Software – website dedicated to local-first technologies
Open source
- PouchDB
- RxDB
- WatermelonDB
- Dexie.js
- TinyBase
- InstantDB
- ElectricSQL
Products
- Replicache
- Zero

User Interface Components

Autocomplete/Typeahead

Guides
- GreatFrontEnd's Autocomplete Design Solution
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

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

Case studies
- Building a Dialog for Reddit Web
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

Guides
- Front-End System Design - Star Widget

Tooltip/Popover

Contributions welcome

Design Systems

Miscellaneous

<!-- 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

front-end

front-end-system-design

javascript

react

system-design

system-design-interview

Significant stargazers

(top 24 of 30)

Necati Özmen

1,268 followers · starred Mar 2026

Prateek Bhatnagar

634 followers · starred Feb 2024

Windson yang

260 followers · starred Jan 2024

Kunall Banerjee

61 followers · starred Aug 2025

Similar repos

andrew--r/frontend-case-studies

💼 A curated list of talks and articles about real world frontend development

7,432

Coder-World04/Complete-System-Design

This repository contains everything you need to become proficient in System Design

5,176

imteekay/web-performance-research

⚡️ Web Performance Research

1,054

codingknite/frontend-development

A curated list of resources for Frontend development

2,337

systemdesign42/system-design-academy

If you want to become good at AI engineering & system design, join this newsletter 👇

29,335

amruthpillai/awesome-react

A collection of awesome things regarding React ecosystem

javabuddy/best-system-design-resources

A collection of best resources to learn System Design, Software architecture, and prepare for…

4,491

grab/front-end-guide

📚 Study guide and introduction to the modern front end stack.

15,226

greatfrontend/awesome-front-end-system-design

README

General

Applications

News Feed (e.g. Facebook)

E-Commerce Site (e.g. Amazon)

Photo Sharing (e.g. Instagram)

Chat App (e.g. Messenger)

Travel Booking (e.g. Airbnb)

Pinterest

Email Client (e.g. Microsoft Outlook)

Ridesharing App (e.g. Uber)

Video Streaming (e.g. YouTube, Netflix)

Music Streaming (e.g. Spotify, SoundCloud)

Collaborative Editor (e.g. Google Docs)

Collaborative Spreadsheet (e.g. Google Sheets)

Design Tool (e.g. Figma, Excalidraw)

Video Call (e.g. Zoom, Skype)

Task Tracking (e.g. Linear, Trello)

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

Techniques / Topics

AI in Frontend

Internationalization (i18n) / Localization (l10n)

Server-driven User Interfaces (SDUI)

Local-first / Offline-sync

User Interface Components

Autocomplete/Typeahead

Image Carousel

Dropdown Menu

Modal / Dialog

Star Widget

Tooltip/Popover

Design Systems

Miscellaneous

Significant stargazers

Similar repos

greatfrontend/awesome-front-end-system-design

README

General

Applications

News Feed (e.g. Facebook)

E-Commerce Site (e.g. Amazon)

Photo Sharing (e.g. Instagram)

Chat App (e.g. Messenger)

Travel Booking (e.g. Airbnb)

Pinterest

Email Client (e.g. Microsoft Outlook)

Ridesharing App (e.g. Uber)

Video Streaming (e.g. YouTube, Netflix)

Music Streaming (e.g. Spotify, SoundCloud)

Collaborative Editor (e.g. Google Docs)

Collaborative Spreadsheet (e.g. Google Sheets)

Design Tool (e.g. Figma, Excalidraw)

Video Call (e.g. Zoom, Skype)

Task Tracking (e.g. Linear, Trello)

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

Techniques / Topics

AI in Frontend

Internationalization (i18n) / Localization (l10n)

Server-driven User Interfaces (SDUI)

Local-first / Offline-sync

User Interface Components

Autocomplete/Typeahead

Image Carousel

Dropdown Menu

Modal / Dialog

Star Widget

Tooltip/Popover

Design Systems

Miscellaneous

Significant stargazers

Similar repos