awesome-front-end-system-design

E-Commerce Site (e.g. Amazon)

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

• Guides
  • GreatFrontEnd's E-Commerce Site System Design Solution (Paid)
• Case Studies
  • eBay
    • Shopping for speed on eBay.com | web.dev
    • Speed By A Thousand Cuts | eBay Engineering Blog
  • Others
    • 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 focusing on web performance improved Tokopedia's click-through rate by 35% | web.dev
    • 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
    • JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications
• Resources
  • Milliseconds make millions
  • Autofill on Browsers: A Deep Dive | eBay Engineering Blog
  • Autofilling | web.dev
  • Address forms | Learn Forms! | web.dev
  • Payment and address form best practices | web.dev
  • Frank's Compulsive Guide to Postal Addresses

Photo Sharing (e.g. Instagram)

Examples: instagram.com, flickr.com

• Guides
  • GreatFrontEnd's Photo Sharing System Design Solution (Paid)
• Case Studies
  • Instagram
    • Making Instagram.com faster: Part 1
    • Making Instagram.com faster: Part 2
    • Making Instagram.com faster: Part 3 — cache first
    • Making instagram.com faster: Code size and execution optimizations (Part 4)
    • Launching Instagram Messaging on desktop
    • Crafting an Accessible Instagram Feed
• Resources
  • Instagram.css

Chat App (e.g. Messenger)

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

• Guides
  • GreatFrontEnd's Chat App System Design Solution (Paid)
• Case Studies
  • Facebook & Messenger
    • 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
  • Instagram
    • Launching Instagram Messaging on desktop
  • Slack
    • 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
  • Airbnb
    • Messaging Sync — Scaling Mobile Messaging at Airbnb
• Resources

Travel Booking (e.g. Airbnb)

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

• Guides
  • GreatFrontEnd's Travel Booking System Design Solution (Paid)
• Case Studies
  • Airbnb
    • Rearchitecting Airbnb's Frontend | The Airbnb Tech Blog
    • Building a Faster Web Experience with the postTask Scheduler | The Airbnb Tech Blog
    • Server Rendering, Code Splitting, and Lazy Loading with React Router v4 | The Airbnb Tech Blog
    • Isomorphic JavaScript: The Future of Web Apps
    • Creating Airbnb's Page Performance Score | The Airbnb Tech Blog
    • Measuring Web Performance at Airbnb | The Airbnb Tech Blog
    • React Performance Fixes on Airbnb Listing Pages | The Airbnb Tech Blog
    • Go Fast or Go Home: The Process of Optimizing for Client Performance
    • Building Airbnb's Internationalization Platform | The Airbnb Tech Blog
    • Adding support for Arabic and Hebrew languages on Airbnb | The Airbnb Tech Blog
  • Expedia
    • Images on the Web: Part 1 — Responsive Images | Expedia Group Technology
    • Images on the Web: Part 2 — Implementing responsive images | Expedia Group Technology
    • Expedia's Vrbo prioritizes above-the-fold contents and loads code for it first
    • 12 Tips to Improve Client Side Page Performance | Expedia Group Technology
    • [Using Webpack Module Federation to Create an App Shell | Expedia Group