Skip to content

greatfrontend/awesome-front-end-system-design

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 

Repository files navigation

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)

Kanban Board (e.g. Trello)

Rich Text Editing (e.g. Lexical, Slate.js, Tiptap)

Techniques

Local-first / Offline-sync

User Interface Components

Autocomplete/Typeahead

Image Carousel

Dropdown Menu

Modal

Poll Widget

Star Widget

Tooltip/Popover

Contributions welcome

Design Systems

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