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

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/state-management/state-design-example

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

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

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/state-management/state-design-example

Repovive

State Design Example - State Management | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

State Design Example

Putting it together

Let's design state for a messaging app.

State structure:

{
  // Normalized entities
  conversations: { byId: {}, allIds: [] },
  messages: { byId: {} },
  users: { byId: {} },
  
  // UI state
  ui: {
    activeConversationId: null,
    messageInput: "",
    isComposing: false
  },
  
  // Server state metadata
  status: {
    conversations: { loading: false, error: null },
    messages: { loading: false, error: null }
  }
}

Keep entities (normalized), UI state (local), and loading states distinct.