...

/

Creating a UI

Creating a UI

Follow step-by-step instructions to create a SinglePost component for displaying post details and comments.

In this lesson, we’ll modify the Post component for consistency when displaying a single post, add a “Back” button on the layout so the user can go back to the home page, and finally, add CRUD features, which will be somewhat similar to the Post components. Before listing the comments, we need to ensure that the user can create comments. This will require building a page called SinglePost that will show details about a post and the comments.

Let’s look at the UI of the page in the following figure:

Press + to interact
Result of the SinglePost page
Result of the SinglePost page

The UI in the preceding figure gives us a good idea of the result. When the page is built and the user clicks on a comment, a modal will appear, and the user will be able to create a comment. Let’s stick to this case first, and we’ll explore the other CRUD operations later.

Notice that we also have a back button in the top-left corner of the page—something to add to the ...