RYVE: SOCIAL MEDIA WEB APPLICATION

A Project Report submitted in partial fulfillment of the requirements for the award of the degree of

DIPLOMA IN ENGINEERING & TECHNOLOGY

in
COMPUTER SCIENCE & TECHNOLOGY
by

Sreegopal Saha Reg. No: D222307386

Sneha Maji Reg. No: D222307382
Swastika Jana Reg. No: D222307374
Disha Mondal Reg. No: D232408895

Under the Guidance of

Soumendra Nath Mishra

(Lecturer, Department of CST, Contai Polytechnic)

at

DEPARTMENT OF COMPUTER SCIENCE & TECHNOLOGY (CST)

CONTAI POLYTECHNIC
P.O.: DARUA, P.S: CONTAI, DIST.: PURBA MEDINIPUR, WEST BENGAL, PIN 721401

(UNDER WEST BENGAL STATE COUNCIL OF TECHNICAL & VOCATIONAL EDUCATION AND SKILL DEVELOPMENT (TECHNICAL EDUCATION
DIVISION), WEST BENGAL, INDIA
AND
APPROVED BY AICTE, NEW DELHI, INDIA)
June, 2025
 DECLARATION

I hereby declare that the project entitled Ryve: Social Media Web Application submitted for
the Diploma in Engineering & Technology (CST) degree is my original work and the project
has not formed the basis for the award of any other degree, diploma, fellowship or any other
similar titles.

Signature of the Student

Place:
Date:
 CERTIFICATE OF RECOMMENDATION

This is to certify that the work entitled “RYVE: SOCIAL MEDIA WEB APPLICATION” is the
original work done by Sreegopal Saha, Sneha Maji, Swastika Jana, Disha Mondal under
my supervision in partial fulfillment of the degree of Diploma in Engineering and Technology
in Computer Science & Technology at Contai Polytechnic under West Bengal State Council
of Technical & Vocational Education and Skill Development, West Bengal during the
academic year 2024-25.

Wish them all success in life.

(Signature)
------------------------
Project Supervisor with
designation
Date:
Place:
 Project Report Approval

The project report entitled Ryve: Social Media Web Application submitted by Sreegopal
Saha (Roll No: DCONCSTS4-10005508, Registration No: D222307386), Sneha Maji (Roll
No: DCONCSTS4 - 10005504, Registration No: D222307382), Swastika Jana (Roll No:
DCONCSTS4-10005496, Registration No: D222307374), Disha Mondal (Roll No:
DCONCSTS4-10026329, Registration No: D232408895) and is approved for the degree of
Diploma in Engineering & Technology in Computer Science & Technology (CST).

-------------------
Supervisor
Soumendra Nath Mishra
Lecturer, Department of CST

-----------------------
SIC, Project Lab

-----------------------
HOD, Dept. of CST

<Official Stamp>

Date:
Place:
 ACKNOWLEDGEMENT

We are overwhelmed in all humbleness and gratefulness to acknowledge our depth to all
those who have helped us to put these ideas, well above the level of simplicity and into
something concrete. We would like to express our special thanks of gratitude to our teacher,
Mr. Soumendra Nath Mishra for his proper guidance and valuable suggestions. We
are indebted to other teachers Mrs. Gitanjali Mandal, Mr. Prithwish Manna, and Mr.
Krishnadut Bera, Mrs. Saheli Dash, who gave us the golden opportunity to do this
wonderful project on the topic Ryve: Social Media Web Application. We are really
thankful to them.
We would like to thank our entire team who helped us a lot in gathering different
information, collecting data, and guiding us from time to time in making this project.
Despite their busy schedules, they gave us different ideas in making this project unique.

----------------------
Sreegopal Saha

----------------------
Sneha Maji

----------------------
Swastika Jana

----------------------
Disha Mondal

