A

CAPSTONE PROJECT REPORT

ON

MERN Stack social media app

PROJECT WORK SUBMITTED IN PARTIAL FULFILLMENT OF THE
REQUIREMENTS FOR THE AWARD OF DIPLOMA.
SUBMITTED BY
Shufi Patel
UNDER THE GUIDANCE OF

Mrs. Namrata Thakur

DEPARTMENT OF COMPUTER
ENGINEERING
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Academic Year (2023-2024)

 CERTIFICATE

This is to certify that Ms. SHUFI PATEL from PRAVIN PATIL COLLEGE OF
DIPLOMA ENGINEERING AND TECHNOLOGY institute having Enrollment no:
2105630110 has completed semester V project report having title MERN STACK SOCIAL
MEDIA APP during the academic year 2023 – 2024.
The project completed in a group consisting of three persons under the guidance of the
faculty Guide.

Project Members
1 SHUFI PATEL

Mrs. Namrata Thakur

Name & Signature of Guide
Contact No:9833082266
 Acknowledgements

I express my sincere thanks to the Principal Mrs. R.B Patil, who has given me the
opportunity to pursue my Diploma in COMPUTER ENGINEERING department,
also express my thanks to H.O.D Mrs. Manjula Athani and other staff of the
Computer Engineering department. I would like to thanks my guide Mrs. Namrata
Thakur for her encouragement and guidance, which helped me in completing the
project. Finally I would like to thank my colleagues, team mates and friends who
helped me in completing the Project successfully.

I would like to express my heartfelt gratitude to my parents, teachers, team mates and
friends for their direction, motivation and selfless support.
Abstract
The MERN Stack Social Media App is an innovative web application developed

using the MERN (MongoDB, Express.js, React.js, Node.js) technology stack. The

application aims to create a dynamic and interactive social media platform where

users can connect, share content, and engage in meaningful interactions. Leveraging

the power of modern web technologies, the app provides users with a seamless and

responsive experience, allowing them to post, like, comment, and interact with

various types of media content.

Content Page
Chapter 1. Introduction to project 8

1.1. Current scenario 8

1.2. Problems in existing system 8
1.3. Solution 8
1.4 PURPOSE DIAGRAM 10
Chapter 2. Literature Review 11

Chapter 3. Proposed Methodology 13

Chapter 4. Action Plan 15

Chapter 5. References And Bibliography 17

5.1. References 17
5.2. Bibliography 18
18
Chapter 1. Introduction to project

1.1. Current scenario

Social media has become an integral part of modern communication, with

billions of users worldwide. In this study, we present the design and
development of a social media app built using the MERN stack

1.2. Problems in existing system

Many social media applications require real-time features such as instant
messaging, notifications, and live updates. Implementing real-time
functionality can be challenging, especially in a MERN stack application.
Developers need to use technologies like WebSockets or server-sent
events to achieve real-time communication between clients and servers.

1.3. Solution

In the existing MERN (MongoDB, Express.js, React.js, Node.js) stack social

media application, enhance user engagement and experience by implementing
real-time features. Integrate WebSocket technology to enable instant messaging,
notifications, and live updates, allowing users to interact seamlessly. Utilize
MongoDB's flexible schema and scalability to efficiently store diverse data
types, including user profiles, posts, images, and comments. Implement
Express.js for robust API development, ensuring secure data transmission
between the frontend and backend. Utilize React.js to create a responsive,
intuitive user interface, enhancing the app's usability. Leverage Node.js for high-
performance server-side scripting, ensuring quick data processing and retrieval.
Implement user authentication and authorization mechanisms, ensuring data
privacy and security. Additionally, optimize the application for mobile
responsiveness and employ caching techniques to enhance loading speed,
providing users with a seamless, dynamic, and engaging social media experience.
1.4 PURPOSE DIAGRAM
Experiment No 2 : Literature Review
Project Title: MERN stack social media app

 Research paper 1:

Title: Social Sphere: A MERN Stack Social Media App

Author : Asif Malik, Junaid Nazir, Md Dilkhush, Gourav Gupta.
Abstract : In today\'s ever-evolving tech industry, there is a significant
surge in the demand for full-stack developers. Reports suggest that
skilled professionals in this field, particularly in the United States, can
expect remarkable average profits, with figures reaching as high as
$110,770, according to Real. A full-stack developer is an individual who
possesses the technical expertise to handle both the front-end and back-
end aspects of dynamic websites and internet-based applications. Web
development often revolves around frameworks like the LAMP stack
(Linux, Apache, MySQL, PHP/Perl) and Java (Java EE, Spring), which
incorporate a combination of programming languages. Additionally,
JavaScript plays a crucial role in enhancing web experiences, enabling
developers to leverage the MERN stack (MongoDB, Express.js,
React.js, and Node.js). This comprehensive technology stack empowers
developers to effectively address user interface requirements and server-
side operations. The soaring demand for full-stack developers
underscores the need for versatile professionals who can seamlessly
navigate the entire development process. Their ability to handle diverse
technologies and programming languages enables them to build robust
and adaptable web applications. As technology continues to advance, the
role of full-stack developers becomes increasingly indispensable in
driving innovation and delivering top-notch web solutions.
 Research paper 2:

