# Conduit (React) # Articles in Conduit An article is Conduit's social-blogging content: you can find articles in feeds and lists, write or edit them, read their content, favorite them, and add comments. The article journey starts on the home page and continues through the editor, article page, and profile favorites. | If you need to… | Go to | | --- | --- | | Find an article in a feed, filter by a tag, or move between pages | [Find articles](doc:find-articles) | | Start a new article or change one you own | [Create and edit articles](doc:create-and-edit-articles) | | Read an opened article or manage its author actions | [Read and manage an article](doc:read-and-manage-an-article) | | Favorite an article or view favorited articles | [Favorite articles](doc:favorite-articles) | | Add a comment to an article | [Comment on articles](doc:comment-on-articles) | ## Before you start Before you work with articles, know which feed branch applies to you and have the article information ready if you are creating or editing one. A signed-in session starts with the feed; when you are signed out, the home page starts with the global article list. **Prerequisites** | Have or know… | Why it matters here | | --- | --- | | Whether you are signed in | It determines whether the home page starts with **Your Feed** or the global list. | | The article title, description, body, and tags you want to use | These values make up the article submitted by the editor. | | The article you want to change | The editor uses the existing article to update it instead of creating a new one. | | The displayed sign-in branch | Signed-in readers get the comment form; other readers get links to **Sign in** and **sign up**. | The editor uses the article fields and controls described in [Create and edit articles](doc:create-and-edit-articles). This article surface has no required-field marker and no save confirmation or success message for article creation, editing, favoriting, or commenting. ## Find and open articles An article list is a set of article previews that you scan before opening one. The home page can show a list from **Your Feed**, **Global Feed**, or a selected tag, with pagination when the list contains more than 10 articles. **Prerequisites** - You are on the home page. - You know whether you want your feed, the global list, or a tag-filtered list. **Steps** 1. Choose the list you need using this table. | If you want to… | Select or use | | --- | --- | | See articles from your feed | **Your Feed** when it is available | | See the global article list | **Global Feed** | | See articles for a selected tag | Select the tag in the tag list | | Move through a list with more than 10 articles | Select the page number in pagination | 2. Select **Read more...** on the article you want to open. If the list is still loading, the page displays `Loading...`. If the list has no articles, it displays `No articles are here... yet.` Pagination is not shown when the article count is 10 or less. **Result:** The selected article page is open, or the list remains on the selected feed, tag, or page; while the list is loading, the page displays `Loading...`. Continue to the article surface to decide whether to read, favorite, comment on, or edit the article. ## Understand the article surface The article page is the place to read the article body, see its title, author, date, and tags, then continue to favorites or comments. The available author and comment actions depend on whose article or comment you are viewing. | Area | What you work with | | --- | --- | | Article content | The article title, body, and tag list. | | Article preview | The article title, description, author, date, tags, and favorite count. | | Favorite action | The article's favorite state and displayed favorite count. | | Article actions | **Edit Article** and **Delete Article** for the article owner. | | Comments | Existing comment text, author, date, and the comment area. | | Comment access | Signed-in readers see the comment form; other readers see **Sign in** or **sign up**. | | Comment actions | A comment owner selects the delete icon in their own comment row. | The editor collects a title, description, body, and tags for an article. A comment contains text; an article preview carries its favorite state and favorite count. When you are ready to author an article, continue to [Create or edit an article](#create-or-edit-an-article). ## Create or edit an article An article editor is the form for putting an article's title, description, body, and tags into a submitted article. Use it for a new article or use **Edit Article** on an article you own to open the existing article in the editor. ### Enter and publish article content **Prerequisites** - For a new article, you have the title, description, body, and tags ready. - For an existing article, you have opened **Edit Article** on an article you own. **Steps** 1. Enter the article title in **Article Title**. 2. Enter the short description in **What's this article about?**. 3. Enter the article body in **Write your article (in markdown)**. 4. Enter a tag in **Enter tags**. 5. Press Enter to add the tag to the article's tag list. 6. Select **Publish Article**. The same **Publish Article** control submits a new article when no existing article is loaded and submits an update when an article slug is loaded. **Result:** The editor has submitted the article create or update request. For work on an opened article, continue to [Read, favorite, and comment](#read-favorite-and-comment). ## Read, favorite, and comment An opened article lets you read its body and choose whether to keep it in your favorites. A signed-in reader can also enter a comment in the comment form. ### Change an article's favorite state **Prerequisites** - An article preview is visible in an article list. **Steps** 1. Select the article favorite button beside the displayed favorite count. When the article is already favorited, selecting the button unfavorites it. When it is not favorited, selecting the button favorites it. **Result:** The article's favorite action has been toggled. ### Add a comment **Prerequisites** - The article page is open. **Steps** 1. Choose the path that matches your sign-in state. | If you are… | Do this | | --- | --- | | Signed in | Enter the comment in **Write a comment...**, then select **Post Comment**. | | Signed out | Select **Sign in** or **sign up** in the prompt `to add comments on this article.` | The comment is submitted with the article's slug and the text entered in the comment body. **Result:** The signed-in path submits the comment for the opened article; the signed-out path opens the selected authentication page. Use the branch table next when your sign-in state, ownership, or list selection changes what you see. ## Handle the available branches The article surfaces change with your sign-in state, the selected list, and ownership. Use the branch that matches what you see rather than looking for a control from another branch. | What you are trying to do | What appears | | --- | --- | | Start with your signed-in feed | **Your Feed** appears. | | Start with the global list | **Global Feed** appears. | | Work with a selected tag | The tag-filter tab appears with the selected tag. | | Wait for articles to arrive | `Loading...` appears while the list has no article data. | | Work with an empty list | `No articles are here... yet.` appears. | | Edit an article you own | **Edit Article** appears. | | Add a comment while signed in | **Write a comment...** and **Post Comment** appear. | | Add a comment while signed out | **Sign in**, **sign up**, and `to add comments on this article.` appear. | | Remove your own comment | In the comment row, select the delete icon next to your own comment. | | Favorite an article | The outlined favorite button is used when the article is not favorited. | | Remove an article from favorites | The filled favorite button is used when the article is already favorited. | If a message appears instead of the expected article result, use the troubleshooting table next. ## When article work goes wrong Use the exact message on screen to decide whether the article list is loading, empty, waiting for access, or showing a form error. For broader error handling, see [General error messages](doc:general-error-messages). | What you see | What it means | What to do | | --- | --- | --- | | `Loading...` | The article list has not arrived yet. | Wait for the list to load. | | `No articles are here... yet.` | The article list is empty. | Choose another feed, tag, or page. | | `Sign in` and `sign up` | The article page is showing its anonymous comment branch. | Select **Sign in** or **sign up** before adding a comment. | | `to add comments on this article.` | The anonymous reader prompt explains why the comment form is not shown. | Sign in or register, then return to the article. | | `Article Title` | The title field is ready for article input. | Enter the article title. | | `What's this article about?` | The description field is ready for article input. | Enter the article description. | | `Write your article (in markdown)` | The body field is ready for article input. | Enter the article body. | | `Enter tags` | The tag field is ready for article input. | Enter a tag and press Enter. | | `Write a comment...` | The comment field is ready for comment input. | Enter the comment text. | | `The rendered text is each error key followed by its value` | The error list is displaying the returned error information. | Read the key and value, then correct the related input. | The article surface supplies no declared validation, confirmation, or success message for the article and comment actions described here. ## Know what to do next Choose the focused procedure that matches the work you want to complete. | Next task | Continue with | | --- | --- | | Find a list, feed, tag, or page of articles | [Find articles](doc:find-articles) | | Create or edit article content | [Create and edit articles](doc:create-and-edit-articles) | | Read an opened article or use author actions | [Read and manage an article](doc:read-and-manage-an-article) | | Favorite an article or view favorited articles | [Favorite articles](doc:favorite-articles) | | Add or manage comments | [Comment on articles](doc:comment-on-articles) | | Understand the sign-in branch before commenting | [Authentication overview](doc:authentication-overview) | | Continue from an author's article or favorites list | [Profiles overview](doc:profiles-overview) | **Result:** You have the focused article procedure for the next action. # Authentication overview ## Authentication at a glance Authentication is the account process that lets you enter Conduit, create an account, or maintain the account you already use. Conduit uses authentication for sign-in and sign-up, and provides account settings and logout after you enter the application. Use this page to choose the account action that matches your need: | If you need to… | Go to | |---|---| | Enter an existing account | [Sign in](doc:sign-in) | | Create an account | [Sign up](doc:sign-up) | | Review or change account details after entering the application | [Manage your settings](doc:manage-your-settings) | | Continue into the application | [Articles overview](doc:articles-overview) | ## Before you start Before you choose an account action, know whether you are signed out or already signed in. The navigation presents **Sign in** and **Sign up** when no current user is present, and it presents **Settings** when a current user is present. Collect the information for the action you are about to take: | Action | Information on the screen | What to have ready | |---|---|---| | Sign in | **Email** and **Password** | The email address and password for the existing account | | Sign up | **Username**, **Email**, and **Password** | The username, email address, and password for the new account | | Settings | **URL of profile picture**, **Username**, **Short bio about you**, **Email**, and **New Password** | The account details you want to review or change | The settings form loads the current user's profile picture, username, biography, and email when a current user is available. **New Password** starts as an empty settings value and is removed from the update when it is left empty. ## Find the account action The account action is the route that matches what you want to do: `/login` for an existing account, `/register` for a new account, and `/settings` for an account already in the application. 1. Open the navigation for your current account state. 2. Choose one option from the table. | If you need to… | Select | |---|---| | Enter an existing account | **Sign in** | | Create an account | **Sign up** | | Change account details while signed in | **Settings** | 3. Use the link for the account route you want. | If you are on… | Select | You open… | |---|---|---| | The sign-in screen | **Need an account?** | `/register` | | The sign-up screen | **Have an account?** | `/login` | **Result:** You are on the route for the account action you selected. ## Understand the account screens The sign-in screen collects the credentials for an existing account. The sign-up screen collects the details for a new account. The settings screen collects profile and account details for an existing current user. | Screen | Fields | |---|---| | Sign in | **Email** — email input; **Password** — password input | | Sign up | **Username** — text input; **Email** — email input; **Password** — password input | | Settings | **URL of profile picture** — text input; **Username** — text input; **Short bio about you** — text area; **Email** — email input; **New Password** — password input | The account screens show no required-field marker and do not apply a client-side validation rule. Login uses **Email** and **Password**; sign-up adds **Username**; settings uses the profile and account fields listed above. ## Sign in or sign up Sign-in enters an existing account, while sign-up creates a new account using the fields on the selected screen. **Prerequisites** - You are on `/login` or `/register`. - You have the information listed for that route in [Before you start](#before-you-start). **Steps** 1. Open the route for the action you need. 2. For `/login`, fill **Email** and **Password**. For `/register`, fill **Username**, **Email**, and **Password**. 3. Select the control for the route you opened: select **Sign in** on `/login`, or select **Sign up** on `/register`. | Route | Select | |---|---| | `/login` | **Sign in** | | `/register` | **Sign up** | 4. For detailed sign-in or sign-up instructions, open [Sign in](doc:sign-in) or [Sign up](doc:sign-up). **Result:** The account-entry request has been submitted. ## Manage account settings Account settings are the profile and account details you maintain after signing in. Use them to review the current values, update the account, or leave the account. **Prerequisites** - You are signed in and can open `/settings`. - You know which profile or account values you want to change. **Steps** 1. Open `/settings`. 2. Review **URL of profile picture**. 3. Review **Username**. 4. Review **Short bio about you**. 5. Review **Email**. 6. Enter a value in **New Password** only when you want to change the password. 7. Select **Update Settings** to submit the settings form. 8. Select **Or click here to logout.** when you want to leave the account. 9. For the complete settings procedure, open [Manage your settings](doc:manage-your-settings). **Result:** The settings form has been submitted, or the logout action has been selected. ## When account actions branch or go wrong While sign-in, sign-up, or settings work is in progress, **Sign in**, **Sign up**, and **Update Settings** become disabled. The account screens display API errors through the error list when an API error is returned. | What you see | What it means | What to do | |---|---|---| | **Sign in**, **Sign up**, or **Update Settings** is disabled | The related action is in progress. | Wait for the request to finish before selecting the control again. | | An error list appears | The API returned error keys and values. | Read each entry and correct the related account information before submitting again. | | An error entry appears | Each API error entry shows its error name followed by its message. | Use the error name and message shown to identify the information to correct. | ## Know what comes next After account entry, the application flow continues with authenticated user work. Open [Articles overview](doc:articles-overview) to continue into the article area. To complete a specific account action, use [Sign in](doc:sign-in), [Sign up](doc:sign-up), or [Manage your settings](doc:manage-your-settings). # FAQ ## What this FAQ covers Conduit is a social blogging site for accounts, articles, comments, article lists, favorites, and following. Choose an answer about a route or task, then open the page named in the table for its detailed procedure. | If you need to… | Go to | | --- | --- | | Choose a feed, tag, or article list | [Understanding the interface](doc:understanding-the-interface) | | Sign in | [Sign in](doc:sign-in) | | Create an account | [Sign up](doc:sign-up) | | Change account details | [Manage your settings](doc:manage-your-settings) | | Find or create an article | [Find articles](doc:find-articles) or [Create and edit articles](doc:create-and-edit-articles) | | Read or manage an article | [Read and manage an article](doc:read-and-manage-an-article) | | Add a comment | [Comment on articles](doc:comment-on-articles) | | Work with profiles | [Profiles overview](doc:profiles-overview) | | Follow another user | [Follow other users](doc:follow-other-users) | | View favorite articles | [View favorited articles](doc:view-favorited-articles) | | Understand a general error | [General error messages](doc:general-error-messages) | | Resolve a common issue | [Common issues and solutions](doc:common-issues-and-solutions) | ## Before you start **Prerequisites** | Have or know | Why it matters | | --- | --- | | The work you want to do | The application separates authentication, editing, articles, settings, and profiles into different routes. | | Whether you are signed in | Home uses a different article source when a token is present, and the header offers different links for signed-in and signed-out sessions. | | The article slug when editing an existing article | The editor uses the slug route for an existing article and the route without a slug for a new article. | ## Find the right route A route is the address for the page where you perform a particular kind of work. The header provides links for Home, authentication, new articles, and settings. **Steps** 1. Choose the work you need to do. | If you need to… | Select or open | | --- | --- | | Return to the article lists | **Home**, or `/` | | Enter an existing account | **Sign in**, or `/login` | | Create an account | **Sign up**, or `/register` | | Create an article | **New Post**, or `/editor` | | Change account details | **Settings**, or `/settings` | | Open an existing article | [Read and manage an article](doc:read-and-manage-an-article) | | Open a profile | [View a profile](doc:view-a-profile) | | Open a profile's favorites | [View favorited articles](doc:view-favorited-articles) | **Result:** You have selected the route for the work you want to do. ## Sign in or create an account Authentication lets you enter an existing account or create a new one. The sign-in form has Email and Password; the sign-up form has Username, Email, and Password. **Prerequisites** Use **Sign in** for an existing account and **Sign up** for a new account. **Steps** 1. Choose the account action. | If you need to… | Select | | --- | --- | | Enter an existing account | **Sign in** | | Create an account | **Sign up** | 2. Enter the requested values in the fields shown on the selected page. | Page | Fields | | --- | --- | | Sign in | **Email**, **Password** | | Sign up | **Username**, **Email**, **Password** | 3. Select **Sign in** or **Sign up** on the selected page. **Result:** The selected account form has been submitted. ## Manage account settings Account settings hold the profile picture URL, username, short biography, email address, and an optional new password. **Prerequisites** Open `/settings` from **Settings** when the signed-in account is available. **Steps** 1. Open `/settings`. 2. Choose one account action. | If you need to… | Do this | | --- | --- | | Save changed settings | Edit **URL of profile picture**, **Username**, **Short bio about you**, **Email**, or **New Password**, then select **Update Settings**. | | Log out without editing settings | Select **Or click here to logout.** | **Result:** The selected alternative is complete: the settings update was submitted, or the logout action was selected. ## Create, read, and comment on articles An article is a published piece of writing with a title, description, body, and tags. The article page displays the body as sanitized markdown and includes comments. **Prerequisites** Select **New Post** to create an article. On an article page, select **Edit Article** to edit an existing article. **Steps** 1. Select **New Post** to open a new-article form, or select **Edit Article** on an article page to open the existing article in the editor. 2. Enter the article title in **Article Title**. 3. Enter its short description in **What's this article about?**. 4. Write the body in **Write your article (in markdown)**. 5. Enter a tag in **Enter tags** and press Enter to add it to the tag list. 6. Select **Publish Article**. 7. Choose the article action you need. | If you need to… | Select | | --- | --- | | Return to the editor | **Edit Article** | | Delete your article | **Delete Article** | | Add a comment | Enter text in **Write a comment...**, then select **Post Comment** | **Result:** The editor submission, article action, or comment submission has been selected. ## Browse feeds and profiles Home is the article-list starting point. It can show **Global Feed**, **Your Feed** when a token is present, a tag filter, and **Popular Tags**. Profiles show authored or favorited article lists. **Steps** 1. Open `/`. 2. Choose the list or profile action you need. | If you need to… | Select or open | | --- | --- | | Read the global article list | **Global Feed** | | Read the signed-in feed | **Your Feed** when it is available | | Filter by a tag | A tag in **Popular Tags** | | View authored articles | **My Articles** | | View favorited articles | **Favorited Articles** | | Follow or unfollow another user | **Follow** or **Unfollow** | | Change your profile settings | **Edit Profile Settings** | **Result:** You have selected an article list, profile list, follow action, or settings route. ## Understand errors and limits The error list shows the API-provided key and value. **Steps** 1. Read the error text shown in the error list. 2. Compare the displayed text with the action you just selected. 3. For a general error message, open [General error messages](doc:general-error-messages). 4. For a setup or recurring issue, open [Common issues and solutions](doc:common-issues-and-solutions). **Result:** You have the API-provided error text and the page that owns the next remedy. The error list uses this message format: `key errors[key]`. ## Continue with the task Use the route or action you selected to continue: | Next task | Page | | --- | --- | | Learn the Home surface | [Understanding the interface](doc:understanding-the-interface) | | Navigate between routes | [Navigation basics](doc:navigation-basics) | | Sign in | [Sign in](doc:sign-in) | | Sign up | [Sign up](doc:sign-up) | | Manage settings | [Manage your settings](doc:manage-your-settings) | | Work with articles | [Articles overview](doc:articles-overview) | | Find articles | [Find articles](doc:find-articles) | | Create or edit articles | [Create and edit articles](doc:create-and-edit-articles) | | Read an article | [Read and manage an article](doc:read-and-manage-an-article) | | Favorite articles | [Favorite articles](doc:favorite-articles) | | Comment on an article | [Comment on articles](doc:comment-on-articles) | | View or follow profiles | [Profiles overview](doc:profiles-overview), [View a profile](doc:view-a-profile), or [Follow other users](doc:follow-other-users) | | View favorited articles | [View favorited articles](doc:view-favorited-articles) | | Resolve an error | [General error messages](doc:general-error-messages) or [Common issues and solutions](doc:common-issues-and-solutions) | # Profiles overview Use a profile to connect a person's basic information with the articles they authored, the articles they favorited, and the relationship between your profile and theirs. ## What a profile is A profile is the place to view basic user information and the article lists associated with that person. The authored list contains articles created by the profile owner; the favorited list contains articles that person has favorited. | If you need to… | Go to | | --- | --- | | Understand the profile and its article lists | [Read profile information and articles](#read-profile-information-and-articles) | | Open a person's basic information | [View a profile](doc:view-a-profile) | | Follow or stop following another person | [Follow other users](doc:follow-other-users) | | View articles a person has favorited | [View favorited articles](doc:view-favorited-articles) | | Choose an authored or favorited article list | [Choose authored or favorited articles](#choose-authored-or-favorited-articles) | ## Before you start Before choosing a profile action, identify the profile username and whether the profile belongs to you or to another person. **Prerequisites** | Before you begin | What you need | | --- | --- | | Profile username | The username in the profile address or the author's username or image in an article preview | | Profile ownership | Whether the profile is yours or belongs to another person | | Article purpose | Whether you want to inspect authored articles or favorited articles | The profile address uses the username you want to view. Your own profile has **Edit Profile Settings**; another person's profile can show a control for the relationship between your profiles. ## Find a profile Use the profile address or an article preview to open a person's basic information and related article lists. **Prerequisites** - You have the username for the profile or an article preview for that person. **Steps** 1. Choose how to open the profile. | If you are starting from… | Use… | | --- | --- | | A known username | Open the profile address for the username | | An article preview | Select the author's username or image in the article preview | **Result:** The person's profile opens with their basic information and an article list. ## Read profile information and articles A profile screen presents the person's image, username, bio, and the article list you selected. Article lists can contain previews and pagination; while the list is loading, the article area displays `Loading...`. When the list contains no articles, it displays `No articles are here... yet.` | Profile area | What you can read or use | | --- | --- | | Profile header | The profile image, username, and bio | | Authored list | Article previews for the person's created articles | | Favorited list | Article previews for the person's favorited articles | | Article list navigation | Pagination for the current list | | Article preview | The article title, description, author information, date, tags, favorite count, and **Read more...** | To change the article relationship you are viewing, continue with the profile tabs. ## Choose authored or favorited articles Use the profile tabs when you want to change which article relationship you are viewing. **Prerequisites** - You have opened a profile. - You know whether you want the person's authored articles or favorited articles. **Steps** 1. Select the tab that matches the article list you want. | If you want to… | Select… | | --- | --- | | View articles created by the profile owner | **My Articles** | | View articles the profile owner has favorited | **Favorited Articles** | 2. Review the article list that opens. **Result:** The selected article list is active: **My Articles** in the profile's authored-articles view, or **Favorited Articles** in the profile's favorited-articles view. To change the relationship with the profile owner, use the relationship control in the profile header. ## Follow another user Following connects your profile with another person's profile. The relationship control appears on another person's profile and changes between **Follow** and **Unfollow**. | Profile situation | Control shown | | --- | --- | | You do not follow the person | **Follow** followed by the profile username | | You already follow the person | **Unfollow** followed by the profile username | | You opened your own profile | No follow relationship control | **Prerequisites** - You have opened another person's profile. - You can see the relationship control in the profile header. **Steps** 1. Select the control that matches the relationship you want to set. | If the profile shows… | Select… | | --- | --- | | You do not follow the person | **Follow** | | You already follow the person | **Unfollow** | 2. Check the profile information. **Result:** The profile reflects the relationship action you selected. If the article list is loading or empty, use the messages in the next section to identify its state. ## When profile content is loading or empty The article area uses short messages to distinguish a list that is still loading from a list that has no articles. | Message | Meaning | | --- | --- | | `Loading...` | The article list has not arrived yet. | | `No articles are here... yet.` | The current article list contains no articles. | After choosing the article list, use the next section to open an article or move to a related profile view. ## Continue from a profile After you identify the profile and choose an article list, continue with the related task that matches what you want to do next. **Prerequisites** - You have opened a profile. - You have selected an article list. **Steps** 1. Choose the next destination. | If you want to… | Select or use… | | --- | --- | | Open an article | **Read more...** in the article preview | | Return to the profile owner's authored articles | **My Articles** | | Open the profile owner's favorited articles | **Favorited Articles** | | Read profile details | [View a profile](doc:view-a-profile) | | Change the following relationship | [Follow other users](doc:follow-other-users) | | Read the favorites list | [View favorited articles](doc:view-favorited-articles) | **Result:** You are on the article, profile, following, or favorited-article view that matches your next task. # What is Conduit? ## What Conduit is Conduit is a social blogging site for publishing articles, discussing them with comments, maintaining profiles, marking articles as favorites, and following other people. The Home page is the starting point for browsing articles. From there, you can use the global article list, your personal feed, or a tag-based list, then open an article or a profile. | If you need to… | Go to | |---|---| | Understand the available activities | [What can you do with Conduit](doc:what-can-you-do-with-conduit) | | Understand who uses the site | [Who uses Conduit](doc:who-uses-conduit) | | Reach the main article view | [Reach the Home page](#reach-the-home-page) | | Identify the controls on the main article view | [Recognize the Home page](#recognize-the-home-page) | | Learn the broader interface | [Understanding the interface](doc:understanding-the-interface) | | Learn general navigation | [Navigation basics](doc:navigation-basics) | | Learn about sign-in and sign-up | [Authentication overview](doc:authentication-overview) | | Learn about articles | [Articles overview](doc:articles-overview) | | Learn about profiles | [Profiles overview](doc:profiles-overview) | | Find support references | [Getting help](doc:getting-help) | ## Before you start The Home page lets you begin exploring without entering or saving information. It has no form fields and no save, submit, or confirmation control. You need to know whether you want to browse all articles or follow the articles associated with your account. The available feed tabs depend on whether you are signed in. **Result:** You can begin at Home without preparing data for a form. ## Reach the Home page From Home, choose an article list when you want to start browsing. **Prerequisites** - You know whether you want the complete article list or the articles associated with your account. **Steps** 1. Select **Home** in the navigation. 2. Select the destination that matches what you want to do. | If you want to… | Select | |---|---| | Browse all available articles | **Global Feed** | | Browse the articles associated with your account | **Your Feed** when you are signed in | | Create an article | **New Post** when you are signed in | | Change your settings | **Settings** when you are signed in | | Open your profile | your username when you are signed in | | Sign in | **Sign in** when you are signed out | | Create an account | **Sign up** when you are signed out | **Result:** The Home page is open with the article list you selected. When you are signed in, **Your Feed**, **New Post**, **Settings**, and your username are available. When you are signed out, **Sign in** and **Sign up** are available. ## Recognize the Home page On Home, use the article list, tag area, and links to article and profile content. Article and tag values depend on the available content. **Prerequisites** - You have opened Home. **Steps** 1. Read the introductory area when you are signed out. It displays `A place to share your knowledge.`. 2. Use the Home content for the task you want to complete. The tag area is headed `Popular Tags`. | If you want to… | Select | |---|---| | Narrow the article list | a tag value | | Open an article | the article title or **Read more...** | | Favorite or unfavorite an article | the article's favorites-count button | | Move to another article-list page when more than 10 articles are available | a page number | The page can display these messages while content changes: | When you see… | What it means | |---|---| | `Loading...` | The article list is not loaded yet. | | `No articles are here... yet.` | The article list is empty. | | `Loading Tags...` | The tag list is not loaded yet. | 3. Check the message that matches the page state. **Result:** You can identify the introductory text, tag area, article links, favorite control, and pagination on Home, and you can interpret the page's loading and empty-list messages. # Your first day in Conduit Conduit is a social blogging site. This page covers signing in, creating an account, and maintaining your account settings. | If you need to… | Go to | | --- | --- | | sign in to an existing account | [Sign in](doc:sign-in) or **Sign in** on `/login` | | create an account | [Sign up](doc:sign-up) or **Sign up** on `/register` | | change account details or sign out | [Manage your settings](doc:manage-your-settings) or **Your Settings** on `/settings` | | understand the wider authentication flow | [Authentication overview](doc:authentication-overview) | Choose the route that matches your task, then follow the corresponding procedure below. ## Before you start Collect the email address and password for an existing account before you sign in. To create an account, collect a username, email address, and password. To change settings, sign in first so the settings form can use the current account details. The sign-in, sign-up, and settings fields do not show a required marker. Keep the account details you collected ready for the matching route below. ## Find and recognize the account screens Use these routes to open the account surface you need: | If you need to… | Open | | --- | --- | | sign in | `/login` | | create an account | `/register` | | change account details or sign out | `/settings` | On `/login`, use **Email**, **Password**, **Sign in**, and **Need an account?**. On `/register`, use **Username**, **Email**, **Password**, **Sign up**, and **Have an account?**. On `/settings`, use **URL of profile picture**, **Username**, **Short bio about you**, **Email**, **New Password**, **Update Settings**, and **Or click here to logout.** ## Sign in or create an account Choose the existing-account path or the account-creation path below. **Prerequisites** - For sign-in, have an existing account's email address and password. - For sign-up, have a username, email address, and password. **Steps** 1. Choose and complete one account path: | Existing account | New account | | --- | --- | | Open `/login`. | Open `/register`. | | Enter the account email in **Email**. | Enter the new account name in **Username**. | | Enter the account password in **Password**, then select **Sign in**. | Enter the new account email in **Email**. | | | Enter the new account password in **Password**, then select **Sign up**. | 2. To move between the two account routes, select **Need an account?** or **Have an account?**. The submit control is disabled while its account request is in progress. **Result:** A successful sign-in or sign-up leads to `/`. If you need to change account details, open `/settings`. ## Update account settings Your settings are the account details you can review, change, and save while signed in. **Prerequisites** - Sign in before opening `/settings`. - Have the profile picture URL, username, short bio, and email values you want to keep. - Have a new password ready only if you want to change it. **Steps** 1. Open `/settings`. 2. Review **URL of profile picture**. 3. Review **Username**. 4. Review **Short bio about you**. 5. Review **Email**. 6. To change the password, enter it in **New Password**. 7. Select **Update Settings**. 8. To leave the signed-in session, select **Or click here to logout.**. The form removes a blank **New Password** before saving the other settings. The settings values are populated from the current account when that account is available. **Result:** A successful settings save leads to `/`. Selecting **Or click here to logout.** signs you out and leads to `/`. If an account action produces an error, use the guidance below. ## When an account action goes wrong An error list is the area on an account screen where returned account errors appear. Each entry shows the error name followed by its message. | What you see | What it means | What to do | | --- | --- | --- | | An error name followed by its message | The account request returned an error entry. | Read the entry, correct the related account value, and submit the form again. | The sign-in and sign-up screens place this error list above their forms. The settings screen places it above the settings form. # Find articles An article list is a Home view of published articles. A feed is a set of article results returned for a broad reading purpose. A tag is a subject filter that narrows the list to articles carrying that tag. Use a feed when you want a broad set of results, or use a tag when you are looking for a particular subject. | If you need to… | Go to | |---|---| | Browse the public article list | [Open the Home article list](#open-the-home-article-list) | | Read articles from your feed | [Choose a feed or tag](#choose-a-feed-or-tag) | | Narrow the list by subject | [Choose a feed or tag](#choose-a-feed-or-tag) | | Move through more than one page of results | [Handle different result sets](#handle-different-result-sets) | | Open an article or visit its author | [Continue from an article result](#continue-from-an-article-result) | | Favorite an article | [Favorite articles](doc:favorite-articles) | ## Before you start Home is a browsing surface, so you do not enter article details there. The list is chosen from the available feeds or tags, and pagination appears only for a result set containing more than 10 articles. **Prerequisites** - Know whether you need the public list or the list available after you sign in. - Have a subject in mind if you plan to filter by tag. - If you expect page numbers, work with a result set containing more than 10 articles. ## Open the Home article list Open `/` to reach Home, the article-list entry point. It brings together tags, article results, and the feed choices used to narrow those results. **Prerequisites** - Know whether you want the public article list or a signed-in feed. **Steps** 1. Open the Home route at `/`. 2. Locate the feed choices above the article results. **Result:** Home is open with the article-list area and its available feed choices. ## Understand the article-list surface The article-list surface groups feed choices, tags, article results, and page navigation in one place. A selected tag appears as its own active tab, while the article area can show loading or empty-list messages. | Area | What to look for | |---|---| | Feed choices | **Your Feed** appears when an authenticated token is present. **Global Feed** is available without that guard. | | Tag area | Tag links appear when tags have loaded. Selecting one adds an active tag tab. | | Article results | Article rows contain an author link, a date, a favorite control, a title, a description, a **Read more...** link, and tags. | | Page navigation | Page numbers appear only when the article count is greater than 10. | | Loading and empty states | The article area can show `Loading...` or `No articles are here... yet.`. The tag area can show `Loading Tags...`. | The favorite control is a heart icon beside the article's favorite count. ## Choose a feed or tag Choose a feed or tag according to your reading goal. **Prerequisites** - Have Home open. **Steps** 1. Choose the list that matches what you want to read. | If you want to… | Select | |---|---| | Read the public article list | **Global Feed** | | Read the feed available to your signed-in account | **Your Feed** | | Narrow the results to a subject | The tag value for that subject | 2. Confirm that the selected results replace the loading state. 3. If you selected a tag, confirm that the selected tag appears as the active tab. **Result:** The article list matches the feed or tag you selected. ## Handle different result sets The list changes according to your sign-in state, the selected tag, and the number of matching articles. Use the branch that matches what you see. | What you see | What to do | |---|---| | **Your Feed** is available | Select **Your Feed** to request the authenticated feed. | | **Your Feed** is unavailable | Select **Global Feed** for the public article list. | | A tag is selected | Continue with the active tag tab and its filtered results. | | No tag is selected | Choose a tag value from the tag area if you need a subject filter. | | Page numbers are present | Select the page number for the next result set. | | Page numbers are absent | Continue with the current result set. Pagination is not shown for 10 or fewer articles. | The initial list uses the feed when a token exists and the global list otherwise. Global and tagged lists use 10 articles per request, and the feed request starts with 10 articles. **Prerequisites** - Have an article list open. - Use a result set with more than 10 articles to move to another page. **Steps** 1. In the pagination area, select the page number you want to open. 2. Confirm that the selected page results appear. **Result:** The selected page of article results is on screen. ## When the list does not give you a result The Home list uses exact messages for loading and empty results. Use the message on screen to choose the next action. | Message | What it means | |---|---| | `Loading...` | Article data is not ready for display. | | `Loading Tags...` | Tag data is not ready for display. | | `No articles are here... yet.` | The selected list contains no articles to display. | **Prerequisites** - Have Home open with the message visible. **Steps** 1. Check which message appears and follow its action. | If you see… | Select or do… | |---|---| | `Loading...` | Wait for the article area to finish loading. | | `Loading Tags...` | Wait for the tag area to finish loading. | | `No articles are here... yet.` | Select **Global Feed** or choose another available tag. | 2. Confirm that the resulting article list or loading state matches the message action. **Result:** The article area is either loading, shows its available results, or is ready for you to choose another feed or tag. ## Continue from an article result An article result gives you three onward actions: open the article, open its author's profile, or change the article's favorite state. **Prerequisites** - Have an article result on screen. **Steps** 1. Select the action that matches what you want to do. | If you want to… | Select | |---|---| | Open the article | The article title or **Read more...** | | Visit the author's profile | The author's name | | Toggle the article's favorite state | The heart icon beside the article's favorite count | **Result:** The selected article, author profile, or favorite action is open for the next task. Continue with [Read and manage an article](doc:read-and-manage-an-article), [View a profile](doc:view-a-profile), or [Favorite articles](doc:favorite-articles). # General error messages ## Overview The shared error list is the area on a form that displays messages returned after an unsuccessful request. This page covers the **Sign in**, **Sign up**, **Publish Article**, and **Update Settings** forms. | If you need to… | Go to | | --- | --- | | Find the form where an error appears | [Find the error surface](#find-the-error-surface) | | Recognize the error area and its fields | [Recognize the error area](#recognize-the-error-area) | | Decide what the message means | [Handle the error branches](#handle-the-error-branches) | | Respond when a request fails | [When an error occurs](#when-an-error-occurs) | | Correct and submit a sign-in request | [Sign in](doc:sign-in) | | Create an account | [Sign up](doc:sign-up) | | Create or edit an article | [Create and edit articles](doc:create-and-edit-articles) | | Change account settings | [Manage your settings](doc:manage-your-settings) | | Add a comment to an article | [Comment on articles](doc:comment-on-articles) | | Find broader troubleshooting guidance | Common issues and solutions | The Article screen's comment errors belong to the comment procedure rather than to this page. Use [Comment on articles](doc:comment-on-articles) for that flow. ## Prerequisites Before you submit a form, have the information for that form ready. The forms covered here are listed in the procedure below. Know which task you are performing before you open its form. An error list is part of the form response. Its wording comes from the error data returned for that request, so read the message that appears on the form. ## Find the error surface Use this procedure when you need to locate the form that produced the error. **Prerequisites** - Know which task you were performing. **Steps** 1. Open the form that matches your task. | If you were… | Open the form with… | | --- | --- | | Signing in | **Email**, **Password**, and **Sign in** | | Creating an account | **Username**, **Email**, **Password**, and **Sign up** | | Creating or editing an article | **Article Title**, **What's this article about?**, **Write your article (in markdown)**, **Enter tags**, and **Publish Article** | | Changing settings | **URL of profile picture**, **Username**, **Short bio about you**, **Email**, **New Password**, and **Update Settings** | **Result:** The form for the task is on screen, with its fields and submission control available. ## Recognize the error area The error list is separate from the fields you use to enter information. | Form | Fields around the error area | | --- | --- | | Sign-in form | **Email** and **Password** | | Sign-up form | **Username**, **Email**, and **Password** | | Article editor | **Article Title**, **What's this article about?**, **Write your article (in markdown)**, and **Enter tags** | | Settings form | **URL of profile picture**, **Username**, **Short bio about you**, **Email**, and **New Password** | When the form has error data, the error list appears. When it does not, the error list remains absent. Review and correct the information in the fields before submitting again. ## Handle the error branches Use this procedure when an error list is present or when you need to check whether one is present. **Prerequisites** - Have the affected form open. **Steps** 1. Look for the error list on the form. 2. Read each message in the list. Each error-list item shows an error key followed by the value returned for that error. 3. If the error list is not present, continue with the form fields and the task procedure for the form you opened. **Result:** You have either read the message shown for the failed request or confirmed that no error list is displayed. ## When an error occurs When a request fails, its response body is passed to the form. The form-specific task page describes how to correct the request and submit it again. | What you see | What it means | What to do | | --- | --- | --- | | An error list appears | The form received error data. | Read each item, then return to the fields named by the message. | | No error list appears | The form has no error data to display. | Continue with the form-specific task. | | An error-list item appears | The item combines an error key with the value returned for that error. | Use the displayed key and value to decide which field to review. | ## Continue after an error Use the task page for the form you were completing. Select **Sign in**, **Sign up**, **Publish Article**, or **Update Settings**, according to the form you are correcting. **Steps** 1. Return to the task page that matches the form: | Form | Task page | | --- | --- | | Sign-in form | [Sign in](doc:sign-in) | | Sign-up form | [Sign up](doc:sign-up) | | Article editor | [Create and edit articles](doc:create-and-edit-articles) | | Settings form | [Manage your settings](doc:manage-your-settings) | 2. Select the affected field and enter the corrected value. 3. Select the control for the form you are correcting. | Form | Select | | --- | --- | | Sign-in form | **Sign in** | | Sign-up form | **Sign up** | | Article editor | **Publish Article** | | Settings form | **Update Settings** | **Result:** The corrected request is submitted from the task form. # Sign in ## Overview Sign-in authenticates your account. Enter your credentials on the login page; after a successful sign-in, the application takes you to `/`. | If you need to… | Go to | |---|---| | Prepare the information for sign-in | [Prerequisites](#prerequisites) | | Open the sign-in page | [Open the sign-in page](#open-the-sign-in-page) | | Identify the fields and controls | [Understand the sign-in screen](#understand-the-sign-in-screen) | | Submit your credentials | [Submit your credentials](#submit-your-credentials) | | Respond to a loading or rejected request | [Handle sign-in responses](#handle-sign-in-responses) | | Continue after sign-in | [Know what happens next](#know-what-happens-next) | | Understand how sign-in, sign-up, and settings fit together | [Authentication overview](doc:authentication-overview) | | Create an account | [Sign up](doc:sign-up) | | Manage your account after signing in | [Manage your settings](doc:manage-your-settings) | | Find general error guidance | [General error messages](doc:general-error-messages) | ## Prerequisites Have the email address and password for the account you want to sign in to. The sign-in request uses those two values. The page does not mark either sign-in field as required. Enter both values before selecting **Sign in** so the request contains the credentials you intend to use. ## Open the sign-in page The sign-in page is the `/login` route. **Prerequisites** - Have the account email address and password ready. **Steps** 1. Open `/login`. **Result:** The application opens the sign-in page. ## Understand the sign-in screen The sign-in screen contains the `Sign In` heading, two credential fields, a registration link, the **Sign in** control, and an area for returned errors. | Screen item | What to use it for | |---|---| | **Email** | Enter the account email address. | | **Password** | Enter the account password. | | **Need an account?** | Open the registration page. | | **Sign in** | Submit the entered credentials. | | Error area | Read returned error properties. | While the request is in progress, **Sign in** is disabled. When returned errors are available, the error area displays one line for each error as the error key followed by its returned error text. ## Submit your credentials Use this procedure to send the email address and password to the sign-in service. **Prerequisites** - Be on `/login` with the account email address and password ready. **Steps** 1. Enter the account email address in **Email**. 2. Enter the account password in **Password**. 3. Select **Sign in**. **Result:** The application authenticates your account and takes you to `/` after a successful sign-in. ## Handle sign-in responses The response has two reader-facing branches: **Sign in** is disabled while the request is in progress, and a rejected response leaves the page available for correction and another attempt. **Prerequisites** - Have the sign-in request in progress or have received a returned error. **Steps** 1. Use the branch that matches what is on screen: | If you see… | Do this | |---|---| | **Sign in** is disabled | Wait for the request to finish. | | An error line in the error area | Read the line and select **Sign in** again. | **Result:** A completed request either continues to the successful landing route or leaves the returned error text in the error area, with the error key before its returned error text. ## Know what happens next After successful sign-in, the application takes you to `/`. If you do not have an account, select **Need an account?** to open `/register`. **Result:** You are at `/` after a successful sign-in, or at `/register` when you choose to create an account. # Understanding the interface Use this page to choose what appears in the Home article list and move through its pages. ## What the Home page is for The Home page is the area that brings together article lists, tags, and pagination. A feed is an article list selected by **Your Feed** or **Global Feed**. A tag is a displayed value used to select the active tag filter. Pagination is the set of numbered links used to move through a list with more than 10 articles. | If you need to… | Go to | |---|---| | Choose an article feed or tag | [Choose a feed or tag](#choose-a-feed-or-tag) | | Understand which areas and messages can appear | [Before you start](#before-you-start) | | Read the list or move between result pages | [Read articles and move between pages](#read-articles-and-move-between-pages) | | Find articles by a broader reading goal | [Find articles](doc:find-articles) | | Learn how to reach application routes | [Navigation basics](doc:navigation-basics) | | Learn shared product terms | [Basic terminology](doc:basic-terminology) | | Get help when the list does not behave as expected | [Getting help](doc:getting-help) | Use the conditions below before choosing a feed or tag. The Home page has no input fields or grid columns in the areas covered here. Its reader actions are links for feeds, tags, and page numbers. ## Before you start The Home page changes the links and messages it shows according to the available feed, selected tag, article data, and article count. **Prerequisites** - Open the Home page. - Decide whether you want a feed or a subject tag. - If you need page links, use a result set containing more than 10 articles. > **Note:** Page links appear only when the article count is greater than 10. > | What affects the Home page | What you can see | |---|---| | A token is present | **Your Feed** can appear. | | No tag is selected | The tag filter tab does not appear. | | Tags are unavailable | `Loading Tags...` appears. | | Articles are unavailable | `Loading...` appears. | | The article list is empty | `No articles are here... yet.` appears. | | The article count is 10 or fewer | Page links do not appear. | Use the available choice to open the list you want to read. ## Choose a feed or tag Choose a feed for a set of article results, or choose a tag to narrow the list to that subject. **Prerequisites** - Have the Home page open. **Steps** 1. Choose the list that matches what you want to read. | If you want to… | Select | |---|---| | Read the available feed | **Your Feed**, when it appears | | Read the global article list | **Global Feed** | | Narrow the list to a subject | The displayed tag value | 2. Check the feed or tag area for the selected choice. **Result:** The selected feed or tag choice is active in the feed area. Read the resulting article list or use its pagination links when they appear. ## Read articles and move between pages The article list shows article previews when articles are available. It can instead show a loading message, an empty-list message, or page links when more than 10 articles are available. **Prerequisites** - Have an article list open. - To move to another page, use a result set containing more than 10 articles. | What you see | What it means | What to do | |---|---|---| | Article previews | Articles are available in the selected list. | Read the previews. | | `Loading...` | The article list is loading. | Wait for the list to change. | | `No articles are here... yet.` | The article list is empty. | Choose another feed or tag. | | Page numbers | More than 10 articles are available. | Select the page number you need. | **Steps** 1. Read the article previews in the selected list. 2. Select **Page number** for the result page you need. 3. Check the article list for the results on that page. **Result:** The article list remains open on the selected result page. # View a profile ## About profiles A profile is the page where you view a person's basic information and the articles they authored. Use it when you need to identify an author or review that author's article list. | If you need to… | Go to | |---|---| | Understand how profiles, authored articles, favorited articles, and following fit together | [Profiles overview](doc:profiles-overview) | | Open a profile from an article | [Find a profile](#find-a-profile) | | Review profile information and authored articles | [Review the profile and authored articles](#review-the-profile-and-authored-articles) | | Follow another person | [Follow other users](doc:follow-other-users) | | View articles a person has favorited | [View favorited articles](doc:view-favorited-articles) | | Edit your profile information | [Personalizing your workspace](doc:personalizing-your-workspace) | | Read an article from the profile list | [Read and manage an article](doc:read-and-manage-an-article) | | Favorite an article | [Favorite articles](doc:favorite-articles) | ## Before you start You open a profile for an existing person identified by the username in the profile route. The page uses that username to request the person's profile and authored articles. **Prerequisites** - Have the person's username, or an article author's username link. - Start from an article list when you are using an author link. The profile body appears after the profile data is available. The article list then shows its loading, empty, or article-preview state according to the returned article data. Each article entry is a compact preview with the article's identifying information and links. ## Find a profile An article author's username link takes you to that author's profile, so you do not need to construct the profile route yourself. **Prerequisites** - Have an article preview open with the author's username visible. **Steps** 1. Select the article author's username link in the article metadata. **Result:** The profile page is open, and the application requests the profile and the author's articles using the username in the route. ## Review the profile and authored articles The profile header identifies the person, and the article list below it lets you review that person's authored articles. **Prerequisites** - Have the profile page open. **Steps** 1. Review the profile header. It contains the person's profile image, username, and bio. 2. Review each article preview. It contains the article title, description, author's username, creation date, tags, and favorite count. 3. Choose the article list you need from the tabs: | If you need to… | Select | |---|---| | Review articles the person authored | **My Articles** | | Review articles the person favorited | **Favorited Articles** | 4. If the list contains more than 10 articles, select the page number for the next group of articles. 5. To open an article, select **Read more...** in its article preview. While the articles are loading, the list displays `Loading...`. If the person has no articles in the selected list, it displays `No articles are here... yet.`. The profile page presents profile information and article previews rather than editable profile fields, comments, or full article contents. Use [Personalizing your workspace](doc:personalizing-your-workspace) to edit profile information and [Read and manage an article](doc:read-and-manage-an-article) to work with an article's full contents. **Result:** The selected profile article list is on screen, with its available article previews, loading or empty message, and page controls when the list contains more than 10 articles. # Who uses Conduit Conduit is a social blogging site for people who publish articles, read and discuss them, follow other users, and save articles as favorites. A profile is a user's page with their basic information and article lists. A favorite is an article a user has chosen to save. ## Who uses Conduit Choose the activity that matches what you need to do: | If you need to… | Go to | |---|---| | Sign in or create an account | [Authentication overview](doc:authentication-overview), [Sign in](doc:sign-in), or [Sign up](doc:sign-up) | | Find your way around the application | [Navigation basics](doc:navigation-basics) | | Read or find articles | [Articles overview](doc:articles-overview) or [Find articles](doc:find-articles) | | Follow a profile or browse its articles | [Profiles overview](doc:profiles-overview), [View a profile](doc:view-a-profile), or [Follow other users](doc:follow-other-users) | | Browse articles someone has favorited | [View favorited articles](doc:view-favorited-articles) | | Write or update an article | [Create and edit articles](doc:create-and-edit-articles) | | Manage an article you authored | [Read and manage an article](doc:read-and-manage-an-article) | | Post or remove a comment you authored | [Comment on articles](doc:comment-on-articles) | | Change your profile | [Manage your settings](doc:manage-your-settings) | | Resolve an error or common problem | [General error messages](doc:general-error-messages) or [Common issues and solutions](doc:common-issues-and-solutions) | ## Before you start You need an account to use signed-in activities such as your feed, publishing, commenting, following, and favoriting. Have your **Email**, **Password**, and, when you create an account, **Username** in front of you. **Prerequisites** - To sign in, have your **Email** and **Password** ready. - To create an account, have a **Username**, **Email**, and **Password** ready. - To use signed-in controls, sign in first. Conduit authenticates users with JWT. > **Note:** **Your Feed**, article authoring, commenting, following, and favoriting are signed-in > activities. ## Find the activity you need The header changes according to whether you are signed in. Use the route that matches the activity you want to perform. **Prerequisites** - Know whether you are signing in, creating an account, reading, writing, or changing your profile. **Steps** 1. Choose the activity you need from this table. | If you want to… | Select | |---|---| | Return to the article lists | **Home** | | Enter an existing account | **Sign in** | | Create an account | **Sign up** | | Start a new article | **New Post** | | Change your profile details | **Settings** | | End your session | **Or click here to logout.** | | Open an article from a list | **Read more...** | **Result:** The selected activity opens. ## Read, follow, and favorite articles Readers use feeds and profiles to find articles. A profile contains the author's articles and a separate list of articles that profile has favorited. Following changes whether the profile is followed; favoriting changes whether an article is marked as a favorite. | Where you are | What you can find there | |---|---| | Home page | Tags, article lists from **Your Feed**, **Global Feed**, or a tag, and article-list pagination | | Article page | The article rendered from markdown and its comments section | | Profile page | Basic user information and articles created or favorited by that profile | **Prerequisites** - To use **Your Feed**, sign in. - To follow another profile, open that profile rather than your own profile. - To browse a profile's saved articles, open its **Favorited Articles** tab. **Steps** 1. Choose the activity you need from this table. | If you want to… | Action | |---|---| | Read articles selected for your account | Select **Your Feed**. | | Read the global article list | Select **Global Feed**. | | Open an article | Select **Read more...** on its preview. | | View another user's profile | Open that user's profile. | | Follow another user | Select **Follow** followed by the profile name. | | Favorite an article | Select the button in the article preview that displays the article’s numeric favorite count beside a heart. | | Unfavorite an article | Select the button in the article preview that displays the article’s numeric favorite count beside a heart again. | | View authored articles | Select **My Articles**. | | View favorited articles | Select **Favorited Articles**. | **Result:** The selected feed, article, profile tab, following state, or favorite state appears on screen. ## Write articles and discuss them Authors use the editor to create or update articles. Commenters use the comment form to add a comment to an article; an article or comment author can manage their own content. **Prerequisites** - Sign in before opening the editor or comment form. - For a new article, prepare its title, description, body, and tags. - For a comment, prepare the text you want to post. **Steps** 1. Select **New Post** to open the editor. 2. Enter the article title in **Article Title**. 3. Enter the article description in **What's this article about?**. 4. Enter the article body in **Write your article (in markdown)**. 5. Enter a tag in **Enter tags**. 6. Select **Publish Article** to create the article. 7. Open an article you authored and select **Edit Article** to return to the editor. 8. Select **Publish Article** to update the article. 9. Enter your text in **Write a comment...**. 10. Select **Post Comment** to submit the comment. 11. Select the delete icon beside a comment you authored to remove it. 12. Select **Delete Article** on an article you authored to remove it. **Result:** The article editor, published article, submitted comment, or owned-content action is shown according to the control you selected. ## Handle role-based differences The controls you see depend on whether you are signed in and whether you own the profile, article, or comment you are viewing. | What you are viewing | Controls you use | |---|---| | Your own profile | **Edit Profile Settings**, **My Articles**, and **Favorited Articles** | | Another user's profile | **Follow** or **Unfollow**, **My Articles**, and **Favorited Articles** | | An article you authored | **Edit Article** and **Delete Article** | | An article with a comment you authored | The delete icon beside that comment | | An article while signed out | **Sign in** or **Sign up** to add comments | | Home while signed in | **Your Feed** and **Global Feed** | **Prerequisites** - Compare the profile name with your signed-in profile to determine whether it is your own profile. - Compare the article author with your signed-in profile before using author actions. - Compare the comment author with your signed-in profile before selecting the delete icon beside that comment. **Steps** 1. Open the profile, article, or comment you want to work with. 2. Select the control shown for your role in the table. **Result:** The page presents the controls available for the profile, article, comment, or sign-in state you are using. ## When an action does not complete When an action is unavailable, first check the role and sign-in conditions for that action, then use the matching next step below. | What you see | What to check | Next step | |---|---|---| | **Your Feed** is unavailable | You are signed out | Select **Sign in**, then return to **Home**. | | The comment form is unavailable | You are signed out | Select **Sign in** or **Sign up**. | | Follow controls are unavailable | You opened your own profile | Open another user's profile. | | Profile editing is unavailable | You opened another user's profile | Open your own profile and select **Edit Profile Settings**. | | Article editing or deletion is unavailable | You are not the article author | Open an article you authored. | | Comment deletion is unavailable | You are not the comment author | Use the comment author's profile or leave the comment unchanged. | For broader recovery guidance, open [General error messages](doc:general-error-messages) or [Common issues and solutions](doc:common-issues-and-solutions). # Common issues and solutions ## Common issues and solutions Conduit troubleshooting falls into four reader jobs: starting the local application, connecting it to the API, checking routes, and separating signed-in behavior from signed-out behavior. Choose the check that matches the problem before changing the application. | If you need to… | Go to | |---|---| | Prepare the local installation and connection details | [Before you start](#before-you-start) | | Start the application or change its API endpoint | [Start the application and connect it to the API](#start-the-application-and-connect-it-to-the-api) | | Check which page each route opens | [Check the declared routes](#check-the-declared-routes) | | Compare signed-out and signed-in behavior | [Handle signed-out and signed-in behavior](#handle-signed-out-and-signed-in-behavior) | | Interpret a returned API error | [When a check fails](#when-a-check-fails) | | Continue with an account, navigation, or support task | [What to do next](#what-to-do-next) | ## Before you start Have the local project available and keep the expected connection details in view. The local web server uses port `4100`. The default API root is `https://conduit.productionready.io/api`. | Check | Value or condition | |---|---| | Dependencies | Dependencies are installed. | | Local server | Run `npm start`. | | Local port | `4100` | | API root | `https://conduit.productionready.io/api` | | Authentication branch | A JWT, the browser's authentication token, loads the current user when present; without one, the application loads without a current-user token. | If you are checking authenticated behavior, know whether the browser has a stored JWT before you compare the result with the signed-out path. With these details ready, start the application and connect it to the API. ## Start the application and connect it to the API Start here when the local application is not running or when requests must go to a local API instead of the default API root. **Prerequisites** - The project is available locally. - Dependencies are installed. - You know the API URL that the application must use. **Steps** 1. Open a terminal in the project folder. 2. Enter `npm install` in the terminal. 3. Run `npm start`. 4. Check that the local server uses port `4100`. 5. If requests must use a local API, change the endpoint setting to the local server URL. For example, use `http://localhost:3000/api` as the local API URL. 6. If the browser has a JWT, check requests that require authentication against the signed-in path. Token-bearing requests receive an `authorization` header using that token. **Result:** The local application is started on port `4100`, and its requests use the selected API root. With the application running, check the routes that lead to the surface you need. ## Check the declared routes Open the fixed routes before checking a route that needs an article slug, article identifier, or username. | Surface | How to open it | |---|---| | Home | Open `/`. | | Login | Open `/login`. | | Register | Open `/register`. | | New article editor | Open `/editor`. | | Existing article editor | Open the editor route with an article slug. | | Article | Open the article route with an article identifier. | | Settings | Open `/settings`. | | Profile favorites | Open the profile favorites route with a username. | | Profile | Open the profile route with a username. | **Prerequisites** - The local application is running. - You have an article slug for the existing article editor. - You have an article identifier for the article page. - You have a username for the profile and profile favorites pages. | If you want to check… | Value to enter | |---|---| | An existing article editor | The article slug. | | An article page | The article identifier. | | Profile favorites | The profile username. | | A profile | The profile username. | **Steps** 1. Open the surface you want to check using the matching route or value in the table. 2. Compare the opened surface with its intended surface. **Result:** Each checked path opens its intended application surface, or the route that needs attention is identified. If the surface changes with authentication, compare the signed-out and signed-in branches next. ## Handle signed-out and signed-in behavior The application chooses its current-user loading path from the presence of a JWT in browser local storage. Use the branch that matches the browser state you are checking. | If the browser… | The application… | |---|---| | Has a JWT in local storage | Sets the token and loads the current user. | | Does not have a JWT in local storage | Loads without a current-user token. | When a token is present, requests use it in the authorization header. When no token is present, the token plugin does not set that header. Compare like with like: check the signed-in behavior with a stored JWT and the signed-out behavior without one. If either branch produces an unexpected result, use the checks in the next section. ## When a check fails Compare the application rule with the API text you see. | What you see | What it means | What to check | |---|---|---| | An API error appears as a returned key followed by a returned value | The application displays the returned error key and value. | Read both parts of the displayed message. | | A route does not match one of the listed surfaces | The declared route table has no explicit fallback route. | Check the path spelling and any required `slug`, `id`, or `username`. | | A signed-in request differs from a signed-out request | The browser's JWT state changes current-user loading and request authorization. | Check whether the browser has a JWT, then repeat the comparison using the matching branch. | The exact API error values come from the returned data rather than from a fixed application message. Use the displayed key and value when diagnosing the request. After identifying the issue, continue with the task that matches it. ## What to do next Continue with the task that matches the problem: - For local prerequisites, see [System requirements](doc:system-requirements). - For route and page movement, see [Navigation basics](doc:navigation-basics). - For signing in, see [Sign in](doc:sign-in). - For creating an account, see [Sign up](doc:sign-up). - For account settings, see [Manage your settings](doc:manage-your-settings). - For application error text, see [General error messages](doc:general-error-messages). - For broader support references, see [Getting help](doc:getting-help). # Create and edit articles An article is the content you write or revise in Conduit. Use the editor to create a new article or to change an existing article. A slug identifies an existing article in its route. | If you need to… | Go to | | --- | --- | | Create an article | [Enter and publish an article](#enter-and-publish-an-article) | | Change an existing article | [Handle create and edit variations](#handle-create-and-edit-variations) | | Find an article before opening it | [Find articles](doc:find-articles) | | Read or manage the article after publishing | [Read and manage an article](doc:read-and-manage-an-article) | | Review article terminology | [Basic terminology](doc:basic-terminology) | ## Before you start Have the article information ready before you open the editor. **Prerequisites** | What to have ready | Why it matters | | --- | --- | | The choice between a new article and an existing article | It determines which editor route you open. | | The article slug when changing an existing article | It identifies the article to load. | | The title, description, body text, and tags | They are the values you enter in the editor. | ## Open the editor The editor is the form where you enter or revise an article. **Steps** 1. Choose the route that matches your task: | If you need to… | Open | | --- | --- | | Create a new article | The editor route without a slug | | Edit an existing article | The editor route with the article slug | 2. Open the selected route. **Result:** The editor opens. A new article starts with empty article fields; an existing article loads the article identified by its slug. ## Understand the editor The editor contains four article inputs, a tag area, and one publishing control. | What you enter or use | Control or area | What it does | | --- | --- | --- | | Article title | **Article Title** | Accepts the article title. | | Short description | **What's this article about?** | Accepts the article description. | | Article content | **Write your article (in markdown)** | Accepts the article body in markdown. | | Tags | **Enter tags** | Accepts a tag before you add it to the tag list. | | Existing tags | Tag text and its close icon | Displays the tags already added and lets you remove one. | | Submit the article | **Publish Article** | Sends a new article or an edit. | The editor does not show separate field labels or required markers. It uses the text inside the inputs to identify them. No separate save or update control is used. ## Enter and publish an article Use this procedure for both a new article and an existing article. The route you opened determines whether **Publish Article** creates an article or updates the article identified by the route slug. **Prerequisites** - The editor is open. - You have the title, description, body, and tags for the article. **Steps** 1. In **Article Title**, enter the article title. 2. In **What's this article about?**, enter the article description. 3. In **Write your article (in markdown)**, enter the article body. 4. In **Enter tags**, enter a tag. 5. Press Enter to add the tag to the tag list. 6. Repeat the tag entry and Enter action for each tag you want to add. 7. For a tag you want to remove, select its close icon. 8. Select **Publish Article**. **Result:** The article submission is made. A new article uses the create path; an existing article uses the update path. ## Handle create and edit variations The editor uses the same fields and **Publish Article** control for both tasks; the route decides which article operation is submitted. **Prerequisites** - The editor is open. **Steps** 1. Choose the submission path that matches the article: | If you opened… | **Publish Article** submits… | | --- | --- | | The editor route without a slug | A new article. | | The editor route with the article slug | An update for the article identified by that slug. | 2. Select **Publish Article**. **Result:** The editor submits the create or update operation selected by the route. ## When submission goes wrong Returned validation or API errors appear in the editor's error list. The list shows the returned field name and value. The submission error message is: > No fixed message is declared. The shared error list renders each returned error as ` `. | What you see | What it means | What to do | | --- | --- | --- | | A returned field name and value in the error list | The submission has a validation or API problem associated with that field. | Correct the information named by the returned entry, then select **Publish Article** again. | No fixed success-confirmation message appears after submission. Use the resulting article route as the next place to continue. ## After publishing After submission, the application redirects to the article route for the submitted article. Open [Read and manage an article](doc:read-and-manage-an-article) to continue with that article. Use [Find articles](doc:find-articles) when you need to locate an article from the article lists. For the wider article workflow, open [Articles overview](doc:articles-overview). **Result:** The article route is the next destination after submission. # Follow other users Following is a relationship between your profile and another user's profile. A profile is the page for a person's basic information and article views. ## Follow another user Use following when you want to follow that person's profile from the profile screen. | If you need to… | Go to | | --- | --- | | Understand profiles and their related views | [Profiles overview](doc:profiles-overview) | | View a person's profile | [View a profile](doc:view-a-profile) | | Follow or stop following a person | [Follow or unfollow the profile owner](#follow-or-unfollow-the-profile-owner) | | View the person's favorited articles | [View favorited articles](doc:view-favorited-articles) | ## Before you start Following is available from another person's profile rather than from your own profile. **Prerequisites** | Before you begin | What you need | | --- | --- | | Sign-in | A signed-in session | | Profile | The profile of the person you want to follow or stop following | ## Find a profile **Steps** 1. Open the person's profile. **Result:** The person's profile opens. ## Understand the profile screen The profile screen places the relationship control beside the person's profile information. It changes its wording according to whether you already follow that person. | Profile situation | Control shown | | --- | --- | | You already follow the person | **Unfollow** followed by the profile username | | You do not follow the person | **Follow** followed by the profile username | | You opened your own profile | No relationship control | The profile screen does not use a follow input, selector, or confirmation dialog. The control directly performs the relationship action. ## Follow or unfollow the profile owner Use this procedure to change the relationship shown on the profile. **Prerequisites** - You have opened another person's profile. - You can see the relationship control beside the profile information. **Steps** 1. Select the control that matches the relationship you want to set. | If the profile shows… | Select… | | --- | --- | | You do not follow the person | **Follow** | | You already follow the person | **Unfollow** | 2. Check the profile information. **Result:** The profile uses the profile returned by the selected relationship action. ## What to do next After changing the relationship, continue with the person's profile information or article views. Use [View a profile](doc:view-a-profile) for general profile viewing and [View favorited articles](doc:view-favorited-articles) for the person's favorited articles. For the wider profile feature, use [Profiles overview](doc:profiles-overview). # Navigation basics Conduit is a social blogging site. You can open Home, sign in or create an account, manage settings, create or edit articles, read an article, or open a profile from the routes provided by the application. | If you need to… | Go to | | --- | --- | | Choose an article list or tag | [Understanding the interface](doc:understanding-the-interface) | | Access an existing account | [Sign in](doc:sign-in) | | Create an account | [Sign up](doc:sign-up) | | Create or edit an article | [Create and edit articles](doc:create-and-edit-articles) | | Find an article | [Find articles](doc:find-articles) | | Work with profiles | [Profiles overview](doc:profiles-overview) | | Resolve a general error | [General error messages](doc:general-error-messages) | ## Before you start **Prerequisites** | Have or know | Why it matters | | --- | --- | | The page or task you want to open | The application provides separate routes for Home, authentication, the editor, articles, settings, and profiles. | | Whether you are signed in | The header shows different links for signed-out and signed-in sessions, and Home chooses different article sources. | | The article slug when opening an existing editor | The existing article's editor uses a route with a slug; the route without a slug opens the new-article form. | ## Find a destination A destination is the page that matches the work you want to do. Use the header when its link is available, or open the route listed for the page. **Steps** 1. Choose one destination from the table. | If you need to… | Use the link or route | | --- | --- | | Return to the start page | Select **Home**, or open `/`. | | Enter an existing account | Select **Sign in**, or open `/login`. | | Create an account | Select **Sign up**, or open `/register`. | | Start a new article | Select **New Post**, or open `/editor`. | | Change account settings | Select **Settings**, or open `/settings`. | | Read one article | Open the article page. | | View a profile | Open the profile page. | | View a profile's saved favorites | Open the profile page's favorite-articles view. | **Result:** You have selected the destination. ## Recognize Home navigation Home is the starting page for choosing an article list: it contains feed choices and a Popular Tags area. **Steps** 1. Open Home at `/`. 2. Select one Home choice. | If you need to… | Select | | --- | --- | | Read the global article list | **Global Feed** | | Read articles from accounts you follow, when available | **Your Feed** | | Filter the article list by a tag | A tag in **Popular Tags** | **Result:** You have selected the feed or tag choice. If you need account access, continue to the authentication page. ## Open an authentication page An authentication page is where you enter account details for Sign in or Sign up. **Steps** 1. Select the page you need. | If you need to… | Select | | --- | --- | | Use an existing account | **Sign in**. | | Create an account | **Sign up**. | 2. In the selected form, enter the requested values. | Page | Fields | | --- | --- | | Sign in | **Email** and **Password** | | Sign up | **Username**, **Email**, and **Password** | 3. Select **Sign in** on the existing-account form or **Sign up** on the new-account form. **Result:** You have submitted the selected authentication form. ## Open the article editor The article editor is the page for entering an article title, description, body, and tags before publishing. **Steps** 1. Open `/editor` to start a new article. 2. Open the existing article's editor. 3. Enter the article name in **Article Title**. 4. Enter the article description in **What's this article about?**. 5. Enter the article text in **Write your article (in markdown)**. 6. Enter a tag in **Enter tags**. 7. Select **Publish Article**. **Result:** You have entered the article values and selected **Publish Article**. ## Choose the available navigation branch The available navigation depends on whether the current session is signed in and whether the route includes the value needed to open an existing article editor. **Steps** 1. Check the header for the available session branch. | If the header shows… | Use this branch | | --- | --- | | **Sign in** and **Sign up** | Signed-out links | | **New Post**, **Settings**, and a profile link | Signed-in links | 2. On Home, choose the available article-list branch. | If… | Select | | --- | --- | | The follow-based list is available | **Your Feed**. | | The follow-based list is not available | **Global Feed**. | | A tag is available in **Popular Tags** | The tag. | 3. Choose an editor destination. | If you need to… | Choose | | --- | --- | | Start a new article | The new-article editor | | Change an existing article | The existing article's editor | **Result:** You have chosen the route and navigation choice that matches the session and the work you are starting. ## If the page does not open The application displays server-provided error values through an error list on the Sign in and Sign up pages. **Steps** 1. Read the values shown in the error list. 2. Correct the value in **Email**, **Password**, or **Username**, as applicable. 3. Select **Sign in** on the existing-account form or **Sign up** on the new-account form. **Result:** You have submitted the selected authentication form. ## Continue from the destination After navigation, continue with the page that owns the work you want to complete. | You opened… | Continue with… | | --- | --- | | Home and need to choose or filter articles | [Understanding the interface](doc:understanding-the-interface) or [Find articles](doc:find-articles) | | An existing-account form | [Sign in](doc:sign-in) | | A new-account form | [Sign up](doc:sign-up) | | The article editor | [Create and edit articles](doc:create-and-edit-articles) | | A profile | [Profiles overview](doc:profiles-overview) | | Settings | [Personalizing your workspace](doc:personalizing-your-workspace) | **Result:** You have identified the page for the next task. # Sign up ## What sign-up does Sign-up creates a Conduit user account as part of JWT authentication, which uses a returned token for authenticated requests. Enter the account information in the sign-up form and submit it for registration. | If you need to… | Go to | | --- | --- | | Understand how sign-in, sign-up, and account settings fit together | [Authentication overview](doc:authentication-overview) | | Create an account | [Before you start](#before-you-start) | | Sign in to an existing account | [Sign in](doc:sign-in) | | Update account details or log out | [Manage your settings](doc:manage-your-settings) | ## Before you start Have the information for these three account fields ready: | Information | Where you enter it | | --- | --- | | A username | **Username** | | An email address | **Email** | | A password | **Password** | The form does not specify client-side required-field, pattern, minimum-length, or maximum-length rules for these inputs. No additional configuration-driven field is part of the sign-up form. ## Open the sign-up page Use this procedure to reach the account-creation form. **Prerequisites** - You know whether you are creating a new account or using an existing one. **Steps** 1. Open `/register`. **Result:** The sign-up page opens with the account-creation form. ## Understand the sign-up screen The sign-up screen is the form where you enter the account identity and password before sending the registration request. | What you see | Use it for | | --- | --- | | `Sign Up` | Identify the account-creation page. | | **Username** | Enter the username for the account. | | **Email** | Enter the account email address. | | **Password** | Enter the account password. | | **Sign up** | Send the registration request. | Returned registration errors appear above the form. The **Have an account?** link opens the existing-account route. ## Create the account Use this procedure to send the three account values for registration. **Prerequisites** - Have a username, email address, and password ready. **Steps** 1. In **Username**, enter the account username. 2. In **Email**, enter the account email address. 3. In **Password**, enter the account password. 4. Select **Sign up**. While the registration request is in progress, **Sign up** is disabled. **Result:** The username, email address, and password are sent in the registration request. ## Use the existing-account route Use this alternative when you already have an account and need the sign-in page instead of creating another account. **Prerequisites** - You already have an account. **Steps** 1. Select **Have an account?**. **Result:** The login route opens. ## Handle registration errors Use this procedure when a registration response contains error entries. **Prerequisites** - A registration attempt has returned an error. **Steps** 1. Read the error entries above the form. 2. Read each returned error entry's key followed by its error text. | What appears | What to do | | --- | --- | | An error entry | Read its key followed by its error text. | Each returned error entry provides its response-specific wording. **Result:** The returned registration error details are visible above the form. ## Know what happens next After successful authentication, the returned token is stored and passed to the API client for authenticated requests. When you leave the registration page, the current authentication information is cleared. **Result:** The authenticated session uses the returned token for subsequent API requests. # What can you do with Conduit Conduit is a social blogging site where you can browse articles, publish and manage your own articles, comment on articles, follow other users, and favorite articles. ## What you can do with Conduit Use Conduit according to the work you need to complete: | If you need to… | Go to | |---|---| | Understand what Conduit is | [What is Conduit](doc:what-is-conduit) | | Understand who uses Conduit | [Who uses Conduit](doc:who-uses-conduit) | | Sign in or create access | [Your first day](doc:your-first-day), [Sign in](doc:sign-in), or [Sign up](doc:sign-up) | | Browse articles and tags | [Find articles](doc:find-articles) | | Create or change an article | [Create and edit articles](doc:create-and-edit-articles) | | Read or manage one article | [Read and manage an article](doc:read-and-manage-an-article) | | Favorite an article | [Favorite articles](doc:favorite-articles) | | Add a comment | [Comment on articles](doc:comment-on-articles) | | View or update a profile | [Profiles overview](doc:profiles-overview), [View a profile](doc:view-a-profile), or [Personalizing your workspace](doc:personalizing-your-workspace) | | Follow another user | [Follow other users](doc:follow-other-users) | | View a user's favorites | [View favorited articles](doc:view-favorited-articles) | | Find your way around the application | [Understanding the interface](doc:understanding-the-interface) or [Navigation basics](doc:navigation-basics) | | Resolve a problem | [General error messages](doc:general-error-messages) or [Common issues and solutions](doc:common-issues-and-solutions) | The main areas are Home, the editor, an article, a profile, and a profile's favorites list. A profile is a user's public information and article lists. The header provides links for the areas available to you. The Home screen provides article feeds and popular tags, while a profile separates a user's articles from that user's favorited articles. ## Before you start **Prerequisites** | Before you need to… | Have this in place | |---|---| | Open Your Feed | Sign in so the feed is available. | | Use the signed-out Home view | Open Home without a sign-in token. | | Create or change an article | Open the editor for a new article or an article you own. | | Edit or delete an article | Be the article's author. | | Edit your profile | Open your own profile; the profile action leads to Settings. | | Follow or unfollow a user | Open another user's profile. | | View favorited articles | Open the profile's favorites route. | | Add a comment | Open the article and have the comment text ready. | The editor collects the article title, description, body, and tags. The comment form collects the comment body. No required markers are declared for these fields. ## Find the right starting point Use this procedure when you know what you want to do but have not yet opened the relevant area. **Prerequisites** - Decide whether you are browsing, writing, reading, commenting, managing a profile, or viewing favorites. **Steps** 1. From the header or current page, select the control that matches your goal. | If you want to… | Select | |---|---| | Return to the article lists | **Home** | | Start a new article | **New Post** | | Change your profile | **Settings** | | Open your own profile | The username and profile picture link in the header | | Sign in | **Sign in** | | Create access | **Sign up** | | Browse a signed-in personal list | **Your Feed** | | Browse the general article list | **Global Feed** | | Filter by a popular tag | A tag under **Popular Tags** | 2. On a profile, select **My Articles** or **Favorited Articles** according to the list you need. **Result:** The selected Home view, editor, profile, article list, or favorites list is on screen. ## Create and change articles An article is a post whose title, description, body, and tags you provide for other people to read. Use this procedure to create a new article or change an article you own. **Prerequisites** - Sign in before selecting **New Post**. - Open an article you own before selecting **Edit Article**. **Steps** 1. Select **New Post** to create an article, or select **Edit Article** on an article you own. 2. In **Article Title**, enter the article title. 3. In **What's this article about?**, enter the article description. 4. In **Write your article (in markdown)**, enter the article body. 5. In **Enter tags**, enter a tag. 6. Press Enter to add the tag to the article. 7. Select **Publish Article**. 8. To remove a tag before publishing, select the close icon beside that tag. 9. To remove an article you own, select **Delete Article**. **Result:** The article is submitted with its title, description, body, and tag list, or the article is removed when you select **Delete Article**. ## Read and interact with articles An article list is a set of article previews that you can browse by feed, tag, or page; an article page contains the selected article and its comments. Use this procedure to choose a list, open an article, comment, and reach a user's favorites. **Prerequisites** - Open Home to choose a feed, tag, or page. - Open an article before posting a comment. **Steps** 1. Select the article list that answers your browsing question. | If you need to… | Select | |---|---| | Read articles from users you follow | **Your Feed** | | Read the general article list | **Global Feed** | | Read articles for one tag | The tag under **Popular Tags** | | Read another page of results | A page number below the article list | 2. Select an article preview to open the article page. 3. In **Write a comment...**, enter the comment text. 4. Select **Post Comment**. 5. On a profile, select **Favorited Articles** to open that user's favorited article list. The article preview also has a favorite toggle represented by an icon rather than a stable reader-facing label. **Result:** The selected article list or article is on screen, the comment is submitted, or the profile's favorited article list is on screen. ## Manage profiles and following Use your own profile for profile settings, and another user's profile when you want to follow or unfollow that person. **Prerequisites** - Open a profile from the header or an article author link. - Open another user's profile before following or unfollowing that user. **Steps** 1. In the header, select your username and profile picture link to open your profile. 2. Select **Edit Profile Settings** when the profile belongs to you. 3. On another user's profile, select the control for the action you want to take. | If you want to… | Select | |---|---| | Start following the user | **Follow** followed by the profile username | | Stop following the user | **Unfollow** followed by the profile username | 4. Select **My Articles** or **Favorited Articles** to choose the profile's article list. **Result:** The profile, Settings, selected article list, or updated follow state is on screen. ## When something goes wrong Conduit displays API or validation errors as a list of dynamic entries. Each entry combines the error key with the corresponding error value. No literal message text; each rendered item is the dynamic key followed by `errors[key]`. | What you see | What it means | What to do | |---|---|---| | A list of error entries | An API or validation error was returned for the current action. | Read the key and value shown in the list, correct the related article or comment input, and submit the action again. | | No stable label for the favorite toggle | The favorite control is represented by an icon. | Use the article preview's favorite icon rather than a text label. | ## Know what to do next Choose the focused page that matches the next action: | Next goal | Page | |---|---| | Learn the product's purpose or vocabulary | [What is Conduit](doc:what-is-conduit) or [Basic terminology](doc:basic-terminology) | | Set up access | [Authentication overview](doc:authentication-overview), [Sign in](doc:sign-in), or [Sign up](doc:sign-up) | | Work with articles | [Articles overview](doc:articles-overview), [Find articles](doc:find-articles), [Create and edit articles](doc:create-and-edit-articles), or [Read and manage an article](doc:read-and-manage-an-article) | | Work with comments or favorites | [Comment on articles](doc:comment-on-articles) or [Favorite articles](doc:favorite-articles) | | Work with profiles | [Profiles overview](doc:profiles-overview), [View a profile](doc:view-a-profile), [Follow other users](doc:follow-other-users), or [View favorited articles](doc:view-favorited-articles) | | Learn navigation or settings | [Navigation basics](doc:navigation-basics) or [Personalizing your workspace](doc:personalizing-your-workspace) | | Resolve a problem or get help | [General error messages](doc:general-error-messages), [Common issues and solutions](doc:common-issues-and-solutions), or [Getting help](doc:getting-help) | # Manage your settings ## Manage your account settings Settings is the signed-in account page for reviewing and updating your profile details. Conduit places account updates and logout on this page; account creation belongs to the sign-up page. | If you need to… | Go to | |---|---| | Prepare to use account settings | [Before you start](#before-you-start) | | Open the account settings page | [Open Settings](#open-settings) | | Identify the profile fields and controls | [Understand the Settings screen](#understand-the-settings-screen) | | Change your profile details | [Update your account details](#update-your-account-details) | | End your signed-in session | [Log out from Settings](#log-out-from-settings) | | Handle an empty password or returned error | [Handle settings branches and errors](#handle-settings-branches-and-errors) | | Sign in | [Sign in](doc:sign-in) | | Create an account | [Sign up](doc:sign-up) | | Personalize profile details | [Personalizing your workspace](doc:personalizing-your-workspace) | | Follow the broader first-day path | [Your first day](doc:your-first-day) | ## Before you start Settings works with the profile values belonging to the signed-in account. The page receives those values when the current account is available, so sign in before opening Settings and have the details you want to review or change ready. **Prerequisites** - Be signed in. - Have the profile details you want to review or change ready. - Know whether you want to change the profile picture URL, username, short bio, email, or password. ## Open Settings The Settings route is `/settings`, and a signed-in header contains the **Settings** link. **Prerequisites** - Be signed in. **Steps** 1. Select **Settings** in the application header. **Result:** The application opens `/settings`. ## Understand the Settings screen The Settings screen contains five profile fields, an update control, an error area, and a logout control. | Field | Type | Use it to… | |---|---|---| | **URL of profile picture** | Text input | Enter the address of the profile picture. | | **Username** | Text input | Enter the account username. | | **Short bio about you** | Text area with eight rows | Enter a short profile description. | | **Email** | Email input | Enter the account email address. | | **New Password** | Password input | Enter a replacement password. | The form also contains **Update Settings** and **Or click here to logout.**. Returned settings errors appear in the error area above the form. While an update is in progress, **Update Settings** is disabled. ## Update your account details Use this procedure to change one or more profile details on the Settings page. **Prerequisites** - Be on `/settings`. - Have the values you want to enter ready. **Steps** 1. Enter the value you want to change: | If you want to change… | Enter it in… | |---|---| | Your profile-picture address | **URL of profile picture** | | Your account name | **Username** | | Your profile description | **Short bio about you** | | Your account email address | **Email** | | Your replacement password | **New Password** | 2. Select **Update Settings**. If **New Password** is empty, the update omits the password. The form sends the values to save your account details. **Result:** **Update Settings** submits your changed account details. ## Log out from Settings The logout control ends the signed-in account session from the Settings page. **Prerequisites** - Be on the Settings page. **Steps** 1. Select **Or click here to logout.**. **Result:** The signed-in session ends. ## Handle settings branches and errors The form handles two cases: an empty **New Password** is omitted from the submitted update, and **Update Settings** is disabled while the update is in progress. **Prerequisites** - Be on the Settings page. **Steps** 1. Choose the case that matches what you see: | If you see… | Do this | |---|---| | **Update Settings** is disabled | Wait for the current update to finish before selecting it again. | | You want to keep the current password | Leave **New Password** empty, then select **Update Settings**. | | A returned error appears above the form | Read the returned key and value, correct the related field, and select **Update Settings** again. | Each returned error appears as its key followed by its value. “No fixed message; each rendered item is `key` followed by `errors[key]`.” **Result:** The form responds to the in-progress update, empty password, or returned error. ## After Settings After you select **Update Settings** or **Or click here to logout.**, use [Sign in](doc:sign-in) to start a signed-in session or [Sign up](doc:sign-up) to create an account when either task applies. **Result:** You know where to continue for sign-in or account creation. # Personalizing your workspace ## Personalizing your workspace Your settings page is where you review and update your personal profile details. It contains fields for your profile picture URL, username, short bio, email, and a new password. | If you need to… | Go to | |---|---| | Open the settings page | [Open your settings](#open-your-settings) | | Check which profile values you can change | [Review your profile fields](#review-your-profile-fields) | | Submit changed profile values | [Update your profile settings](#update-your-profile-settings) | | Understand a successful or failed save | [Handle the save outcomes](#handle-the-save-outcomes) | | Read a returned error | [When the update does not go through](#when-the-update-does-not-go-through) | | Find broader settings guidance | [Manage your settings](./manage-your-settings) | | Find general error-message guidance | [General error messages](./general-error-messages) | ## Before you start The settings page works with the signed-in user's profile values. The current user is the signed-in user whose profile values appear in the form. Have the values you want to review or change ready before you begin. **Prerequisites** - Be signed in so the page can receive the current user's profile values. - Know whether you want to change the profile picture URL, username, short bio, email, or password. - Open the settings route at `/settings`. ## Open your settings The settings page is the personal profile surface at `/settings`, separate from article and profile routes. **Prerequisites** - Be signed in. **Steps** 1. Open `/settings` in the application. **Result:** The settings page opens with the heading Your Settings, the profile fields, the **Update Settings** button, and the **Or click here to logout.** button. ## Review your profile fields Use the table below to identify each input before changing it. | Field | Type | What appears initially | |---|---|---| | **URL of profile picture** | Text input | The current profile-picture URL, or an empty value when no image is present | | **Username** | Text input | The current username | | **Short bio about you** | Text area with eight rows | The current bio | | **Email** | Email input | The current email | | **New Password** | Password input | An empty value | The first four fields receive values from the current user when the form loads or when a new current user is received. The profile-picture field uses an empty value when the current user has no image. None of the five fields has a required marker in the form. ## Update your profile settings Use this procedure when you want to change one or more personal profile values. **Prerequisites** - Be on `/settings`. - Know the values you want to enter. **Steps** 1. Enter the new value in the field you want to change: | If you want to change… | Enter the new value in… | |---|---| | Your profile-picture URL | **URL of profile picture** | | Your username | **Username** | | Your short description | **Short bio about you** | | Your email address | **Email** | | Your password | **New Password** | 2. Select **Update Settings**. If you leave **New Password** empty, the submitted update leaves the password out. The settings request sends the values to the user update endpoint. **Result:** The application processes the settings update. ## Handle the save outcomes The save outcome tells you whether the application accepted the profile update or returned errors. | What happens | What you see next | |---|---| | The update is in progress | **Update Settings** is disabled while processing | | The update succeeds | The current user is replaced and the application redirects to `/` | | The update fails | The settings errors are stored and the redirect target remains empty | | Errors are available | The error area lists each returned error key and value | **Result:** A successful update takes you to `/`; a failed update keeps the settings page available for correction. ## When the update does not go through Returned settings errors appear above the form in the error area. Each item combines the returned error key and value, so use the text shown there to decide what to correct before selecting **Update Settings** again. | What you see | What to do | |---|---| | A returned error item above the form | Read the key and value, correct the related profile field, and select **Update Settings** again | | No returned error item | Continue with the result shown after the update | ## After updating your settings After a successful update, the application replaces the current user and redirects to `/`. If you want to leave the settings page without submitting another change, select **Or click here to logout.** **Prerequisites** - Be on the settings page. **Steps** 1. Select **Or click here to logout.** **Result:** The application clears the current user and redirects to `/`. # Read and manage an article An article is a published post in Conduit's social blogging application. A comment is text attached to an article so readers can respond to its content. Use the article page to read the post, review its tags and comments, and manage the post when you are its author. The page renders the article body as markdown, places comments at the bottom, and shows actions to the author. | If you need to… | Go to | | --- | --- | | Open and read an existing article | [Find and open the article](#find-and-open-the-article) | | Locate the title, body, tags, author, or comments | [Understand the article page](#understand-the-article-page) | | Edit or delete an article you authored | [Manage an article you authored](#manage-an-article-you-authored) | | Add or manage comments | [Work with comments](#work-with-comments) or [Comment on articles](doc:comment-on-articles) | | Continue editing an article | [Create and edit articles](doc:create-and-edit-articles) | ## Before you start The article page needs an article record before it can display the article content. Your relationship to the article and your sign-in state determine which controls appear. | Before you start | What to have ready | | --- | --- | | Article record | The article route and its article identifier | | Article authorship | Sign in with the account that authored the article to manage it | | Commenting | Sign in to enter and post a comment | | Signed-out reading | Use the **Sign in** or **sign up** link when you want to add comments | ## Find and open the article An article route opens one existing article record for reading and any available author or comment actions. **Prerequisites** - Know the article identifier for the article you want to open. **Steps** 1. Open the article from the article list. **Result:** The article record opens at the article route. ## Understand the article page The article page is the reading surface for the post and its related author and comment content. The page contains these areas: | Area | What you use it for | | --- | --- | | Article title | Identify the post you opened | | Article body | Read the post content rendered from markdown | | Author information | Identify the article author and the author's date information | | Tags | Review the tags attached to the article | | Comments area | Read the comments associated with the article | The article body is converted to HTML with sanitization enabled before it is inserted into the page. Tags are displayed from the article's tag list, and each comment comes from the article's comments collection. ## Manage an article you authored Article management is the set of actions available to the account whose username matches the article author's username. **Prerequisites** - Open the article you authored. - Sign in with the account that authored the article. **Steps** 1. Select **Edit Article** to open the article in the editor. 2. Select **Delete Article** to send the article deletion request. **Result:** The article page shows **Edit Article** and **Delete Article** for the article's author. Another signed-in account does not receive these controls. ## Work with comments Signed-in readers can enter and post comments; the comment author can use the comment delete icon beside that comment in the comment's row. **Prerequisites** - Open the article whose comments you want to read or manage. - Use the account state that matches the action you want to take. **Steps** 1. Choose the branch that matches your account: | If you need to… | Action | | --- | --- | | Add a comment while signed in | Enter the comment in **Write a comment...** | | Start signing in before commenting | Select **Sign in** | | Create an account before commenting | Select **sign up** | | Read comments while signed out | Review the comments shown below the sign-in prompt | 2. Select **Post Comment** after entering the comment in **Write a comment...**. 3. For a comment you authored, select the comment delete icon beside that comment. **Result:** The comment form clears its comment body after submission. The page lists comments from the article's comments collection, and a delete icon appears at the end of a comment row when the current account is that comment's author. ## Continue from the article When you need to change the article rather than read it, continue with [Create and edit articles](doc:create-and-edit-articles). For the complete comment workflow, continue with [Comment on articles](doc:comment-on-articles). # System requirements Prepare Conduit for local development, start its development server, and adjust the local port or API address when needed. The project uses Create React App. Use these steps for local work; handle deployment separately. ## System requirements Choose the local task you need to complete. | If you need to… | Go to | |---|---| | Prepare the project before starting it | [Before you start](#before-you-start) | | Start the local development server | [Run the application locally](#run-the-application-locally) | | Change the local port or API address | [Configure local runtime settings](#configure-local-runtime-settings) | | Review setup problems | [When local setup does not work](#when-local-setup-does-not-work) | | Create a production bundle | [Next steps](#next-steps) | | Find related application references | [Getting help](doc:getting-help) | ## Before you start Have a local copy of the repository before you run the setup commands. Use `npm install` to install dependencies and `npm start` to start the local server. | Have or know | Why it matters | |---|---| | A local copy of the repository | The setup commands run from the project. | | The `npm install` command | It installs the project's required dependencies. | | The `npm start` command | It starts the local development server. | When these items are ready, continue to [Run the application locally](#run-the-application-locally). ## Run the application locally Use this procedure when you want to start the Conduit development server on your computer. **Prerequisites** - You have a local copy of the repository. **Steps** 1. Open a terminal in the project folder. 2. Enter `npm install` in the terminal and press Enter. 3. Run `npm start`. The start command uses port `4100` rather than React's standard port `3000`. **Result:** The local development server starts on port `4100`. To change the port or API address, continue to [Configure local runtime settings](#configure-local-runtime-settings). ## Configure local runtime settings Use the local settings when the default port or API address does not match your setup. **Prerequisites** - You have a local copy of the repository. **Steps** 1. Choose the setting you need: | If you need to… | Change… | |---|---| | Use a different local web-server port | Set `PORT` in a root `.env` file. | | Use a different API server | Change the API URL in the project configuration file. | The API server is `https://conduit.productionready.io/api`. **Result:** The local configuration contains the port or API address you selected. If startup still does not work, review [When local setup does not work](#when-local-setup-does-not-work). ## When local setup does not work Local setup has three relevant areas: dependencies, the local server, and the API connection. | Area | Relevant setting | |---|---| | Dependencies | `npm install` installs dependencies. | | Local server | `npm start` starts the local server. | | API connection | The API address is in the project configuration file. | After reviewing the relevant setting, return to [Run the application locally](#run-the-application-locally). ## Next steps After local setup, create a production bundle with `npm run build`. For the API specification and other related application references, continue to [Getting help](doc:getting-help). # View favorited articles ## View favorited articles A profile's favorited-articles list is the collection of articles that profile has marked as favorites. Use it when you want to review articles that profile has favorited. | If you need to… | Go to | |---|---| | Understand the profile area before opening a list | [Profiles overview](doc:profiles-overview) | | Review the profile header and its article tabs | [View a profile](doc:view-a-profile) | | See the articles this profile has favorited | View the profile's favorites on this page | | Follow the profile | [Follow other users](doc:follow-other-users) | | Open an article from the list | [Read and manage an article](doc:read-and-manage-an-article) | ## Before you start You need the profile username that identifies the profile whose favorited articles you want to view. The favorites route uses that username to load both the profile and its favorited articles. **Prerequisites** - Have access to the selected profile's favorited-articles list. ## Find the profile's favorites The profile article tabs let you move between the profile's authored articles and the articles the profile has favorited. **Prerequisites** - Know the profile username. **Steps** 1. Open the selected profile's favorited-articles list. 2. Choose the profile list you need: | If you want to… | Select | |---|---| | View articles authored by the profile | **My Articles** | | View articles favorited by the profile | **Favorited Articles** | The favorites view marks **Favorited Articles** as the active tab. **Result:** The selected profile article list is on screen. **Favorited Articles** is active for the favorites list, and **My Articles** is active for the authored-article list. ## Understand the screen The favorites screen combines the profile header with the profile's article list. The header contains the profile image, username, and biography. Each article preview can contain the author's image and username, the article date, title, description, tags, and its favorites count. The article list changes according to the information available: | What you see | What it means | |---|---| | A profile header and article previews | Profile and article information is available. | | `Loading...` in the article list | Article data is not available yet. | | `No articles are here... yet.` in the article list | The article list is empty. | | Page-number links | More than 10 articles are available. | The article preview provides several ways to continue. Select the article title or **Read more...** to open the article. Select the author's username or image to open that author's profile. The favorites count is displayed inside the article's favorite button. When more than 10 articles are available, page-number links appear below the previews. ## View and page through the list Use this procedure to review the articles returned for the selected profile and request another page when the list contains more than 10 articles. **Prerequisites** - Open the profile's favorites route. - Confirm that **Favorited Articles** is the active profile tab. **Steps** 1. Review each article preview for its author, date, title, description, tags, and favorites count. 2. Select a page number when page-number links appear. The list requests that page through the favorites list and displays the returned article previews. **Result:** The selected page of the profile's favorited articles is displayed. ## Handle different list conditions The controls around the profile and each article depend on whose profile you opened, the profile's follow state, the article's favorite state, and the number of returned articles. **Prerequisites** - Open the profile favorites route. **Steps** 1. Use the control that matches what you see: | What you see | What to do | |---|---| | Your own profile | Select **Edit Profile Settings** to open profile settings. | | Another profile that you do not follow | Select **Follow** followed by the profile username. | | Another profile that you already follow | Select **Unfollow** followed by the profile username. | | An article that is already a favorite | Select its favorite button to remove the article from favorites. | | An article that is not already a favorite | Select its favorite button to add the article to favorites. | | More than 10 articles | Use the page-number links to request another page. | | 10 or fewer articles | Continue reviewing the single displayed list. | **Result:** The profile or article control that matches the current state is available, and the list uses pagination only when more than 10 articles are available. ## When the list is empty or still loading The list uses two messages to distinguish waiting for articles from an empty result: | What you see | What to do | |---|---| | `Loading...` | Wait for the article list to finish loading. | | `No articles are here... yet.` | Use the profile tabs to choose **My Articles**. | The profile area appears when profile data is available. Error messages from sign-in, registration, settings, and article-editing pages do not appear on this favorites list. ## Choose what to open next After reviewing the list, choose the destination that matches your next task: | If you want to… | Select | |---|---| | Read an article | The article title or **Read more...** | | Review the article author's profile | The author's image or username | | Review the profile's authored articles | **My Articles** | | Continue through the favorites list | A page-number link | | Learn how profile lists fit together | [Profiles overview](doc:profiles-overview) | | Change an article's favorite state | [Favorite articles](doc:favorite-articles) | | Continue working with the selected article | [Read and manage an article](doc:read-and-manage-an-article) | # Basic terminology ## What these terms mean Conduit is a social blogging site. Use it to publish articles, read article lists, comment on articles, favorite articles, and follow other people. The main terms fit together as follows: | Term | What it means here | |---|---| | Home | The starting area for article feeds, tags, and article lists. | | Article | A published post that readers can read and discuss. | | Comment | A response added to an article. | | Profile | A person's basic information and their article lists. | | If you need to… | Go to | |---|---| | Choose an article feed or tag | [Use home-feed terms](#use-home-feed-terms) | | Find an article and understand its comment area | [Read an article and its comments](#read-an-article-and-its-comments) | | See another person's articles or follow them | [View a profile](#view-a-profile) | | Find your way around the application | [Navigation basics](doc:navigation-basics) | | Understand the home page areas | [Understanding the interface](doc:understanding-the-interface) | | Sign in | [Sign in](doc:sign-in) | | Create an account | [Sign up](doc:sign-up) | | Add or manage a comment | [Comment on articles](doc:comment-on-articles) | | Understand profiles | [Profiles overview](doc:profiles-overview) | | Follow another person | [Follow other users](doc:follow-other-users) | ## Before you start The route you open and whether you are signed in determine which area and actions you see. The home area loads the general article list when you are signed out and the personal feed when you are signed in. | Before you start | Use | |---|---| | You are signed out and want to browse | `/` | | You are signed in and want your personal feed | `/` | | You want to open an article | Open an article from an article list; see [Read an article and its comments](#read-an-article-and-its-comments). | | You want to open a profile | Open a profile from a profile link; see [View a profile](#view-a-profile). | ## Find the area you need Use the shared header when you want to move to the home area or to a signed-in area. Use the article and profile directions in Before you start when you already know what you want to open. **Prerequisites** - Know whether you are signed in. **Steps** 1. Open `/` to reach the home area. 2. Choose the destination that matches your task. | If you need to… | Select or open | |---|---| | Return to the home area | **Home** | | Create a new article while signed in | **New Post** | | Change your profile settings while signed in | **Settings** | | Read an article | Open an article from an article list | | View a profile | Select a profile link | **Result:** The selected home, article, profile, article-creation, or settings area is on screen. ## Use home-feed terms The home feed is the area where you choose among article lists, filter by tags, and see the site's introductory message when you are signed out. **Prerequisites** - Open `/`. **Steps** 1. Read the available feed choices. | If you need to… | Select | |---|---| | Read articles from your feed while signed in | **Your Feed** | | Read the general article list | **Global Feed** | | Filter the list by a popular tag | The tag value shown in the popular-tags area | 2. If the tags are still loading, wait for `Loading Tags...` to finish before choosing a tag. 3. If you are signed out, read `A place to share your knowledge.` in the introductory banner. **Result:** The home area shows the article feed or tag list you selected. ## Read an article and its comments An article page contains the article, its author information, and its comments. The actions available to you depend on whether you own the article and whether you are signed in. **Prerequisites** - Open an article. When you are signed out, the comment area displays `Sign in or sign up to add comments on this article.` **Steps** 1. Choose the route that matches your task. | If you need to… | Select | |---|---| | Open the sign-in page | **Sign in** | | Open the sign-up page | **sign up** | 2. If you are signed in, enter your response in `Write a comment...`. 3. Select **Post Comment** to add the response. 4. If you own the article, choose the action that matches your task. | If you need to… | Select | |---|---| | Change the article | **Edit Article** | | Remove the article | **Delete Article** | 5. Select a comment author's profile link when you want to view that person's profile. **Result:** The article page shows the article and its comment area; signed-in readers can enter and post a comment, and article owners see their article actions. ## View a profile Use the profile's basic information and article lists to choose the available action. **Prerequisites** - Open a profile. **Steps** 1. Choose the profile action that matches whose profile you opened. | If… | Select | |---|---| | The profile is yours | **Edit Profile Settings** | | The profile belongs to another person | **Follow** or **Unfollow** followed by that person's username | 2. Choose the article list you want to view. | If you need to… | Select | |---|---| | View the profile's article list | **My Articles** | | View the profile's favorited article list | **Favorited Articles** | **Result:** The profile area shows the article list you selected and the profile action available for that profile. # Favorite articles ## Favorite articles An article favorite records that an article is favorited. You can favorite an article from an article preview, then open a profile's favorites route to view articles that profile has favorited. | If you need to… | Go to | | --- | --- | | Find an article in the home lists | [Find articles](doc:find-articles) | | Favorite or unfavorite an article | [Favorite or unfavorite an article](#favorite-or-unfavorite-an-article) | | View a profile's favorited articles | [View a profile's favorited articles](#view-a-profiles-favorited-articles) | | Read or manage the article itself | [Read and manage an article](doc:read-and-manage-an-article) | | Open the author's profile | [View a profile](doc:view-a-profile) | ## Before you start An article preview supplies the article's favorite state, favorite count, and route identifier. A profile favorites route uses a profile username and the profile's basic information. **Prerequisites** - Know which article preview you want to work with. - Have the profile username when you want to open that profile's favorites. ## Find an article to favorite The home page lists articles from the feed, global list, or a tag. Each article preview contains the article's author, date, title, description, and tags, and links to the article and its author's profile. **Prerequisites** - Know whether you want to work from the feed, global list, or a tag list. **Steps** 1. Open the home page at `/`. 2. Review the article previews until you find the one whose title or description identifies the article you want to favorite. **Result:** The article preview is ready for the favorite-count button in the next step. ## Favorite or unfavorite an article The heart icon beside an article's favorite count changes whether that article is favorited. An article that is already favorited follows the opposite action from an article that is not. **Prerequisites** - Have the article preview available. **Steps** 1. Select the heart icon beside the article's favorite count. | Article state | Action sent | | --- | --- | | The article is not favorited | The favorite action is sent. | | The article is favorited | The unfavorite action is sent. | **Result:** The selected favorite or unfavorite request is sent for the article. ## View a profile's favorited articles A profile's favorites list contains articles populated from that author's favorited articles. The profile offers **My Articles** and **Favorited Articles** tabs. **Prerequisites** - Know the profile username. **Steps** 1. Open the profile's favorites page for the profile username. 2. Select **Favorited Articles**. **Result:** The profile favorites route requests articles favorited by the profile username and displays the article-list area. ## Handle empty and loading lists The article-list area has a loading state, an empty state, and an article-preview state. The favorite action also follows the article's current favorite state. **Prerequisites** - Have a home article list or profile favorites page open. **Steps** 1. Check whether the article-list area has loaded. 2. Read the message or article previews that match the list state. | List state | What to read or do | | --- | --- | | Loading | Read `Loading...`. | | Empty | Read `No articles are here... yet.`. | | Articles available | Use each preview's favorite state to choose the action in [Favorite or unfavorite an article](#favorite-or-unfavorite-an-article). | **Result:** You can distinguish a loading list, an empty list, and a list containing article previews before selecting a favorite action. For application-wide messages, see [General error messages](doc:general-error-messages). ## What to do next After you inspect or change an article's favorite state, the related guidance is: | Related task | Guidance | | --- | --- | | Read or manage the article | [Read and manage an article](doc:read-and-manage-an-article) | | Open the author's profile | [View a profile](doc:view-a-profile) | | Return to the profile's authored-article list | **My Articles** | | Return to the profile's favorites list | **Favorited Articles** | | Follow the wider article workflow | [Articles overview](doc:articles-overview) | # Getting help ## Getting help Support references are the project links you use when you need to try Conduit, inspect its API, read its source, or learn how the codebase works. | If you need to… | Go to | |---|---| | Choose the right external reference | [Before you start](#before-you-start) | | Try the application | **Demo** in the support-reference table below | | Inspect API routes and responses | **API spec here** in the support-reference table below | | Read the application source | **main RealWorld repo** in the support-reference table below | | Learn how the codebase's patterns work | **our wiki** in the support-reference table below | ## Before you start Before choosing a reference, identify whether you need to try Conduit, inspect its API, read its source, or learn how the codebase works. The project describes Conduit as a React and Redux codebase and lists four separate destinations for those needs. Use the project README as the starting point, then continue to [Choose a support reference](#choose-a-support-reference). The application itself does not provide a support-reference area. ## Choose a support reference Use this procedure when you need help outside the application. **Prerequisites** - You know which kind of help you need. **Steps** 1. Open the project README. 2. Select the matching link in the support-reference table above. | If you need to… | Select | |---|---| | Try the application | **Demo** or the live demo link | | Inspect API routes and responses | **API spec here** | | Read the application source | **main RealWorld repo** | | Learn how the codebase's patterns work | **our wiki** | **Result:** The reference that matches your question is open. # Comment on articles ## Comments on an article An article comment is a reader's written response attached to an article. Use comments to add discussion to an article, read the responses already attached to it, or remove a comment owned by your signed-in account. | If you need to… | Go to | |---|---| | Find the article that contains the comments | [Find articles](doc:find-articles), then [Find and open the article](#find-and-open-the-article) | | Read existing comments or identify the available comment controls | [Read the comment area](#read-the-comment-area) | | Add a response | [Add a comment](#add-a-comment) | | Remove a comment you own | [Delete your comment](#delete-your-comment) | | Sign in before commenting | [Sign in](doc:sign-in) | | Create an account before commenting | [Sign up](doc:sign-up) | | Manage the article itself | [Read and manage an article](doc:read-and-manage-an-article) | | Find help for an error message | [General error messages](doc:general-error-messages) | Updating an existing comment is outside this task. The article record carries the comments area; the wider article surface and its author actions belong to [Read and manage an article](doc:read-and-manage-an-article). ## Before you start **Prerequisites** - Know which article you want to discuss. - Open that article's record before working with its comments. - Sign in before adding a comment. - Sign in with the account that owns a comment before deleting it. The article loads its comments together with the article record. Existing comments therefore appear in the article's comment area when the record opens. ## Find and open the article Use this procedure when you need to reach the article whose comments you want to read or manage. **Prerequisites** - Know which article you want to open. **Steps** 1. Open the article record. 2. Confirm that the article record is displayed. 3. Scroll to the comment area. **Result:** The article record is open and its returned comments are available in the comment area. ## Read the comment area The comment area contains the existing comments and, for a signed-in reader, a field for entering new text and a control for posting it. A signed-out reader sees links to the account screens instead. | What you want to do | What to look for | |---|---| | Read responses already attached to the article | The comments listed below the article | | Enter a response | The multiline field with the placeholder **Write a comment...** | | Submit a response | **Post Comment** below the comment field | | Sign in before commenting | **Sign in** in the signed-out comment area | | Create an account before commenting | **sign up** in the signed-out comment area | | Remove your own response | The trash icon on a comment owned by your signed-in account | The delete icon appears for a comment when the signed-in username matches the comment author's username. It does not appear for a comment owned by another account. ## Add a comment Use this procedure to attach a new written response to the open article. **Prerequisites** - The article record is open. - You are signed in. **Steps** 1. Select the **Write a comment...** field. 2. Enter the response text. 3. Select **Post Comment**. The field clears when the submission is started. The new comment is added to the article when the comment request succeeds. **Result:** The comment field is clear and the submitted comment appears in the article's comment area. ## Delete your comment Use this procedure to remove a comment belonging to your signed-in account. **Prerequisites** - The article record is open. - The comment belongs to your signed-in account. **Steps** 1. Locate your comment in the article's comment area. 2. Select the trash icon beside your own comment. The trash icon is available when the signed-in username matches the comment author's username. **Result:** The selected comment is removed from the article's comment list. ## Handle access and comment errors The signed-in state determines whether the comment field and posting control are available. Use the route that matches what you want to do: | If you need to… | Select | |---|---| | Enter or delete a comment with an existing account | **Sign in** | | Create an account before entering a comment | **sign up** | **Prerequisites** - For **Sign in**, have an existing account. **Steps** 1. If the comment field is unavailable, select **Sign in** for an existing account or **sign up** to create one. 2. Open the article record again after completing the account route. If a comment request fails, read the message shown beside the comment area before trying the comment action again. **Result:** You are on the appropriate account route, or you can read the returned error beside the comment area. ## Continue with the article After the comment task, continue with [Read and manage an article](doc:read-and-manage-an-article) for the article record and its author actions. To find another article, use [Find articles](doc:find-articles).