Skip to content

Follow Unfollow User Approach using the MEAN Stack

Posted in Server

It is not uncommon to have the follow unfollow user model on many social media platforms. User A follows B. User A can list all his/her followers. User B is also able to determine how many people are following him/her.

What is one approach to get that going using the MEAN (MongoDB, Express, Angular 5, Node) Stack?

Let’s take it step by step.

In the end, we’re looking at a result like this:

MongoDB

Honestly, I’m not gonna tell you how to install MongoDB. I have mine installed. See their documentation to install their latest.

We’re here for logics, not installation steps, or?

Schemas Involved

First, here’s how the example below structures the schema and I explain the reason next.

For a successful follow/unfollow approach in this example, we’re gonna need 3 models:

  • User Model
  • Account Model
  • Follow Model

Our User Model will have, well, User stuff, such as username, hash_password, etc.

The Account Model will be an extension of the User Model, which will have extra details such as location, bio, telephone, etc.

NOTE: The reason for the separation of the User Model from the Account Model is the issue related to hiding sensitive data like the hash_password from the User Model during $lookup queries.

I couldn’t find a way to omit the hash_password from $lookup queries, so I thought of it wise to separate any extra data into an account model, therefore the User model is only touched for Auth-related functionalities, whereas the Account deals with all user profile related functionalities.

Lastly, the Follow Model will be dedicated to holding the relationships between who follows who.

Therefore, User Model:

Then our Account Model

And finally, our Follow Model

The ref is to our cardModelwhich is the cardscollection. The Cardmodel isn’t relevant to our follow unfollow approach, so will omit that for now.

The next part explains how we save the follow unfollow relationship into our Follow collection with the above schemas in mind.

Express-cum-Mongoose

In Express, here’s the logic.

This is an endpoint for following. Here’s what’s happening in general.

  • When user A follows user B, and user B follows A, and user C follows A and B, here’s what happens to user A’s follow object:

A’s follow Object

B’s follow Object

C’s follow Object

Did I get the above structure right? I guess I’m right.

To get a similar structure above, we make this bulk commands:

We’re simply

  • updating both users involved at a time in a bulk transaction.
  • We add user A to user B’s followers and B to user A’s following

Kinda weird to think of it, but we’re simply adding Alice to Bob’s list of followers, and adding Bob to Alice’s list of those following.

If we want to reverse the process, as in, let A unfollow B, here’s the command to get that done:

Querying

Now, we would want to retrieve ALL those user A is both following and those following user A (followers).

We can do that in one single scoop of an aggregate command via:

The above command returns: (Note: the 1 as options for the field name is there to indicate we want the value from that field NOT suppressed.)

  • "user": 1, which is the user we want to load the cards from those following and followers
  • "userFollowers": 1, which is account profile of every user following this user
  • "userFollowing": 1 which is account profile of every user followed by this user

Tie Together with Client

Now to the Angular part.

Here’s the UI flow:

If we want to load all followers/following of a user, we only make this request, and process the response as such in our component:

Then we iterate in our component as such:

The above shows the part of all people following this username

This part shows all users this username is following:

Follow Unfollow button

There’s no magic to what’s happening behind the scene.

It is purely this CSS response to Follow/Unfollow button tweaked for the UI above. Nothing else.

Conclusion

This is the approach I took for the follow unfollow for the KhoPhi application. You can check the application out to see how the follow unfollow button works.

This article contains, hopefully more than enough information to help you get a similar or even better results with your follow unfollow approach.