Understanding the interface

What the Conduit interface is

Conduit is a RealWorld application built for browsing, creating, and managing articles. The interface connects the home feeds, article pages, comments, profiles, and article editor so you can move from finding an article to working with it.

Use this page to recognize the main surfaces and choose where to continue:

Before you start

The interface changes according to whether you are signed in and, on an article page, whether the article belongs to you. Have the article route available when you need to work with an existing article.

Prerequisites

Choose where to work

The shared header is the starting point for the main destinations. Home also gives you feed, tag, and article links, while the article surface can lead you to the editor or an author's profile.

Steps

1. Choose the destination that matches your work:

   If you want to…	Select or open
   Return to the home feed	Home
   Read articles from authors you follow	Your Feed
   Browse all articles	Global Feed
   Filter articles by a tag	The tag value in the feed navigation
   Open a listed article	Read more...
   Write a new article	New Article
   Change your settings	Settings
   Open an author's profile	The author's username
   Sign in	Sign in
   Register	Sign up

2. If the following feed has no articles, select Go to the Global Feed to browse the global list.

Result: The selected feed, article, editor, profile, or settings surface is on screen.

Recognize the Home surface

The Home surface is where you choose a feed and browse article previews. The signed-out Home banner identifies Conduit with conduit and the text A place to share your knowledge..

Steps

1. Choose a feed:

   If you want to…	Select
   Read articles from authors you follow	Your Feed
   Browse all articles	Global Feed

2. Select a tag value when you want a tag-filtered feed.

3. Use Popular Tags to identify the available tag choices.

4. Select Read more... in an article preview to open the article.

5. Select a page number when the article list has more than one page.

The article list can show these states:

Result: Home shows the feed or tag list you selected, the current article-list state, and any available article previews or page controls.

Recognize article and editor surfaces

An article surface is where you read an article, see its author and tags, and work with comments or article actions. The editor surface is where you enter an article's title, description, body, and tags before publishing it.

Steps

1. Choose the surface that matches your task:

   If you want to…	Use this surface
   Read the article body and its tags	Article page
   Add a comment	Write a comment..., then Post Comment
   Enter a title	Article Title
   Enter the article description	What's this article about?
   Enter the article body	Write your article (in markdown)
   Add tags	Enter tags
   Publish or edit the article	Publish Article
   Change an existing article	Edit Article
   Remove an existing article	Delete Article
   Follow or unfollow the author	Follow or Unfollow, followed by the author value
   Add or remove a favorite	Favorite Article or Unfavorite Article, followed by the counter

2. In the editor, enter tags in Enter tags and press Enter to add the tag.

3. Select Publish Article when the article fields are ready.

4. On an article page, select Write a comment....

5. Select Post Comment to submit the comment.

Result: The article page contains the article body, tags, comments, and article actions; the editor contains the article fields, tags, and publish control.

Handle signed-in and signed-out variations

Authentication and article ownership determine which controls appear. Use the control that is present on your screen rather than looking for an action on the other branch.

Steps

1. Choose the branch that matches what you see:

   If you see…	Continue with…
   Sign in and Sign up in the header	Select Sign in or Sign up before using authenticated features.
   New Article and Settings in the header	Select the destination for the authenticated task.
   Edit Article and Delete Article on an article	Use the article-owner actions.
   Follow or Unfollow and a favorite action	Use the article interaction actions available for an article you do not modify.
   Connecting…	Wait for the authentication status to become available.
   Loading articles...	Wait for the article list to finish loading.
   No articles are here... yet.	Choose another feed or tag.
   An article action sends you to sign-in	Select Sign in before returning to the article work.

Result: You use the route and controls available for your sign-in state, article ownership, article state, and feed contents.

When expected content is missing

An empty feed and a loading list are normal interface states. An error list appears when an article or comment request supplies error keys and messages.

The editor and comment forms can display error keys and messages returned for the request.

Result: You can distinguish a normal empty or loading state from an error list and choose the next route for message-specific help.

Continue with the task you chose

Use the task page that matches the surface you selected:

Result: You have the task page for the next action on the selected surface.