Date:
Place:
Table of Contents
Abstract ............................................................................................................................... 3
CHAPTER 1 : INTRODUCTION ...................................................................................... 4
1.1 Introduction ............................................................................................................... 4
1.2 Problem Statement .................................................................................................... 5
1.3 Objectives ................................................................................................................. 5
1.4 Methodology ............................................................................................................. 5
CHAPTER 2: LITERATURE SURVEY............................................................................ 6
CHAPTER 3: SYSTEM DEVELOPMENT ....................................................................... 8
3.1 Architecture Design .................................................................................................. 8
3.2 System design Implementation ................................................................................. 8
3.2.1 Identification of Features ................................................................................... 9
3.2.2 Libraries and Frameworks Used ........................................................................ 9
3.2.3 Technical Requirements................................................................................... 11
3.2.4 Hardware Configuration .................................................................................. 11
3.2.5 Software Configuration.................................................................................... 11
3.3 Website design ........................................................................................................ 12
3.3.1 Bootstrapping a basic react application ........................................................... 12
3.3.2 React Workspace and folder hierarchy ............................................................ 12
3.3.3 Installing packages and dependencies ............................................................. 12
3.3.4 Importing and exporting components .............................................................. 12
3.3.5 How react works (JSX and Babel): .................................................................. 12
3.3.6 States in React .................................................................................................. 13
3.3.7 Props in react.................................................................................................... 13
3.3.8 React Hooks ..................................................................................................... 14
3.5 State Management using Context API .................................................................... 14
3.6 Routing.................................................................................................................... 15
3.7 The Backend implementation ................................................................................. 15
3.7.1 Folder Structure Generated by bkite ................................................................ 16
3.7.2 Connecting to MongoDB Atlas ....................................................................... 16

1
 3.7.3 Express App Setup ........................................................................................... 17
3.7.4 Create Schema & Models ................................................................................ 18
3.7.5 Add Routes & Controllers ............................................................................... 18
3.7.6 Run the Project................................................................................................. 18
3.8 MongoDB and Mongoose ....................................................................................... 18
3.8.1 User model: ...................................................................................................... 19
3.8.2 Post Model: ...................................................................................................... 20
3.8.3 Follow Model ................................................................................................... 20
3.9 Controllers............................................................................................................... 21
CHAPTER 4: RESULT AND ANALYSIS ...................................................................... 24
4.1 Login and Registration ............................................................................................ 24
4.2 Home Page .............................................................................................................. 25
4.3 Creating and Searching a post................................................................................. 26
4.4 Performance analysis .............................................................................................. 27
4.5 Final list of dependencies........................................................................................ 27
4.6 Mobile View ........................................................................................................... 28
CHAPTER 5: CONCLUSION ......................................................................................... 29
5.1 Conclusions ............................................................................................................. 29
5.2 Future Work ............................................................................................................ 29
CHAPTER 6: REFERENCES .......................................................................................... 30

2
 Abstract
The summary provided describes a full-stack responsive social media application built
using the MERN stack (MongoDB, Express.js, React, and Node.js). The application
follows a three-layered architecture and includes unit tests for each layer.

The application offers user registration with comprehensive validation, including the
ability to upload a user image for their profile. Users can register, sign in using their
email and password, and access a clean and user-friendly home page with various
widgets. The user profile details are displayed, and the current user can create, edit, and
delete posts, as well as add images to their posts. Users can view a news feed of all posts,
like and dislike posts, and view comments. Friend functionality is provided, allowing
users to add and remove friends, view their friends' profiles, and write posts for other
users.

The application supports a light and dark mode, and it is fully responsive, ensuring
optimal user experience on different screen sizes. The frontend utilises React as the
framework, React Router for navigation, Formik and Yup for form and validation, Redux
Toolkit for state management with Redux Persist for local storage, and React Dropzone
for image uploads.

On the backend, Node.js serves as the runtime environment, while Express.js acts as the
backend framework. MongoDB is used as the database, and Mongoose is employed for
managing database operations. Authentication is handled using JSON Web Tokens
(JWT), and Multer is used for file uploading.

Middleware is implemented to authenticate HTTP requests before sending them to the

server. The frontend is built using HTML, CSS, and JavaScript, with extensive use of
Bootstrap templates. On the backend, Node.js and its packages, such as Express.js and
JWT, are employed, and Mongoose is used to write more readable code.

3
 CHAPTER 1 : INTRODUCTION
1.1 Introduction
This is a full-stack responsive social media web application built using the MERN stack,
which includes MongoDB, Express.js, React, and Node.js. The application is structured
using a clean three-layer architecture—presentation, business logic, and data access—
which helps maintain scalability and code organization. Each layer is supported by unit
tests to ensure stability and correctness. The frontend is built using React with Tailwind
CSS for styling, and the UI is composed entirely of custom-built components to ensure
design consistency. State management is handled through React's Context API, and React
Router is used for seamless client-side navigation.

