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

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/data-layer-and-api-design/data-layer-example

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

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

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/data-layer-and-api-design/data-layer-example

Repovive

Data Layer Example - Data Layer and API Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Data Layer Example

Putting it together

Let's design the data layer for a social feed.

API design:

GET /feed?cursor=X&limit=20
  → { posts: [...], nextCursor }

POST /posts/:id/like
  → { success, likeCount }

Caching strategy:

Feed: In-memory, stale-while-revalidate
User profiles: Cache for $5$ minutes

Real-time: SSE for new post notifications, polling for like counts.

Optimistic updates: Like button updates immediately, rollback if server fails.

This covers the common patterns in a real application.