Added Follow Feature to User Profile (Backend & Frontend Integration)

[IkkiOcean]

Description:

I implemented a follow/unfollow feature on the user profile page. This will allow users to follow other users and see their followers/following counts. The feature includes both backend controller logic to manage user relationships and frontend integration to allow users to follow/unfollow others directly from their profile.

Changes made

Backend (Controller & API Logic):

• Create a toggleFollowUser controller to handle follow/unfollow actions.
• The controller should:
• Accept a userId from the logged-in user and a targetUserId from the request parameters.
• Check if the logged-in user is already following the target user.
• If following, remove the user from the logged-in user's following list and vice versa.
• If not following, add the user to the logged-in user's following list and vice versa.
• Update the follower and following counts for both users.
• Return the updated counts and a success message upon completion.
• Update the User model if necessary to include the necessary fields (followers and following arrays).

Frontend (Profile Integration):

• Create a button on the user profile page for the follow/unfollow action.

  • Display the button as Follow if the logged-in user is not following the target user.
  • Change the button to Following if the logged-in user is already following the target user.

• Call the backend API to toggle the follow/unfollow status when the button is clicked.

• Display the updated follower and following counts dynamically.

• Add loading states or error handling for the follow/unfollow action.

• Closes FEATURE: Create User Profile Page and Follow Feature #424

video

rf.mp4

[netlify]

✅ Deploy Preview for delightful-daifuku-a9f6ea ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/delightful-daifuku-a9f6ea/deploys/672f9cd3b3d66481dd3f176d
😎 Deploy Preview	https://deploy-preview-438--delightful-daifuku-a9f6ea.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AlfiyaSiddique]

@IkkiOcean, can you change the profile page's red background as we discussed before?

[IkkiOcean]

@IkkiOcean, can you change the profile page's red background as we discussed before?

I added a gradient to it. what should I change it to?

[AlfiyaSiddique]

@IkkiOcean can see the gradient because the deployment failed due to a syntax error:

[AlfiyaSiddique]

Please fix it

[IkkiOcean]

Please fix it

that must be a merge conflict cause.
btw is this image good as the background

[IkkiOcean]

@AlfiyaSiddique I think this looks good

[AlfiyaSiddique]

Yeah for now we can go with this, please make the changes

[IkkiOcean]

@AlfiyaSiddique I completed the changes

[github-actions]

🎉 Thank you @IkkiOcean Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