Users can sign up using a simple and validated form and then log in using their email and
password. After signing up, users have the option to upload a profile picture, which is
stored securely via Cloudinary. All user passwords are hashed securely using bcrypt.js to
ensure data protection. Once authenticated, users are taken to a clean and responsive
home page that displays their profile and a personalized feed consisting of posts from
users they follow.

Users can follow or unfollow others, and their feed dynamically updates based on this
following list. Users can create posts that include text, images, and their current location.
Before posting, they also have the option to use an integrated AI tool to enhance or refine
their content. This feature uses AI to help users improve their written posts for clarity,
engagement, or tone before sharing them. The application allows users to view other
users' profiles and also offers privacy settings; users can make their profiles private,
allowing only approved followers to view their posts and information.

A real-time chat system is also implemented, allowing users to send and receive
messages instantly using WebSocket technology. The chat feature provides seamless and
responsive communication between users. All media files, including profile pictures and
post images, are uploaded and hosted on Cloudinary for optimized performance and
accessibility.

The backend uses Node.js as the runtime and Express.js as the web framework, with
Mongoose used to model and interact with the MongoDB database. Authentication is
implemented using JSON Web Tokens (JWT), and secure file uploads are handled via
Multer. Middleware is employed to authenticate incoming HTTP requests before
allowing access to protected routes. All interactions on the frontend are powered by APIs
exposed by the backend, which efficiently retrieve and manage data from the database.
This project is a comprehensive social media platform focused on user engagement,
privacy, and real-time communication, built with a modern tech stack and scalable
architecture.

4
1.2 Problem Statement
The objective is to develop a fast, scalable, and secure web application by applying
industrial best practices in full-stack development. This project aims to bridge academic
knowledge with practical implementation by enabling hands-on experience in MERN
stack development and offering a deeper understanding of how MERN stack applications
function in real-world scenarios. Through this, the goal is to gain practical insights into
designing and building modern web applications that meet industry standards.

1.3 Objectives
The primary objective is to develop a structured, clean, testable, and maintainable web
application by adhering to industry-standard best practices. This project also aims to
apply the theoretical knowledge acquired so far particularly in the areas of full-stack web
development and translate it into practical experience.

1.4 Methodology

MERN Stack Architecture

The front end of this website is developed exclusively using React.js. Tailwind CSS and
custom components are used for styling, enabling rapid development with a consistent
and scalable design system. React's component-based architecture allows independent
development of components, so errors in one do not affect others. Navigation is handled
by React Router, and state management is implemented using React Context API.

On the backend, Node.js serves as the runtime environment with Express.js as the
framework for building APIs. MongoDB is used as the database, managed through
Mongoose to simplify data modeling and queries. Authentication is secured using JSON
Web Tokens (JWT), while Multer handles file uploads before sending them to
Cloudinary for storage.

All HTTP requests are managed asynchronously by React, allowing dynamic data
fetching and updates without page reloads. This results in a faster and smoother user
experience compared to traditional websites.

5
 CHAPTER 2: LITERATURE SURVEY
Full-stack developers are more in demand than ever in today's tech-driven world.
According to a poll by Indeed, the average salary for full-stack developers in the US is an
impressive $110,770. A full-stack developer is someone skilled in both front-end and
back-end development, capable of building dynamic websites and web applications from
start to finish.

The Evolution of Web

The foundations of the modern commercial internet were laid in 1990 when Tim Berners-
Lee developed the fundamental ideas of the World Wide Web along with essential tools
such as:

 HyperText Transfer Protocol (HTTP)

 HyperText Markup Language (HTML)
 The first web browser and code editor
 The first web server and web page

These innovations introduced the concept of the World Wide Web and enabled users to
create their own web pages. Since then, the internet has rapidly evolved, and four
generations of web development can be identified:

 Web 1.0 (Static Web): Early websites were static, built with plain HTML and
HTTP, and allowed users only to read content.
 Web 2.0 (Social Web): Beginning in 2004, this phase introduced social networks,
blogs, and user-generated content. Technologies like JavaScript, DOM, Ajax,
CSS, XHTML, XML, XSL, and Flash emerged to improve interactivity and user
experience. Platforms like Facebook, Twitter, and LinkedIn allowed global user
connections.