Title: Social Media Web Application using MERN

Author: Mahamat Ali Hisseine
Abstract:
These days, the demand for full-stock developers is growing faster
than ever before. These days, the demand for full-stock builders is
growing faster than ever before. According to a report by Real, the
best calls from the US come with an amazing average profit of $
110,770. Time Period Full Stack Developer refers to a person who
can technically work before and after a dynamic Internet site or
Internet-based programs. Web enhancement is widely built on the
LAMP stack (Linux, Apache, MySQL, PHP, or Perl) and Java (Java
EE, Spring), which includes some PC languages. JavaScript helps
improve the Internet through the visibility of the MERN stack, with
the ability to capture every user aspect and server dimension. Mern
has 4 technologies: MongoDB, Express.js, React.js and Node.js.
 Research paper 3:
Title: Toddler – A Social Media Web Application.
Author: Aman Singh.
Abstract: This paper presents the potential for blockchain based
solutions to disrupt the world of social networking. We offer Ushare, a
user centric blockchain supported social media network that enables
users to control, trace and claim ownership of every piece of content
they share. Harnessing peer-to-peer capabilities of the blockchain
technology allows a truly decentralized, secure, anonymous and
traceable content distribution network. Ushare consists of four key
components: the blockchain, a hash table with encrypted content shared
by a user, a Turing complete relationship system to control the the
maximum number of shares performed by user's circle members and a
local personal certificate authority that manages the user's circles and
encrypts data to be shared before it is broadcasted to the network..

1
Chapter 3. Proposed Methodology

The proposed methodology for developing a social media app using the
MERN (MongoDB, Express.js, React, Node.js) stack involves several key
steps. First, the backend development using Node.js and Express.js will
focus on building robust APIs and handling user authentication and
authorization using MongoDB for data storage. Concurrently, the
frontend development will be undertaken using React, creating responsive
and interactive user interfaces that enable seamless user experiences. The
integration between the frontend and backend will involve RESTful API
calls, ensuring real-time data updates without page refreshes. The
development process will be iterative, incorporating continuous testing
and debugging. Additionally, user feedback and testing will guide the
iterative refinement of features, ensuring a user-friendly and engaging
social media platform. Deployment will be done using cloud services, and
the app will be optimized for scalability, security, and performance,
ensuring a reliable and efficient social media application.

2
Chapter 4. Action Plan
DATE
SR. PERFORMED
TASK PERFORMED
NO BY
FROM TO
SHUFI PATEL
1 27/07/23 01/08/23 Formation of group

SHUFI PATEL
2 03/08/23 08/08/23 Searching of the project topic

SHUFI PATEL
Collect research papers on the
3 10/08/23 15/08/23 topic selected

SHUFI PATEL
Explain the topic and research
4 17/08/23 22/08/23 paper to the project guide

SHUFI PATEL
5 24/08/23 29/08/23 submit the research paper

SHUFI PATEL
6 31/08/23 05/09/23 Prepare the portfolio

SHUFI PATEL
7 07/09/23 12/09/23 Submit the portfolio

SHUFI PATEL
8 14/09/23 19/09/23 Prepare the project proposal

Submit the project proposal SHUFI PATEL

9 21/09/23 26/09/23 and weekly diary

SHUFI PATEL
10 28/09/23 03/10/23 Submit the project synopsis

SHUFI PATEL
Give presentation on the
11 05/10/23 10/10/23 project topic

SHUFI PATEL
12 12/10/23 17/10/23 Submit the weekly diary report

3
Chapter 5. References And Bibliography

5.1. References

[1] Brad Traversy. (2021). MERN Stack Front To Back: Full Stack React,
Redux & Node.js. [Online Course]. Udemy. URL:
https://www.udemy.com/course/mern-stack-front-to-back/

[2] Flanagan, D. (2011). JavaScript: The Definitive Guide. O'Reilly Media.

4
5.2. Bibliography

Freeman, E., Robson, E., Bates, B., & Sierra, K. (2004). Head First Design
Patterns. O'Reilly Media.

Gackenheimer, M. (2013). MongoDB Applied Design Patterns. O'Reilly

Media.

Ongaro, D., & Ousterhout, J. (2014). In Search of an Understandable

Consensus Algorithm. In USENIX Annual Technical Conference (Vol. 14,
pp. 305-319).

Subramaniam, V. (2012). Functional Programming in JavaScript. O'Reilly

Media.