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: 16 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)
- [Front-End System Design
- How Does Google Sheets work?
- Spreadsheet Implementation Technology: Basics and Extensions
- Why Google Sheets ported its calculation worker from JavaScript to WasmGC
- Designing Data Structures for Collaborative Apps
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)
- Media Source API
- Building the Future of Our Desktop Apps
- Building Spotify’s New Web Player
- Thinking of State in a World of URLs
- Web API | Spotify for Developers
- API - Guide - SoundCloud Developers
- What is Encrypted Media Extensions? | web.dev
- Web Audio API
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