#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/news-feed-design/post-composition

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/news-feed-design/post-composition

Repovive

Post Composition - News Feed Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Post Composition

Creating new posts

The post composer handles text, media, and mentions.

Component structure:

CreatePost
├── TextArea (auto-expanding)
├── MediaUploader
├── MentionSuggestions
└── SubmitButton

Features to consider:

Character limit with counter
Drag-and-drop media upload
@ mentions with autocomplete
Link preview generation

State:

{ text: '', media: [], mentions: [], isSubmitting: false }

Optimistic creation: Add post to feed immediately, update with server ID on success.