Webpage Integration: Posts Feed

[henryajisegiri]

Goal

Wire up the posts feed with data from the database, implement search, filtering, and sorting, and render the user card and empty state.

Figma Link

---

Scope

Full-stack: data fetching, search and filter logic, feed header, user card, and empty state.

---

Acceptance Criteria

Posts list

• Posts are fetched from the database and rendered in the feed.
• Each post card displays: title, description, publish date, post type, related library tags, thumbnail (if available), author avatar, author name, and author role/badge.
• Thumbnails are pulled for posts with an image or video.

Search

• Search covers all post fields: title, body content, post type, author name, and library tags. Dev Note: @jlchilders11 on how wagtail supports search
• Results update on form submission.

Filters

• Post type filter: All, News, Blogs, Links, Videos. Discussions, Achievements, and Issues are deprioritized and out of scope for this ticket. Hot Posts triggers the new ranking algorithm that takes views and recency into account.
• Library filter: Filters the feed to posts tagged with the selected library. The dropdown is populated from the libraries list API.
• Applying any filter resets pagination to page 1.
• If no results based on search term or filters, display an empty state and show related posts based on library within the category searched

Feed header

• The feed header updates to reflect the active search or filter state.
• Template strings:
  • Search only: Results for "{search term}"
  • Post type filter only: {Post Type} Posts — e.g. News Posts
  • Post authored by: Posts by {Author Name}
  • Library filter only: {Library Name} Posts — e.g. Boost.Beast Posts
  • Both post type and library filters active: {Post Type} Posts — post type takes precedence, library name is not shown.
• Default header (no filters): Latest Posts

URL-driven filter state

• When the user arrives at the feed via a URL that includes filter parameters (e.g. from a library sub-page "View Posts" link), the feed header and filters are pre-populated to match.
• Example: navigating from the Boost.Beast library page sets the library filter to Boost.Beast and displays Boost.Beast Posts in the feed header.

User card

Logged in

• Displays: avatar, username, role/badge, member since date, and org affiliation.
• CTA: Create Post — routes to the post creation page.

Logged out

• Displays the card with the heading "Create an account" and the copy: "Advance your career, learn from experts, and help shape the future of Boost and C++."
• CTA: Sign Up Now — routes to the sign up page.
  Dev/QA Note: @jlchilders11 on how we can test the logged out state

---

BE/FE Actions

Description	URL
Fetch paginated, filtered, and searched posts. Response includes results and total_count
Fetch library list for the library filter dropdown
Fetch logged-in user metadata for the user card

---

Out of Scope

• Discussions, Achievements, and Issues post type filters
• Pagination controls
• Post card component
• Post creation page
• Sign up page