Description:
As a frontend developer, I should be able to create a profile page where users can view their profile information, add new posts (text and image), view their posts with options to delete, and interact with post actions like liking and commenting. (Epic: https://github.com/zohaibshahzadkhan/SocialVibe-React-App/issues/21)
Acceptance Criteria:
Profile Information Card:
Implement a card on the left side of the profile page displaying:
User avatar (profile picture).
User email address.
Number of friends count.
Number of posts count.
Post Creation Form:
Design and implement a form on the right side of the profile page allowing users to:
Add a new post with text content.
Upload an image as part of the post.
Post List
Display a list of posts below the post creation form.
Each post should include:
Post content (text and/or image).
Icons for liking and commenting on the post.
Three-dot icon to show additional options (e.g., delete post).
Delete Post Functionality:
When clicking the three-dot icon on a post, display a delete icon allowing the user to delete their own post.
Implement functionality to delete a post.
Like and Comment Icons:
Implement icons/buttons for liking and commenting on each post.
Ensure clicking these icons/buttons updates the respective counts and interactions without reloading the entire page.
Integration with Backend:
Integrate frontend components with corresponding backend endpoints (POST /api/posts/ for creating posts, DELETE /api/posts//delete for deleting posts, etc.).
Ensure data fetching and updating (e.g., retrieving posts, updating post likes/comments) are handled efficiently and securely.
Description: As a frontend developer, I should be able to create a profile page where users can view their profile information, add new posts (text and image), view their posts with options to delete, and interact with post actions like liking and commenting. (Epic: https://github.com/zohaibshahzadkhan/SocialVibe-React-App/issues/21)
Acceptance Criteria:
Profile Information Card:
Post Creation Form:
Post List
Delete Post Functionality:
When clicking the three-dot icon on a post, display a delete icon allowing the user to delete their own post. Implement functionality to delete a post.
Like and Comment Icons:
Integration with Backend: