Building “Share” functionality for a Social Media application using Mongo + React

kelsola
5 min readSep 10, 2021

Sometimes when you’re coding, everything goes swimmingly. Other times, you’re in for a long research lesson. While building the “Share” functionality for my Social Media application, I got a little taste of both. (Delicious, if you ask me).

But before diving into that, let’s go over what “Share” functionality even is.

“Confirm your share” Modal

Basically, it’s a Retweet on Twitter or a Share on Facebook. When a user initiates this action, the post they are sharing is added to their follower’s “Feed.” Normally, only posts from people a user follows are added to a Feed, but ads or “things that might interest you” or “topics you follow” might be included as well. In my case, adding Posts and Shared Posts from people the user follows is all I planned on adding to a user’s Feed at this point.

And when it comes to the Feed, I decided to create a new Mongo Collection for it, and add one Document for every user created in the database (this makes for easy and quick retrieval on the frontend). So when a user first logs in, both a User Document and Feed Document are created. Then when someone they follow creates a post or shares a post, it gets added to an array within their Feed document; which is displayed on the home page. The screenshot below showcases this home page for a logged-in user.

Don’t mind the repeated dummy data

Adding the frontend-to-backend Share functionality went swimmingly, as it was extremely similar to the code I built for “Liking” a post. Lots of copy/pasting with only slight modifications was all that was necessary. Likewise with displaying the “Share” data within a user’s Profile Page. Long story short, I pushed the changes to Github much quicker than anticipated. Instead of days, it only took hours. (Can’t say that too often when it comes to coding…)

But then I realized the functionality was not fully complete. On Twitter and Facebook, a Retweet or Share within a user’s Feed displays “Shared by such-and-such user.” Well, I forgot to build that in, so it was back to the drawing board. I needed to figure out how to add that part to the “Feed” schema. This is where the long research lesson began.

After some Mongoose documentation and Stackoverflow review, I learned I needed to configure my feedArray field within the Feed Schema as an array of Objects with two values. Without it, I would have no way of tying the post with the person who shared the document.

The Mongoose “Feed” Schema

After some tinkering, I was able to add the sharerHandle (the user who shares the post) to the shared post. But that’s when I ran into another problem. When I queried for the user’s Feed on the home page, I was using the .populate method to extract the posts using ObjectID’s, and I used the .skip() and .limit() functionality as my pagination method.

Well, if your array is only one level of ObjectID’s, this works just fine. But, if you’re populating on a subdocument level, it doesn’t work so fine. Mongo will shoot out every single post within the array. Needless to say, the skip() with limit() functionality was no longer a pagination option.

So after further review, I found the solution via this Stackoverflow post. I needed to incorporate the .slice() method.

After a few tries, the pagination started to work with the following .populate and .slice configurations.

Some .populate and .slice action

And then, unforeseen issue #3 arose. With the modifications made thus far, the backend spit out a different data set than the frontend was used to seeing. This was no surprise, since the feedArray switched from one field to two fields.

So my new task was to correct this problem so the list of posts would display properly on the frontend. I could either make the modifications on the frontend itself, or I could do it on the backend. If I did it on the frontend, it would get quite complicated and messy, so I opted to figure out how to do it on the backend via Mongo. There had to be a way.

The way I visualized it in my head was to use Mongo’s .lean() method, so I could directly modify the queried data (you’re unable to without it). I would go through each post via the .forEach() JavaScript method, then add the sharerHandle property to each post and create a new array of the modified posts. That way, there would be no differences in the dataset on the frontend.

Updating the returned data using .lean() and .forEach() for the frontend

This worked, but I ran into another problem. When you use the .lean() method in Mongo, you no longer get to use such things like “virtuals” or “getters” — which I happen to use for converting $numberDecimals into strings. Without this conversion, I was getting an app-killing error on the frontend. The conversion had to be made on the backend.

I found the solution via this Stackoverflow post. All I needed to do was parseFloat() the data that included numberDecimals and update that field with the parsed data. It was actually quite simple. You can see the magic below within the “if” statement.

The “magic”

From there, all that was left was to conditionally render and display “shared by such-and-such” on each post within the user’s feed. The code to accomplish this can be seen below.

Conditional rendering “Shared by such-and-such” in React

And with that, the Share and Feed functionality was complete. Swimmingly and with a few challenges. No complaints here.

Thanks for reading.

Sam

--

--