mozammilrja/awesome-front-end-system-design

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

Pinterest

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

Guides
- Operational Transformations as an Algorithm for Automatic Conflict Resolution
Case Studies
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
- Etherpad

Collaborative Spreadsheet (e.g. Google Sheets)

Design Tool (e.g. Figma, Excalidraw)

Case Studies
- Keeping Figma fast
- Photoshop is now on the web!

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

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

Contributions welcome

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

About

Curated front end system design resources for interviews and learning

https://www.greatfrontend.com/system-design

MIT License