Katkat
Back

Build a React Social Feed with Upvote/Downvote Re-Sorting and Pinned Posts

GleanFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSoftware Engineering Fundamentals

Last updated

Build a React social feed where upvotes and downvotes re-sort posts by score in descending order and pinned posts stay at the top. Tests state design and immutable updates, correct vote-toggle arithmetic, deterministic ordering, accessibility and optimistic persistence with rollback.

In a two-hour round of a frontend engineer loop, the task was to build a social feed page in React with two features:

  • Upvote / Downvote. Each post can be voted up or down. After a vote, the feed is re-sorted by score in descending order.
  • Pin. A pinned post stays at the top of the feed regardless of its score.

Assume the posts come from a mock API or a local JSON file, each with an id, author, body, creation time and score. The report does not give the data shape.

Clarifying Questions

  • Can a user vote more than once on the same post? Does clicking the same vote again undo it, and can an upvote be switched to a downvote?
  • Can several posts be pinned at once, and if so, how are pinned posts ordered among themselves?
  • How should posts with equal scores be ordered?
  • Are votes and pins persisted to a server, and who is allowed to pin?

Part 1 — Feed with voting and re-sorting

Render the feed with vote controls and the current score on each post, and re-sort after every vote.

What This Part Should Cover

  • A state shape that makes a vote a small, immutable update
  • Correct score arithmetic when a vote is changed or undone
  • Deterministic ordering, including ties, with stable list keys

Part 2 — Pinning

Add pin and unpin. Pinned posts stay at the top, and the rest keep the score order.

What This Part Should Cover

  • An ordering rule that combines pin state and score
  • What happens to focus and scroll position when a post moves
  • Behaviour when a pinned post is voted on

Hints

Hint 1

Store facts, derive order: Decide what belongs in state and what can be computed from it on each render.

Hint 2

One comparator: Think about how pinning changes the comparison of two posts, rather than adding a second list.

Follow-up questions

  • Posts jump away from the cursor right after a vote. How would you make re-sorting less disorienting?
  • The feed now has 10,000 posts. What changes?
  • Two browser tabs vote on the same post. How do you keep the score consistent?