Social media · Social network

Facebook-style app

Illustrative system design for a social network app like Facebook: 5 topics to read, from requirements to deep dives.

Endless feeds someone else is writing to while you read.

Illustrative design, not Facebook’s actual implementation. Arrowbox is not affiliated with Facebook’s owner. Disclaimer

Feed

News feedIntermediate · 38 min read · Sign in to read
The web home feed: a fast first page, cursor paging, new posts behind a pill and instant likes.
Reactions and commentsIntermediate · 44 min read · Sign in to read
A reaction picker that feels instant and a comment tree that pages, nests and posts optimistically.

Post composerIntermediate · 45 min read · Sign in to read
Mentions, audience, photo attachments and a draft that survives a closed dialog, then a post that appears instantly.

Messenger chatAdvanced · 45 min read · Sign in to read
Chat beside the feed: one socket for every open tab, an outbox that survives offline, and catch-up after reconnect.
NotificationsIntermediate · 44 min read · Sign in to read
A live bell badge, a grouped dropdown that pages, mark-as-read everywhere, and asking for push at the right time.