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

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. ```hint Store facts, derive order Decide what belongs in state and what can be computed from it on each render. ``` #### 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. ```hint One comparator Think about how pinning changes the comparison of two posts, rather than adding a second list. ``` #### 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 ### What a Strong Answer Covers - Clean component decomposition (feed, post, vote controls) and a single source of truth - Correct vote semantics, including toggling and switching - Immutable updates and memoized derived ordering - Accessibility of the vote and pin controls - A plan for server persistence: optimistic updates, rollback, and rapid repeated clicks ### 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?