6
  Web 3.0 (Semantic Web): Starting around 2010, this generation added semantics
to web content using ontologies, improving content personalization and intelligent
search. Technologies such as OWL (Web Ontology Language) and RDF
(Resource Description Framework) enabled computers to understand and generate
meaningful data.

Earlier web development was dominated by the LAMP stack (Linux, Apache, MySQL,
PHP/Perl), which involved multiple programming languages and frameworks. The
emergence of the MERN stack simplified development by using JavaScript across both
client and server sides:

 MongoDB: NoSQL document-oriented database.

 Express.js: Minimal and flexible backend framework for Node.js.
 React.js: Front-end library for building component-based user interfaces.
 Node.js: JavaScript runtime environment allowing server-side execution.

This project aims to leverage the MERN stack's components to build a social platform
connecting people, demonstrating the integration and advantages of each technology.

The project's primary objectives include:

 Implementing key MERN stack features such as user authentication, dashboard

display, product and category listing.
 Developing a full web application with e-commerce functionalities including
payment gateway integration.
 Providing admin tools for user and store management, analytics, and reporting, and
makes doing business easier for everyone.

7
 CHAPTER 3: SYSTEM DEVELOPMENT
3.1 Architecture Design

A 3-tier MERN architecture

MERN, or MongoDB, Express, React, and Node.js, are acronyms. With MongoDB as the
database, React.js is a web client library, Express.js is a web server framework, and
Node.js is a server-side platform. It enables programmers to create Web applications that
only use full-stack JavaScript.

Since MERN combines four cutting-edge technologies, including Facebook's strong

support, it eliminates the need for developers to learn other platforms like.NET, PHP, or
Java. Learning new technologies for application development saves developers time and
effort. The stack is supported by a large number of open-source packages and a dedicated
community of programmers to boost scalability and maintain software due to the same
JavaScript platform.

The foundation of the MERN stack is Node.js, which is a server-side technology with
extremely high performance and quick response to all tasks, including massive and
complex data. TypeScript is not required for MERN; all that is required is the adaptable
React framework, which is now the most well-liked and influential front-end technology.

3.2 System design Implementation

A typical React web application is organized into two main parts — the frontend and the
backend. Each of these parts usually lives in its own folder and is further broken down
into smaller folders and files based on their roles.

8
The frontend handles everything the user sees and interacts with — the user interface and
the overall experience. On the other hand, the backend takes care of things like creating,
updating, deleting, and retrieving data from the database or other sources.

frontend work environment backend work environment

3.2.1 Identification of Features

The web application includes the following features:

 Support for both Dark Mode and Light Mode in the user interface.
 Ability to create posts with image uploads.
 Deletion of posts by the user.
 Functionality to follow other users and view their profiles.
 Option to like posts.
 Restriction of deletion rights to only the original post creator.
 Uploading a profile photo.
 User registration (sign-up functionality).
 User login and logout capabilities.

3.2.2 Libraries and Frameworks Used

JavaScript: JavaScript is a lightweight, interpreted, cross-platform scripting language
commonly used to create dynamic content in web applications. Historically limited to

9
frontend interactions, JavaScript can now be executed on the server side through
platforms like Node.js, which utilizes the powerful V8 engine.

React.js: React.js is an open-source JavaScript library developed by Meta for building

component-based user interfaces. It supports the creation of single-page applications
(SPAs) and can be extended with frameworks like Next.js for server-side rendering and
mobile applications.

Characteristics:

 React focuses solely on the UI, rendering components efficiently using a Virtual
DOM. JSX syntax is used to simplify code and enable easier integration of logic and
markup.
 React components enhance reusability, modularity, and clarity in application
structure. The virtual DOM compares changes with the actual DOM, ensuring
efficient UI updates.
 To initiate the project, we used create vite@latest via npm to scaffold the React
environment.

Node.js: Node.js is a server-side runtime environment built with C++ and powered by the
V8 JavaScript engine. It supports asynchronous, event-driven programming, enabling
high-performance, non-blocking operations ideal for backend development.

Core advantages:

 Single-threaded architecture optimized for handling concurrent tasks efficiently.

 Asynchronous callback mechanisms prevent resource blocking and improve
scalability. Rich built-in modules (e.g., HTTP, DNS, HTTPS, TLS) simplify web
server creation and file operations.
 Node.js executes registered events independently, allowing the system to respond
