Implement forum post like toggle with per-user state and debounced persistence

[Benalex8797]

Category: Feature / Bug Fix
Difficulty: High

Description

likePost in ForumContext.tsx increments the like count infinitely on every click — there is no toggle, no per-user tracking, and a user can like the same post hundreds of times. There is also no visual distinction between "liked" and "not liked" state in ForumFeed.tsx.

Problem Statement

// ForumContext.tsx
const likePost = (postId: string) => {
  setPosts(prev => prev.map(post => {
    if (post.id === postId) {
      return { ...post, likes: post.likes + 1 }; // no toggle, no user check
    }
    return post;
  }));
};

Technical Requirements

• Add a likedBy: string[] array (user IDs) to the Post interface in ForumContext
• likePost must toggle: if user.id is in likedBy, remove it and decrement; otherwise add and increment
• The like button in ForumFeed.tsx must show a filled/colored heart icon when the current user has liked the post
• Debounce persistence to localStorage by 300ms to avoid thrashing on rapid clicks
• Unauthenticated users clicking like must be redirected to /signup with a toast prompt
• Animate the like count change using a CSS keyframe +1 pop animation

Acceptance Criteria

• Clicking like once adds the user's ID; clicking again removes it
• Like count is accurate and cannot be inflated by one user
• Button reflects liked state visually with correct icon
• State persists across page refreshes
• Animation plays on count change

Deliverables

• Updated ForumContext.tsx (Post interface + likePost)
• Updated ForumFeed.tsx (like button UI)

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.

[wadexybiodun]

Hi admin, I'll like to work on this task, please kindly assign this task to me.
Thank you.

[grantfox-oss]

🦊 GrantFox — @wadexybiodun has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #8)
2. Your PR will be reviewed by the MentorsMind maintainers

Good luck! Track your progress on GrantFox.