Render Blog Posts Page

Implement a blog post rendering page with the following phases: Phase 1: Read blog post data from a local JSON file and display it on the page. Phase 2: Add a text area to the page, allowing users to submit new blog posts to the local state and update the display in real-time. Phase 3: Fetch posts and user information from an API. Each post's author name is replaced by the author ID, and you need to use the API to retrieve the real author name. If the post belongs to the current user, display "you" in place of the author name. Phase 4: Order posts by the number of likes in descending order. For the posts submitted by the current user, add a delete button that removes the post by manipulating the local state. If multiple posts have the same number of likes, the most recently liked post should appear first. When a new post is submitted by the current user, the order should be properly maintained. Notes: Implement using ReactJS. Leverage IDE features for variable name auto-completion during development. Only one screen and browser are allowed; the entire process must be recorded with a camera and screen recording. Example Input initial posts loaded Output Posts are displayed