without waiting for earlier processes to complete, which significantly enhances
performance and resource utilization.

Express.js: Express.js is a minimalist web framework built on top of Node.js. It

streamlines backend development by offering a structured, modular approach for building
APIs and web applications.

Benefits:

 Simplified routing and middleware support.

 Asynchronous processing using Node.js' event-driven model. Quick project setup
using npm init to generate a package.json file and configure the environment.

10
 We chose Express for its simplicity and efficiency in handling server logic, especially
useful in projects requiring organized backend architecture.

MongoDB: MongoDB is a NoSQL, document-oriented database used in our project for

flexible and scalable data storage. It stores records as BSON (Binary JSON) documents,
enabling efficient querying and data retrieval.

Key features:

 Schema-less design allows dynamic structure and nesting of data.

 High performance through indexing and document-based access.
 Supports Mongo Shell, a JavaScript-based interface for executing queries.
 Easily scalable and suitable for large datasets. MongoDB allows developers to define
and store data structures in a flexible format that maps directly to objects in
application code.

Mongoose: Mongoose is an Object Data Modeling (ODM) library for MongoDB and
Node.js. It facilitates the creation and management of data schemas and relationships,
bridging the gap between MongoDB's document structure and JavaScript objects.

Advantages:

 Schema-based modeling with built-in data validation. Simplified CRUD operations.

 Efficient handling of object relationships and associations. Mongoose enabled us to
write clean, maintainable, and structured database logic for our social media
application.

3.2.3 Technical Requirements

 VS Code (preferred IDE) / atom
 Postman API platform for building and testing APIs.
 MongoDB database.

3.2.4 Hardware Configuration

Device Description
Processor 13th Gen Intel Core i3-1305U
RAM 16GB DDR4
System Type Windows 11 Home
Table 3.1: Hardware requirements

3.2.5 Software Configuration

Operating System Windows
Language Javascript
Package manager NPM/PNPM
Runtime environment Node.js

11
 Table 3.2: Software requirements

3.3 Website design

3.3.1 Bootstrapping a basic react application
We need to run the command - npm create vite@latest and it will automatically make a
folder with all the requirements for creating a react application. Bootstrapped react app
made using npm create vite@latest command

3.3.2 React Workspace and folder hierarchy

[IMAGE PLACEHOLDER: React Workspace and folder hierarchy]

Fig 3.11 shows how the folders and files are structured in the client directory. It is
important to keep everything organized to avoid any mistakes.

3.3.3 Installing packages and dependencies

In react, various packages and dependencies can be installed using the following
commands:

npm install packagename - for installing dependencies normally. npm i - for installing all
the dependencies in one go.

3.3.4 Importing and exporting components

In react we can export a particular component and then import it in a parent component to
reuse it multiple times.

Importing :

 Importing a component - import Gallery from './Gallery.js';

 Importing dependencies - import axios from 'axios';
 Importing hooks - import {useState} from 'react';

Exporting :

We can export a component as follows :

export default function App() {

return (
<Gallery />
);
}

3.3.5 How react works (JSX and Babel):

JSX stands for JavaScript XML. JSX allows you to write html inside javascript. It is this
feature that makes react so powerful and clean.
12
An expression in JSX :

const myElement = <h1>Current version of React is {9+9}.</h1>;

A block of html in react can be written as :

const myElement = (
<div>
<p>First paragraph.</p>
<p>Second paragraph</p>
</div>
);

3.3.6 States in React

In react, any change made by the user is considered as a change in state. A state contains
information about the component in which it is present. Whenever we change the state of
a component, it renders again with a new state. The setState() constructor is used to
change the state of a component. For example, if we type something in the search bar,
with each letter the state is changing and the component has to re-render. Example :

Class MyClass extends React.Component {

constructor(props) {
super(props);
this.state = { attribute : "value" };
}
}

3.3.7 Props in react

Props is a shorthand notation for properties. It works similar to HTML attributes. A prop
in react may seem similar to state but the major difference between a state and a prop is
that a prop can be passed from a parent component to the child component. This process
is known as 'prop drilling'.

Eg:- Adding an attribute called 'brand' to 'Vehicle' component :

const Ele = <Vehicle brand="Tata" />;

Passing the prop to the component : function Truck(data) {

return <h1>The price is : { data.price }</h1>;
}

