Problem Description

You are tasked with implementing a small single-page web application (SPA) in JavaScript to display and interact with a list of blog posts. You may use any modern framework or plain JavaScript. The implementation should be completed in four incremental levels.

Data Model

Initially, you will use a local JSON file (posts.json) containing an array of blog posts. For later levels, assume a backend exposes the following HTTP endpoints, all returning JSON. Network requests can fail.

// posts.json structure and GET /api/posts response
[
  {
    "id": 1,
    "title": "First post",
    "body": "Hello world",
    "authorId": 101,
    "likes": 3
  },
  {
    "id": 2,
    "title": "Second post",
    "body": "Another post",
    "authorId": 102,
    "likes": 5
  }
]

// GET /api/authors/:id response
{
  "id": 101,
  "name": "Alice"
}

// GET /api/me response
{
  "id": 101
}

Level 1: Render Posts from Local JSON

1. Load the posts from the local posts.json file.
2. Render a list of blog posts to the page.
   • For each post, display at least the title and body.
3. Author information or likes are not required at this level.

Level 2: Add a Form to Create Posts

Extend the page with the ability to add new blog posts on the client side.

1. Add a form with the following inputs:
   • title (text)
   • body (multi-line text)
2. When the user submits the form:
   • Create a new post object with a unique id (client-generated), an arbitrary authorId, and likes = 0.
   • Append it to the existing list of posts without reloading the page.
3. Clear the form after successful submission.

Note: New posts do not need to be persisted to a backend; client-side state management is sufficient.

Level 3: Replace Local JSON with API Calls and Show Authors

Replace the local JSON source with remote API calls and enhance post display.

1. On page load, fetch all posts from GET /api/posts.
2. For each post, fetch its author information from GET /api/authors/:id using the authorId from the post.
   • Fetch these author details in parallel/asynchronously (do not block on one author before starting the next if possible).
3. Fetch the current user from GET /api/me.
4. In the UI, for each post:
   • Display the post's title and body.
   • Display the author label:
     • If the post's authorId matches the current user's id (from /api/me), display You.
     • Otherwise, display the author's name returned by /api/authors/:id.
5. Implement basic loading and error handling:
   • Show a loading state while posts are being fetched.
   • If fetching posts fails, show an error message instead of the list.
   • If fetching an individual author fails, still show the post but display Unknown author.

Assumption: GET /api/posts and GET /api/authors/:id can be called concurrently and may resolve in any order.

Level 4: Add Likes and Keep Posts Sorted by Likes

Add an interactive "Like" feature to each post.

1. For each rendered post, display:
   • The current number of likes (from its likes field).
   • A Like button.
2. When the user clicks the Like button on a post:
   • Increment that post's likes count in the UI immediately (no page reload).
   • Re-sort the list of posts on the client so that posts are always displayed in descending order of likes (most liked first).
3. The sorting should update dynamically after each click.

Note: Likes do not need to be persisted to the backend; client-side state management is sufficient. Focus on correct UI behavior, state management, concurrency of API calls, and error handling.