You are asked to implement a small single-page web application in JavaScript (you may use any modern framework or plain JavaScript) to display and interact with a list of blog posts.
Implement the features in four incremental levels.
Initially, you are given a local JSON file posts.json with an array of blog posts:
[
{
"id": 1,
"title": "First post",
"body": "Hello world",
"authorId": 101,
"likes": 3
},
{
"id": 2,
"title": "Second post",
"body": "Another post",
"authorId": 102,
"likes": 5
}
]
For the API-based levels, assume the backend exposes these HTTP endpoints:
GET /api/posts
authorId
instead of full author info).
GET /api/authors/:id
{
"id": 101,
"name": "Alice"
}
GET /api/me
{
"id": 101
}
Assume all endpoints return JSON. Network requests can fail.
posts.json
file.
Extend your page with the ability to add a new blog post on the client side.
title
(text)
body
(multi-line text)
id
(you may generate it on the client), an arbitrary
authorId
for now, and
likes = 0
.
You are not required to persist the new post to a backend; it is sufficient to manage it in client-side state.
Now replace the local JSON source with remote API calls.
GET /api/posts
instead of using
posts.json
.
GET /api/authors/:id
using
authorId
from the post.
GET /api/me
.
authorId
is equal to the current user's
id
(from
/api/me
), display
You
instead of the author's name.
name
returned by
/api/authors/:id
.
Unknown author
.
You may assume that GET /api/posts and GET /api/authors/:id can be called concurrently and may resolve in any order.
Add an interactive "Like" feature to each post.
likes
field).
Like
button.
Like
button on a post:
likes
count in the UI immediately (no page reload).
likes
count becomes higher.
You do not need to persist likes to the backend for this exercise; manage them in client-side state. Focus on correct UI behavior, state management, concurrency of API calls, and error handling.