You are building a simple Blog Posts page (React). Implement the UI and client-side logic in incremental steps.
Data model
Assume each post has at least:
-
id: string
-
authorId: string
-
content: string
-
createdAt: ISO string
-
likeCount: number
-
lastLikedAt: ISO string | null
(timestamp when this post most recently received a like;
null
if never)
Assume each user has:
Step 1 — Render local posts
-
Posts are initially available from a
local JSON file
(or in-memory constant).
-
Render a list of posts.
Step 2 — Add “create post”
-
Add a
textarea
and a submit button.
-
On submit, create a new post and update
local React state
so the UI updates immediately.
-
The newly created post must appear in the feed as if it was posted “now”.
Step 3 — Fetch posts + users; show “you”
Replace the local JSON source with API calls:
-
Fetch posts from an API endpoint (e.g.,
GET /api/posts
).
-
Each post contains
authorId
(not the author name).
-
Fetch user info so you can display author names (e.g.,
GET /api/users/:id
), and fetch the
current user
(e.g.,
GET /api/me
).
-
When rendering posts authored by the current user, display the author label as
"you"
instead of their username.
Step 4 — Sort by likes; allow delete for own posts
-
Sort posts by:
-
likeCount
descending.
-
If
likeCount
is tied, the post that was
most recently liked
(
lastLikedAt
descending) comes first.
-
For posts authored by the current user:
-
show a
Delete
button.
-
clicking Delete removes the post by updating local state (no server required for this step).
-
The ordering must remain correct after:
-
creating a new post,
-
deleting a post,
-
likes changing (if the UI updates
likeCount
/
lastLikedAt
).
Notes
-
You may assume reasonable API responses and can define any missing minor fields needed to meet the requirements (e.g., generating
id
/timestamps for new local posts).
-
Focus on correctness, resilience to async fetch timing, and clean state management.