Growing the Skeleton into a Social Media Application

Social media is an integral part of the web these days, and many of the user-centric web applications we build end up requiring a social component down the line to drive user engagement.

For our first real-world MERN application, we will modify the MERN skeleton application we developed in Chapter 3, Building a Backend with MongoDB, Express, and Node, and Chapter 4, Adding a React Frontend to Complete MERN, to build a simple social media application in this chapter. While doing this, you will learn how to extend the integration of the MERN stack technologies and add new features to grow your own full-stack web applications.

In this chapter, we will go over the following topics:

• Introducing MERN Social
• Updating the user profile
• Following users in MERN Social
• Posting messages with photos
• Implementing interactions on posts

...

Introducing MERN Social

MERN Social is a social media application with rudimentary features inspired by existing social media platforms such as Facebook and Twitter. The main purpose of this application is to demonstrate how to use the MERN stack technologies to implement features that allow users to connect or follow each other, and interact over shared content. While building out MERN Social in this chapter, we will go over the implementation of the following social media-flavored features:

• User profile with a description and a photo
• Users following each other
• Who to follow suggestions
• Posting messages with photos
• Newsfeed with posts from followed users
• Listing posts by user
• Liking posts
• Commenting on posts

You can extend these implementations further, as desired, for more complex features. The MERN Social home page looks as follows:

The code for the complete MERN Social...

Updating the user profile

The existing skeleton application only has support for a user's name, email, and password. But in MERN Social, we will allow users to add a description about themselves, as well as upload a profile photo while editing the profile after signing up, as shown in the following screenshot:

In order to implement this feature update, we need to modify both the user backend and frontend. In the following sections, we will learn how to update the user model and user update API in the backend, and then the user profile and user profile edit form views in the frontend to add a short description and a profile photo for users in MERN Social.

Adding an about description

To store the short description that...

Following users in MERN Social

In MERN Social, users will be able to follow each other. Each user will have a list of followers and a list of people they follow. Users will also be able to see a list of users they can follow; in other words, the users in MERN Social they are not already following. In the following sections, we will learn how to update the full-stack code to implement these features.

Following and unfollowing

In order to keep track of which user is following which other users, we will have to maintain two lists for each user. When one user follows or unfollows another user, we will update one's following list and the other's followers list. First, we will update the backend to store and update these...

Posting on MERN Social

The post feature in MERN Social will allow users to share content on the MERN Social application platform and also interact with each other over the content by commenting on or liking a post, as shown in the following screenshot:

For this feature, we will implement a complete full-stack slice containing the post backend and frontend. The post backend will be comprised of a new Mongoose model for structuring the post data to be stored in the database, while the post CRUD API endpoints will allow the frontend to interact with the Post collection in the database. The post frontend will consist of post-related React components that will allow users to view posts, add new posts, interact with posts, and delete their own posts. In the following sections, we will define the data structure for posts in the Post schema, and then learn how to incrementally add the...

Interacting with Posts

A core feature of any social media platform is the ability for users to interact with shared content. For the posts that are created in the MERN Social application, we will add the options to like and leave comments on individual posts.

To complete the implementation of this feature, first, we will have to modify the backend so that we can add API endpoints that update an existing post with details of who liked the post and details of comments left on the post.

Then, in the frontend, we will have to modify the UI so that users can like and leave a comment on a post.

Likes

The like option in the Post component's action bar section will allow the user to like or unlike a post, and also show the total...

Summary

The MERN Social application we developed in this chapter demonstrated how the MERN stack technologies can be used together to build out a fully-featured and functioning web application with social media features.

We began by updating the user feature in the skeleton application to allow anyone with an account on MERN Social to add a description about themselves, as well as upload a profile picture from their local files. In the implementation of uploading a profile picture, we explored how to upload multipart form data from the client, then receive it on the server to store the file data directly in the MongoDB database, and then be able to retrieve it back for viewing.

Next, we updated the user feature further to allow users to follow each other on the MERN Social platform. In the user model, we added the capability to maintain arrays of user references to represent...