Props State
Read-only Mutable
Passed from parent Local to component
Table 3.3: Props vs State in react

13
3.3.8 React Hooks
React version 16.8 introduced hooks. It was done to replace the class components. Hooks
allow us to access the state of a component and other react features. States can be
changed via hooks. It also helps us to 'hook' into the lifecycle methods. The programmer
needs to import the hook before using it. Hooks can be imported by the following line of
code :

3.5 State Management using Context API

In React applications, managing state efficiently is crucial for maintaining clarity and
ensuring smooth data flow. The Context API is a powerful built-in feature that facilitates
state management by enabling the sharing of data across multiple components without the
need to pass props manually at every level. Unlike external libraries such as Redux,
which centralize the entire application's state in a single store, the Context API provides a
lightweight and flexible approach to state management by creating a global context. This
context serves as a centralized repository from which any component in the component
tree can access state values or dispatch updates. The Context API operates by establishing
a context provider that encapsulates the components requiring access to shared state.
Components nested within this provider can consume the context values directly,
simplifying the management of state dependencies and improving code readability. One
of the key advantages of using the Context API is its alignment with React's
unidirectional data flow principle. It ensures that state changes propagate predictably
through the component hierarchy, which aids in scaling applications while preserving
maintainability.

The flow control of context api

14
3.6 Routing
A frequently used tool for making custom routes in React is React Router. It allows
switching between multiple pages made by various React components, permits changing
the browser's URL and maintains UI synchronization with the URL.

Installation: npm install react-router-dom

Importing:

import {
BrowserRouter as Router, Routes,
Route, Link
} from 'react-router-dom';

Usage: This application has five main routes. Home, Auth, Posts, Search, :id. The exact
paths are as follows:

Working of react router

3.7 The Backend implementation

To quickly set up a basic Express.js application, use the following command:
npm create bkite@latest

This command generates a project folder pre-configured with the essential tools and
frameworks needed for building a robust backend using Express.js. It sets up the project
structure and automatically installs the necessary dependencies for developing a REST
API.

Frameworks Included:

15
 Express.js: A fast and minimal web framework for Node.js used to build server-side
applications and APIs.
 Mongoose: An Object Data Modeling (ODM) library for MongoDB, which helps
manage schema definitions, validation, and database interaction in a structured way.
 dotenv: Loads environment variables from a .env file into process.env, allowing
sensitive configuration (e.g., database credentials) to be managed outside of the
source code.
 CORS (Cross-Origin Resource Sharing): A Node.js package that enables the
backend server to handle requests from different domains, which is especially useful
when your frontend and backend are hosted separately.

3.7.1 Folder Structure Generated by bkite

folder structure

The bkite CLI tool generates a well-organized folder structure that follows modern
backend development best practices. Each folder is separated by responsibility, making
the codebase clean, scalable, and easy to maintain.

3.7.2 Connecting to MongoDB Atlas

Inside config/db.config.js (or directly in server.js), we connect MongoDB Atlas using
Mongoose:

16
import mongoose from "mongoose";

const connectDB = async () => {

try {
const connectionInstance = await
mongoose.connect(process.env.DATABASDE_URI);

console.log(`MongoDB connected: ${connectionInstance.connection.host}`);

} catch (error) {
console.log("MongoDB connection error:", error);
process.exit(1);
}
};

export default connectDB;

3.7.3 Express App Setup

The app.js file is pre-configured to use important middleware and route registration:

import express from "express";

const app = express();
import cors from "cors";
import exampleRouter from "./routes/example.routes.js";
import globalErrorHandler from "./middlewares/globalErrorHandler.js";

app.use(cors({
origin: process.env.CORS_ORIGIN,
credentials: true
}));
app.use(express.json({limit: "16kb"}))
app.use(express.urlencoded({extended: true, limit: "16kb"}));

app.get("/", (req, res) => {

res.send("Hello from the first server!");
});
app.use("/example", exampleRouter);
app.use(globalErrorHandler);

export {app};

17
3.7.4 Create Schema & Models
import mongoose from "mongoose";

const userSchema = new mongoose.Schema({

name: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true }
}, { timestamps: true });

export default mongoose.model("User", userSchema);

3.7.5 Add Routes & Controllers

import express from "express";
import { registerUser, loginUser } from "../controllers/user.controller.js";

const router = express.Router();

