Epic 2.1 Educator Tool Discovery - filter, sort, search, favorites

[Ahmedr275]

Educator Tool Discovery - FE and BE Development

Overview

This issue focuses on implementing the Tools Discovery Page to match the design provided. The page will act as the central hub for educators to explore, favorite, and access AI-powered tools. The functionality includes personalized recommendations, filtering, sorting, and a search feature to streamline navigation and improve the user experience.

Designs

Requirements

Tool Sections

1. All Tools Section:

   • Display all available tools in a grid format.
   • Each tool card should include:
     • Tool name.
     • Short description.
     • Status indicator (e.g., "Coming Soon" or "Build Now").

2. Favorites Section:

   • Display a "Favorites" section at the top of the page only if the user has favorited tools by clicking the star icon on tool cards.
   • Include a star icon on each tool card that toggles favorite status.
   • Persist user’s favorited tools in their profile for future access.

3. Recommended For You Section:

   • Display the top 3-4 most used tools in the "Recommended For You" section.
   • Backend Requirement:
     • Track the frequency of tool usage by each user.
     • Use frequency data to populate this section dynamically.

---

Search Functionality

• Add a search bar at the top of the page to allow users to search for tools by name or keywords in the tool description.
• Ensure the search is responsive and displays matching results dynamically.

---

Sorting Options

• Include a "Sort By" dropdown with the following options:
  • Most Popular.
  • Recently Added.
  • A-Z.
  • Z-A.
• Ensure sorting works in conjunction with filters and search.

---

Filters

• Add filter options for the following categories:
  • All, Planning, Assessments, Assignments, Writing, Study.
• Ensure filters dynamically update the tools displayed based on the selected category.

---

Responsiveness

• Ensure the page is fully responsive and works across various screen sizes and devices.

---

Development Tasks

Frontend Tasks

• Implement the grid layout for displaying tools.
• Create sections for:
  • All Tools.
  • Favorites (conditionally visible).
  • Recommended For You (based on backend data).
• Add the search bar and connect it to the tools dataset.
• Add the "Sort By" dropdown and ensure it works with filters.
• Implement filter options with dynamic updates based on selection.
• Add interactive star icons for favoriting tools.

---

Backend Tasks

• Implement data tracking for tool usage frequency to support "Recommended For You."
• Create API endpoints for:
  • Retrieving all tools.
  • Retrieving favorited tools.
  • Retrieving most-used tools for "Recommended For You."
  • Handling search and filtering requests.
  • Managing user-specific favorites data.

---

Acceptance Criteria

• All Tools Section displays all tools in a grid layout.
• Favorites Section appears only when tools are favorited by the user.
• Recommended For You Section dynamically displays the top 3-4 most-used tools based on tracked frequency.
• Users can search for tools, and matching results are displayed dynamically.
• Sorting functionality works with the following options:
  • Most Popular.
  • Recently Added.
  • A-Z.
  • Z-A.
• Filters dynamically update tools displayed based on selected categories.
• Star icons for favoriting tools toggle status and persist favorites to the user’s profile.
• The layout and functionality match the provided design.
• The page is fully responsive and works across devices and screen sizes.
• Backend tracks tool usage frequency to populate "Recommended For You" dynamically.

Additional Testing Criteria

• Unit tests are written and cover:
  • Rendering of all sections (All Tools, Favorites, Recommended For You).
  • Functionality of search, sorting, and filters.
  • Correct rendering of favorited tools.
• Integration tests are performed to validate API endpoints and data flow.
• User testing is completed to verify the usability of the search, sorting, and filter functionality.
• No visual or functional bugs are present after implementation.

---

Resources

• Design: Figma Prototype