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

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/frontend-system-design-framework/data-model-phase

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

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

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/frontend-system-design-framework/data-model-phase

Repovive

Data Model Phase - Frontend System Design Framework | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Data Model Phase

State structure

Define the shape of your application state.

Questions to answer:

What entities exist? (users, posts, comments)
How are they structured?
What's the relationship between entities?
What's local state vs global state?

Example for a feed:

{
  posts: { byId: {}, allIds: [] },
  users: { byId: {}, currentUserId: null },
  ui: { isLoading: false, error: null }
}

Normalized state (byId/allIds pattern) prevents duplication and simplifies updates.