/awesome-front-end-system-design

Curated front end system design resources for interviews and learning

MIT LicenseMIT

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

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

Photo Sharing (e.g. Instagram)

Examples: instagram.com, flickr.com

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

Pinterest

Examples: Pinterest

Email Client (e.g. Microsoft Outlook)

Contributions welcome

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)

User Interface Components

Autocomplete/Typeahead

Image Carousel

Dropdown Menu

Modal

Poll Widget

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