Social Networking Platform with MERN Stack

Social networking platforms are an important part of our lives, connecting people from all over the world. Building such platforms requires a robust technology stack that can handle a large number of users and real-time interactions. This article will guide you through the process of building a social networking platform using the MERN stack.

The social networking platform will allow users to register, log in, create posts, like and comment on posts, and follow other users. The platform will have a user-friendly interface and real-time updates

Project Preview:

Prerequisites

• JavaScript.
• React.
• Node.js and Express.
• MongoDB.

Functionalities

• User Authentication: Registration, login, and logout
• User Profiles: View and edit profile details
• Posts: Create, edit, delete posts
• Interactions: Like and comment on posts
• Follow System: Follow and unfollow users
• Real-Time Updates: Real-time notifications for new likes, comments, and follows

Steps to Create Social Networking Platform

Step 1:Create a new directory for the project.

mkdir backend
cd backend

Step 2 :Initialize a new Node.js project.

npm init -y

Step 3 :Install required dependencies

npm install bcryptjs cors dotenv express jsonwebtoken mongoose multer

Step 4: Create and Open your .env file and paste below code

MONGO_URI=mongodb://127.0.0.1:27017/socialnetwork
JWT_SECRET=gfg@socialNetworkProject
PORT=5000

Dependencies

"dependencies": {
 "bcryptjs": "^2.4.3",
 "cors": "^2.8.5",
 "dotenv": "^16.4.5",
 "express": "^4.19.2",
 "jsonwebtoken": "^9.0.2",
 "mongoose": "^8.4.4",
 "multer": "^1.4.5-lts.1"
 }

Project Structure (Backend)

Example: Backend code for Social Networking Platform

Frontend Development

• Initialize a new React project
• Set up Redux for state management
• Create components for registration, login, user profile, post feed, and post details
• Implement API calls using Axios

Step 1 : Initialize a new React project

npx create-react-app frontend
cd frontend 

Step 2 : Install required dependencies

npm install react-redux redux redux-thunk redux-devtools-extension @headlessui/react @heroicons/react axios date-fns --legacy-peer-deps

npm install -D tailwindcss

npx tailwindcss init

Dependencies

"dependencies": {
 "@headlessui/react": "^2.1.1",
 "@heroicons/react": "^2.1.4",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.7.2",
 "date-fns": "^3.6.0",
 "react": "^18.3.1",
 "react-dom": "^18.3.1",
 "react-redux": "^9.1.2",
 "react-router-dom": "^6.23.1",
 "react-scripts": "5.0.1",
 "redux": "^5.0.1",
 "redux-devtools-extension": "^2.13.9",
 "redux-thunk": "^3.1.0",
 "web-vitals": "^2.1.4"
 }

Updated tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
 "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
} 

Project Structure (Frontend)

Integrate Frontend and Backend

• Ensure the frontend communicates with the backend using REST APIs
• Handle user authentication and protected routes in React

Styling and UI Enhancements

• Use CSS, Bootstrap, Tailwind and Material-UI for styling
• Create a responsive design for different screen sizes

Example: Complete code for frontend

Steps to Run the Application

Backend

• Navigate to the backend directory
• Install dependencies: npm install
• Start the server: npm start

cd backend
npm server.js / nodemon server.js

Frontend

• Navigate to the frontend directory
• Install dependencies: npm install
• Create a .env file for environment variables (e.g., API base URL)
• Start the React app: npm start

cd frontend
npm start

Output