router.post("/register", registerUser);
router.post("/login", loginUser);

export default router;

3.7.6 Run the Project

Make sure .env is configured with:

PORT=5000
DATABASE_URI=<mongodb_connection_string>
CORS_ORIGIN=http://localhost:3000
JWT_SECRET=someverysecretkey

Then run the command:

npm install
npm start

3.8 MongoDB and Mongoose

 MongoDB: MongoDB is a popular NoSQL database that stores data in a flexible,
JSON-like format called BSON (Binary JSON). Unlike traditional relational
databases, it does not require predefined schemas, making it ideal for handling
unstructured or rapidly changing data. MongoDB is widely used for its scalability,
performance, and ease of use in modern web applications.

18
 Mongoose: Mongoose is an Object Data Modeling (ODM) library for MongoDB and
Node.js. It provides a schema-based solution to model application data, offering built-
in type casting, validation, and query-building features. Mongoose helps developers
interact with MongoDB more efficiently by structuring data and simplifying CRUD
(Create, Read, Update, Delete) operations.

Some features of MongoDB are:

 Schema-less NoSQL
 Data stored in the form of json objects.
 No fixed structure.
 Fast as it is written in C++.
 Reduces complexity of deployment.

This project has 3 models: The user model and the post model and follow

3.8.1 User model:

The User model handles everything related to user registration, login, and identity
verification. It ensures secure storage of user data and also supports features like profile
customization and token-based authentication.

User model

19
3.8.2 Post Model:
The Post model is built to handle user-generated posts. Each post can contain text
content, an optional image, and metadata like likes and timestamps. It also tracks which
user authored the post and which users have liked it.

Post Model

3.8.3 Follow Model

The Follow model is responsible for managing the following relationships between
users—i.e., who follows whom. It helps implement social features like followers,
following lists, and privacy controls through request statuses.

20
 Follow model

3.9 Controllers
The logic for sending data from the backend to be displayed in the frontend is handled by
the controllers. The user requests to perform certain actions through API. The API sends
the request to the backend where the controllers handle the logic to send data to the
frontend. In this website we have two controller files. One to handle the requests related
to a particular post and the other to handle the requests regarding security.

controllers

The Post Controller

It handles all the requests related to a particular post. The requests include :

21
Controllers]

1. Getting a post:

This function is called when the website is loading and all the available posts have to be
displayed at once. Latest posts from the following list of the current user is fetched.

Getting a post

2. Creating a post

Creating a Post

This code defines an asynchronous function createPost that handles the creation of a new
post. It expects a request (req) and a response (res) object as parameters. It extracts the
userId, description, and picturePath from the request body. It creates a new Post object
with the extracted and retrieved data, including the user's name, location, and profile

22
picture. The new post is saved to the database using post.save(). Finally, it fetches all
posts from the database using Post.find() and sends the resulting posts as a JSON
response with status 201 (Created). If any errors occur, it sends a JSON response with
status 409 (Conflict) and an error message.

3. Deleting a post

We are simply extracting the id from the request and then finding it inside the database
and deleting it. The method used is 'findbyIdAndRemove' which is a standard function
provided by mongoose.

23
 CHAPTER 4: RESULT AND ANALYSIS
4.1 Login and Registration

Registration Page

When the user has filled in all the information, they can click on the registration page
which will send the data in JSON format along with the JWT authentication to the
MongoDB running in the backend server. The user will then be redirected to the login
page where they can login using the registered email address and password.

24
 Log in page

If the user is not already registered in the server they can click on the "Don't have an
account? Sign Up." link and they will then be directed to the registration page.

4.2 Home Page

Clean looking homepage in Light Mode

The homepage contains all the information with all the widgets. The user can view the
options they have to navigate on the left side. Ads and follow suggestions can be seen on
the right side. The user can write posts. They can see and like others' posts as well. They
can also follow friends using the follow friend button. It is a clean looking UI with the
option to change to dark mode as well.

Logout option

There is the logout option. This will deauthorize the users log in id from the backend
server and change the value to null. logout method takes no arguments and clears the

25
currentUser data stored locally automatically. Create this function in the UserLogin
component and call it in the onClick attribute of the logout button.

Homepage in Dark mode

The dark mode looks clean with contrasting colours to help viewers to distinguish the text
and everything. It is neat little featured added as most of the modern applications
nowadays has this feature

