Social Media Platform using MERN Stack

In web development, creating a "Social Media Website" will showcase and utilising the power of MERN stack – MongoDB, Express, React, and Node. This application will provide users the functionality to add a post, like the post and able to comment on it.

Preview Image: Let us have a look at how the final output will look like.
👁 wf

Prerequisites:

• Node
• MongoDB
• Express
• React
• MERN Stack

Approach to create Social Media Platform:

• The social media website was developed with a dual focus on backend using Express.js and frontend using React.
• Express handled API routes for CRUD operations, including likes and comments, and Multer facilitated file uploads for multimedia content.
• React was chosen for the frontend, providing an interactive user interface with components for posts, likes, and comments.
• Axios played a pivotal role in connecting the frontend to the backend API endpoints, ensuring smooth communication.
• The integration phase involved configuring CORS, connecting frontend to backend API URLs, and thorough end-to-end testing for a seamless user experience.

Steps to Create the Project:

Step 1: Create a directory for the backend by running the following command.

npm init social_backend
cd social_backend

Step 2: Initialize the Express project and install the following dependencies.

npm init -y
npm install express mongoose cors body-parser multer uuid

Folder Structure(Backend):

The updated dependencies in package.json file of backend will look like:

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.3",
 "multer": "^1.4.5-lts.1",
 "uuid": "^9.0.1"
}

Example: Create the required files and add the following code:

Step 3: To start the backend run the following command.

node server.js

Step 4: Set up React frontend using the command.

npx create-react-app social_frontend
cd social_frontend

Step 5 : Installing the required packages:

npm i axios react-router-dom

Folder Structure(Frontend):

The updated dependencies in package.json file of frontend will look lik:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.6.5",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.21.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Create the required files and the following code.

Step 6: Start the application by running the following command.

npm start

Output: