After about two hours of UI polishing, I want to show you the current state of our MVP before we dive into more advanced features that take advantage of SQLite’s functionality.

Let’s jump into the browser and take a look at where we stand.

Overview of the MVP

Our home route displays recent posts. At this time, we only have one post, which was submitted by me, but I am currently signed out.

We've also added an application header, which:

• Includes a hidden Easter egg.
• Provides sign-in and sign-up links for unauthenticated users.

As an unauthenticated user, I can:

• View post details, including metadata, post content, and comments.
• View user profiles, which display: The user’s name, their account creation date, the number of posts and comments they've submitted.

Since I am not signed in, I cannot create, edit, or delete anything.

Improved Authentication Flow

If I wanted to sign up, our sign-up form has been refined for better usability.

• Clearer labels for each input field.
• An 8-character minimum password requirement for added security.

The sign-in page follows the same styling pattern, ensuring visual consistency across the app.

Let’s sign in now to see how the UI changes.

Logged-In User Experience

Once signed in:

• The header updates to show my username and a sign-out link.
• A “Create New Post” button is now visible.
• Unicode icons have been added to all buttons to improve scannability.

When creating a post:

• We can add new lines inside the post body.
• Flash messages appear upon submission.
• Since I own this post, I now see edit and delete buttons.

Commenting System

Users can now add comments, which appear immediately below the post.

• If I am the author of a comment, I can edit or delete it.
• Edited comments are marked accordingly in the UI.

The same applies to posts—any edited post displays an “edited” label so users know when content has been changed.

Managing User Profiles

Now that I am signed in, I can:

• Edit my profile (currently limited to updating my email).
• Delete my account permanently.
• Change my password via the password reset flow.

The UI has been carefully structured for clarity:

• Titles are positioned in the top left.
• Secondary actions appear in the top right.
• Icons are used for all actions to improve usability.
• Consistent naming and styling ensure a smooth experience.

While this app is relatively simple, it demonstrates:

• How to work with Rails efficiently.
• Leveraging scaffolds for rapid development.
• Building intuitive UIs with consistency.
• Using Rails' built-in tools to create high-leverage tests.

Up next, we’ll explore some additional unique features to build powerful enhancements into our application.