4.3 Creating and Searching a post

For creating a post, the user needs to enter the post body, they can also select images and
also location if they want.

Post creation design

The Post button sends a request to the database to save the new post and the user
credentials through the API. The below figure is showing how the post look like.

View of the post

26
4.4 Performance analysis
To ensure code quality and maintainability, a comprehensive linter check was conducted
across the entire codebase. This process helped verify that the project adheres to industry-
standard coding practices and formatting conventions. The linter tool used (such as
ESLint) was configured to detect syntax errors, enforce stylistic consistency, and
highlight potential bugs or anti-patterns. No linter errors or warnings were detected,
indicating that the code is well-structured and conforms to the defined guidelines.

In addition to the linter check, the following performance optimizations were also
applied:

 Frontend Optimization: React components were analyzed to ensure efficient

rendering using memoization (React.memo, useMemo, and useCallback) where
appropriate.
 Backend Optimization: API routes were tested for response time and optimized
by minimizing unnecessary database queries and implementing proper indexing in
MongoDB.

4.5 Final list of dependencies

The package.json file

The package.json file stores the list of all the dependencies along with their version in
json format which is a list of key-value pairs.

27
4.6 Mobile View
The entire social media application is completely responsive on any device. The view
from an Nothing device is shown.

The app in mobile view

28
 CHAPTER 5: CONCLUSION
5.1 Conclusions
The primary objective of this training was to gain a comprehensive understanding of
ReactJS, MongoDB, and ExpressJS, and to develop a web application capable of
performing CRUD operations, which were subsequently tested using Postman within a
three-layered architecture framework.

This project explores the MERN stack and its capabilities through the development of a
fully functional social media web application. The study includes a detailed examination
of the history of JavaScript, the foundational technology of the MERN stack, as well as
the core concepts and methodologies underlying each individual component. By
leveraging a NoSQL database engine, the advantages of these technologies and their
seamless integration to create a cohesive backend and frontend application are
demonstrated.

Furthermore, step-by-step implementation guidelines for the social media application are
provided, illustrating the practical application of theoretical concepts to address real-
world challenges. Overall, the project was successful in meeting its objectives within the
given timeframe, producing an application that satisfies essential functional requirements
of a social platform. Through the completion of this project, it was evident that effective
development extends beyond coding alone. Consideration of the end-user experience is
paramount, necessitating a consistent and intuitive interface to facilitate seamless
navigation. Additionally, writing clean and maintainable code is critical to ensure ease of
understanding and debugging by other developers. Emphasis should also be placed on
code reusability to support future enhancements. Continuous learning and incorporating
feedback remain essential for ongoing improvement.

5.2 Future Work

1. Through a graphical web user interface, users may interact with each other through
chats while taking use of a secure login and authorisation approach.

2. Users can share their own own stories which can stay active for 24 hours

3. Adding the option of commenting on a particular post.

4. Adding 'related posts' section. This section will have all the posts related to the original
post by location. To identify the location we will use either the title of the post or the tags
provided by the user. Location refers to the country / continent.

5. Providing a separate and better 'compose' page.

6. The ability for users to add videos in posts.

29
 CHAPTER 6: REFERENCES
1. GeeksforGeeks. (2025). MERN Stack. Retrieved from
https://www.geeksforgeeks.org/mern-stack/

2. GeeksforGeeks. (2024). Getting Started with MERN Stack. Retrieved from

https://www.geeksforgeeks.org/getting-started-with-mern-stack/

3. Mozilla Developer Network (MDN). Express Web Framework. Retrieved from

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs

4. Mozilla Developer Network (MDN). React – A JavaScript library for building user
interfaces. Retrieved from https://developer.mozilla.org/en-
US/docs/Learn/Tools_and_testing/Client-
side_JavaScript_frameworks/React_getting_started

5. MongoDB Manual. MongoDB Documentation. Retrieved from

https://docs.mongodb.com/manual/

6. Node.js. Node.js Documentation. Retrieved from https://nodejs.org/en/docs/

7. ChatGPT. Retrieved from https://chatgpt.com/

8. YouTube. Retrieved from https://www.youtube.com/

9. Wikipedia. MERN stack. Retrieved from https://en.wikipedia.org/wiki/MERN_stack

10. W3Schools. MongoDB Tutorial. Retrieved from

https://www.w3schools.com/mongodb/

30