[Article Details] Related Articles

[nban22]

Objective

Fetch and display 5 random articles from the same category as the currently viewed article, to provide users with related content.

---

Requirements

1. Query for Related Articles

   • After fetching the full article details, query the database for 5 random articles that belong to the same category as the current article.
   • Ensure that the related articles are selected from the same category but exclude the current article from the results.

2. Display Related Articles

   • Render the 5 related articles on the article detail page, preferably below the main article content.
   • Each related article should include:
     • Title
     • Thumbnail image
     • Publish date
     • Category
   • Ensure the related articles are clearly marked as "Related Articles" or similar.

3. User Interaction

   • Make the related articles clickable, leading to their own detail pages.
   • Ensure that users can easily navigate to these related articles to continue browsing similar content.

4. Styling and Layout

   • Display the related articles in a clean, visually distinct section, separate from the main content of the article.
   • Ensure that the layout of the related articles is visually appealing and does not distract from the main content.

5. Random Selection

   • Implement logic to fetch a random selection of articles from the same category, ensuring a varied list each time a user views an article.
   • Consider ensuring that the same article doesn’t appear in both the main article and the related articles list.

---

Deliverables

• A section on the article detail page that displays 5 related articles from the same category.
• Each related article should show the title, thumbnail, publish date, and category, and be clickable to its respective article page.
• Proper logic to exclude the current article from appearing in the related articles list.

---

Acceptance Criteria

• The article detail page displays 5 random related articles from the same category as the main article.
• Each related article includes a title, thumbnail, publish date, and category.
• Clicking on a related article correctly takes the user to the article detail page of the selected article.
• The related articles section is well-styled and easy to distinguish from the main article content.
• The related articles section is responsive and looks good on both desktop and mobile devices.