awesome-front-end-system-design
Curated front end system design resources for interviews and learning
https://github.com/greatfrontend/awesome-front-end-system-design
Last synced: 8 days ago
JSON representation
-
Applications
-
Chat App (e.g. Messenger)
- GreatFrontEnd's Chat App System Design Solution
- [Front-End System Design
- 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
- Launching Instagram Messaging on desktop
- 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
- Messaging Sync — Scaling Mobile Messaging at Airbnb
-
Collaborative Editor (e.g. Google Docs)
- Operational Transformations as an Algorithm for Automatic Conflict Resolution
- 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
- Issues and Experiences in Designing Real-time Collaborative Editing Systems
- I was wrong. CRDTs are the future
- Yjs
- ShareJS
- Etherpad
- Improved Accessibility in Google Docs and Sites
- A Pragmatic Approach to Live Collaboration
- You don't need CRDTs for collaborative experiences
- Visualization of OT with a central server
- An Interactive Intro to CRDTs
- ShareDB
- The Plaintext OT Type
- The Plaintext OT Type, with proper unicode positions
- CRDT.tech
- An introduction to Conflict-Free Replicated Data Types
- OT FAQ
- Conflict-free Replicated Data Types
- CRDTs: Consistency without concurrency control
- Fluid Framework
- Concurrency Control in Groupware Systems
- High-Latency, Low-Bandwidth Windowing in the Jupiter Collaboration System
- OT FAQ
- Understanding sync engines: How Figma, Linear, and Google Docs work
-
Collaborative Spreadsheet (e.g. Google Sheets)
-
Design Tool (e.g. Figma, Excalidraw)
- Keeping Figma fast
- Photoshop is now on the web!
- 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
- Rendering like Butter – a Confluence Whiteboards Story
- Triangles at work: GPU rendering shapes and connectors in Confluence whiteboards
- Craft.js
- tldraw
- Excalidraw - drawn like diagrams
- draw.io
- Mermaid
- xyflow - based UIs with React
- React Diagrams
- JointJS
- React Easy Diagram
- Penpot
- Rendering like Butter – a Confluence Whiteboards Story
- Real-time mouse pointers
- Behind the draw - How Canva's drawing tool works
- How we see groups in design
- Triangles at work: GPU rendering shapes and connectors in Confluence whiteboards
-
E-Commerce Site (e.g. Amazon)
- GreatFrontEnd's E-Commerce Site System Design Solution
- 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 Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint
- Lowe's website is among fastest performing e-commerce websites
- Speed By A Thousand Cuts | eBay Engineering Blog
- Autofill on Browsers: A Deep Dive | eBay Engineering Blog
- Frank's Compulsive Guide to Postal Addresses
- How focusing on web performance improved Tokopedia's click-through rate by 35% | web.dev
- Milliseconds make millions
-
Kanban Board (e.g. Trello)
- 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
-
Music Streaming (e.g. Spotify, SoundCloud)
-
News Feed (e.g. Facebook)
- GreatFrontEnd's News Feed System Design Solution
- [Front End System Design
- Rebuilding our tech stack for the new Facebook.com
- Making Facebook.com accessible to as many people as possible
- 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
- Facebook open sources rich text editor framework Draft.js
- Evolving API Pagination at Slack
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- How we built Twitter Lite
- Making Instagram.com faster: Part 1
- Building the new Twitter.com
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- facebook.com
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
- Making Instagram.com faster: Part 2
- Making Instagram.com faster: Part 3 — cache first
- Making Instagram.com faster: Part 1
-
Programming Languages
Categories
Sub Categories
Video Streaming (e.g. YouTube, Netflix)
370
Photo Sharing (e.g. Instagram)
285
News Feed (e.g. Facebook)
125
Rich Text Editing (e.g. Lexical, Slate.js, Tiptap)
40
Design Tool (e.g. Figma, Excalidraw)
30
Collaborative Editor (e.g. Google Docs)
27
Travel Booking (e.g. Airbnb)
27
Chat App (e.g. Messenger)
22
Local-first / Offline-sync
15
Task Tracking (e.g. Linear, Trello)
11
Dropdown Menu
10
E-Commerce Site (e.g. Amazon)
10
Pinterest
9
Server-driven User Interfaces (SDUI)
9
Kanban Board (e.g. Trello)
8
Design Systems
8
Music Streaming (e.g. Spotify, SoundCloud)
8
Video Call (e.g. Zoom, Skype)
7
Autocomplete/Typeahead
5
Modal
5
Image Carousel
5
Collaborative Spreadsheet (e.g. Google Sheets)
5
Modal / Dialog
5
AI in Frontend
3
Internationalization (i18n) / Localization (l10n)
2
Ridesharing App (e.g. Uber)
2
Star Widget
1
Poll Widget
1
Keywords
javascript
5
react
4
typescript
4
flowchart
4
diagram
4
collaboration
4
canvas
3
whiteboard
3
diagrams
3
design
2
video
2
dash
2
collaborative-editing
2
drawing
2
typescript-library
2
hls
2
svg
2
visualization
2
playback
1
playback-controls
1
offline-mode
1
offline-capable
1
offline
1
video-playback
1
video-player
1
video-player-library
1
video-streaming
1
vod
1
libreoffice
1
collaborative
1
etherpad
1
docx
1
collaborative-framework
1
collaborative-research
1
collaborative-writing
1
document
1
documents
1
crdt
1
decentralized
1
offline-first
1
p2p
1
peer-to-peer
1
realtime
1
shared-editing
1
yjs
1
diagrams-as-code
1
documentation
1
mindmap
1
uml-diagrams
1
clojure
1