Add Save for Later Functionality (Frontend)

[yashpandav]

Is your feature request related to a problem?

Currently, users can read articles but cannot save them for later. Adding a "Save for Later" feature will allow users to bookmark articles and easily revisit them, enhancing user experience and boosting content engagement.

Describe the solution you'd like

Frontend:

• UI Components:

  • Add a Save for Later button (with a bookmark icon or "Save" text) to each article card or article page.
  • Implement a "Saved Articles" section where users can view all their saved articles.

• API Integration:

  • Save an article:
    • Call POST /api/save-article when the user clicks the "Save" button.
  • Fetch saved articles:
    • Use GET /api/saved-articles?userId={userId} to display saved articles in a dedicated section.
  • Remove a saved article:
    • Add a "Remove" option that calls DELETE /api/remove-saved-article.

• State Management:

  • Track saved articles using React state or a global state (like Redux).
  • Update the UI instantly when an article is saved or removed.

• Visual Feedback:

  • Change the "Save" button appearance when an article is already saved (toggle between "Save" and "Saved").
  • Show loading indicators while saving or removing articles.

• Error Handling:

  • Display error messages if the save/remove request fails.
  • Show empty states like "No saved articles yet" when the saved list is empty.

• Responsiveness:

  • Ensure the "Save" button and "Saved Articles" page are fully responsive across devices.

Feature Area

Other

Feature Scope

Frontend

Existing Issue Check

• I have searched for existing issues

Code of Conduct

• I agree to follow the code of conduct

Contributor Status

• I am a SWOC contributor
• I am an IWOC contributor
• Neither