Developing a Social Platform using MERN Stack

1st Krutika Desai 2nd Dr. Jinan Fiaidhi

MSc Computer Science Department of Computer Science
Lakehead University Lakehead University
Ontario, Canada Ontario, CANADA
[email protected] [email protected]

Abstract—This is the era of internet and there are a lot of and much more in an unaltered, content controlled environ-
Social Media platforms out there that facilitate the sharing of a ment.
vast variety of user generated content. LinkedIn is a business
and employment oriented social platform whereas Twitter is
used to share recent news trends and updates. Pinterest is about
II. O BJECTIVE
discovering new content and ideas while Facebook is more about MERN Stack is a web development framework that uses
catching up with friends and family. These networks and virtual
communities cast a tremendous amount of influence on their MongoDB, ExpressJS, ReactJS and NodeJS as its four main
users. Here we have a similar content-oriented platform called technologies. Performance is much more important now be-
Social. It is designed and built for the users to connect and cause of the explosive growth in the number of electronic
share digital content (like text, images and/or gifs) related to devices with real-time and Internet capabilities. Consequently,
community, social, healthcare and welfare services. MERN stands the web development sector has experienced rapid expansion.
for MongoDB, ExpressJS, ReactJS and NodeJS (the four key
technologies that make the stack) and is used to built this fully The most popular web development frameworks over the past
responsive web application in conjugation with other APIs and few years have been based on conventional technologies like
tools. Servlets, ASP.NET, and PHP. The performance expectations of
Index Terms—MongoDB, ExpressJS, React, Node, Backend, today’s consumers are not met by these technologies, despite
Frontend, dependencies, Social Media, APIs, SPA (Single Page their widespread use and lengthy histories of research and de-
Application)
ployment. Recently, the MERN stack was developed because
I. I NTRODUCTION of its consistency and simplicity to address this performance
issue [3].
Interactive Web 2.0 Internet-based applications make up so-
The four technologies employed here in MERN stack are
cial media platforms. Simply put, they support the proliferation
all Javascript based in addition to being high-performance and
of online social networks by tying a user’s profile to those of
customizable. Therefore, the backend, frontend, and database
other persons or organisations. Through online communities
can be controlled easily if one knows JavaScript (and JSON),
and networks, social media platforms enable the development
which makes the technology a very popular choice. The
and dissemination of user-generated content that consists of
goal here is to utilize the fore-mentioned technologies to
knowledge, ideas, interests, and other kinds of expression [1].
design and implement a fully functional, user-friendly social
Social Media is not simply an important tool for communi-
platform. This web application will not only demonstrate the
cation, connecting people locally and globally, it also lets peo-
deployment of these tools but will also provide as a gizmo for
ple to share, create, and spread information. These platforms
further research along the lines of network formation, online
also cast an immense influence on consumer’s purchase habits
behaviour, social influence and much more.
and decisions through their product reviews, marketing tactics
and advertising algorithms. Businesses utilize social media
III. L ITERATURE R EVIEW
to interact with their target market, build brand awareness,
create leads, increase sales, and make money. Businesses may Facebook and Twitter-like social media platforms are start-
effectively target their advertising because to social networks’ ing to have a significant impact on academic publications as
exclusive access to members’ most sensitive information, well as corporate practises. Over the past few years, there
including their interests, hobbies, and frequented areas. It have been numerous academic study papers on the usage of
allows companies to not only engage with the customers on social media in business. Twitter has been studied to see what
a personal level but also influence them with the appropriate role it plays in a range of marketing contexts, from promoting
content, triggering desire and formulating purchase patterns brands and enterprises (Greer and Ferguson 2001) to having an
[2]. impact on political campaigns (Towner and Dulio 2012). The
Here we develop a fully functional and user-friendly social most widely used social media platform, Facebook, has been
platform that does not include any of the business models or studied in a variety of areas, like how it affects a company’s
customised advertising. It can be used as a tool for various or brand’s value (Plangger, 2012) to fundraising campaigns
studies on Influence, social network formations, homophily (Vericat 2010) [4].
 Social media platforms are among the simplest and most
effective ways to disseminate information because they are so
widely used and because access to the internet is so quick
and inexpensive. As of March 5, 2020, the top 100 videos
on YouTube with the keyword ”coronavirus” had had more
than 165 million views collectively, with 85% of those views
coming from news channels, according to a recent study by
Basch et al. This clearly demonstrates how the accessibility,
influence and reach of Social Media effects all major aspects of
our life. Social networks work in fascinating manner, growing
more complex by the day. Using the concept of Homophily,
social networks facilitate a formation of clusters between
similar individuals across the world. These miniature networks
usually have influencers that trigger heard behaviour among
the users and active sharers that stimulate a chain or reactions.
By examining the sentiment occurring in a given social media
content and keeping track of a user’s information sharing
behaviour, one can eventually decipher customer behaviour Fig. 1. 3 Tier MERN Architecture.
and buying habits and by extension even predict and formulate
group patterns.
This is how news go viral, products go trending and exactly A single-page web application (SPA) or website interacts
why social media marketing is equivalent to a gold mine for with the user and dynamically updates the current web page
companies right now. That being said, we now know how rewriting the new or modified data from the web server, in
social media platforms are the single most effective medium contrast to the traditional practise of a web browser loading
to influence people and promote ideas globally. entirely new pages. The webpage will transition more quickly
to boost the appearance of a native app.
IV. F RAMEWORK (MERN) As opposed to the traditional way, all essential HTML,
MERN stack is a framework used for creating websites JavaScript, and CSS code is either fetched by the browser with
(web app development). MongoDB, ExpressJS, ReactJS, and a single page load or the required resources are dynamically
NodeJS make up its functional components. The specific role updated and loaded to the webpage as needed, generally in
of each of these elements while creating a web application are reaction to user activities. A SPA never refreshes the page [8].
listed below: Even using the tools mentioned above, it is difficult to build
a high-performance app that is fast, responsive, user-friendly
• MongoDB: The application data is stored in this by design and secure, maintaining user integrity and security.
document-oriented, No-SQL database.
• NodeJS: This is the JavaScript runtime environment that V. BACKEND (S ERVER - SIDE )
is used to run the JavaScript code on the machine itself, Building websites and web apps has always been done
instead of a browser. using server-side rendering, also referred to as back-end web
• ExpressJS: It is a framework that sits atop NodeJS and development. When we access a page, we send a request for
is used to create a website’s backend using NodeJS func- data to the server, which processes it and sends back a response
tions and structures. NodeJS was created to run JavaScript to the browser.
on computers, not to create websites, so ExpressJS was All the activities required to build an HTML page that the
created to fill that gap. web browser can understand are carried out on the remote
• ReactJS: It is a library that Facebook built. It is used server that houses the website or web application when a web-
to build the UI elements that go into a single page web site renders server-side. This entails processing any required
application’s user interface. logic as well as information queries from databases for that
As shown in Fig 1, the user interacts with the ReactJS web application.
UI components in the front-end of the application, which is While it waits for the distant server to finish processing the
situated in the browser. The backend of this application, which request and provide the response, the web browser on the other
is located on a server, is served by ExpressJS, which is built end sits idle. When a response is sent, web browsers interpret
upon NodeJS [7]. it and show the material on the screen.
A request to change data is sent to the Express server, which
is built on NodeJS, after any interaction. When necessary, VI. F RONTEND (C LIENT- SIDE )
Express fetches information from the MongoDB database and Client-side rendering, often known as front-end develop-
sends it to the application’s front end, where it is shown to ment, is a new style of site rendering that is employed in
the user. contemporary apps. JavaScript, which is now the de facto
standard web language, is used to render the content on React acts as the MVC’s ”V,” or view. JavaScript, HTML,
your computer as opposed to a distant web server in client- and CSS are used to create the Client layer (View), which is
side rendering. In actuality, this indicates that a browser built using the ReactJS framework. To access the features of
is responsible for generating the HTML output of the web our application, the user will have to interact with this level
application and that a server is only needed to provide the of the architecture.
raw web application. Additionally, it shows that a piece of the
presentation logic—the reasoning used to create a web page
and display it to the user on the screen—is handled on the
client-side.
With the introduction of JavaScript libraries like Angular,
React, and Vue, client-side rendering became more common.

VII. MVC F RAMEWORK

In direct terms, the backend is the server or, more lately,
the cloud, while the frontend is the browser. While the front-
end focuses on user interfaces, sound design, and the visual
components of developing apps, the back-end is concerned
with making websites and web applications render on the
client-side. The creation of services that execute business Fig. 3. MVC Architecture
logic and gain access to additional resources, like databases,
file servers, cloud services, APIs, and more, falls under the
VIII. D EPENDENCIES
purview of the back-end.
User interfaces, data, and controlling logic are frequently A software dependency is a reusable code library or package
implemented using the software architecture framework known that allows quick software delivery as it allows developers
as MVC (Model-View-Controller). It emphasises a division to building on previous work. The JavaScript runtime en-
between the business logic and appearance of the application. vironment Node.js uses the Node Package Management, or
A better division of labour and better maintenance are made npm, as its default package manager.It is made up of the npm
possible by this ”separation of concerns” [9]. command-line client and the npm registry, an online repository
• Model: Manages data and business logic.
for free and paid private packages. The client is used to access
• View: Handles layout and display.
the registry, and the npm website is used to browse and search
• Controller: Routes commands to the model and view
for the packages that are currently available [11].
parts. A. Server-side Dependencies
• mongodb - The MongoDB Node.js driver enables
Node.js applications to connect to MongoDB and operate
with data using an asynchronous API that makes use of
Promises or conventional callbacks for interaction [12].
• mongoose - A link between MongoDB and the Node.js
JavaScript run-time environment is made possible via the
object-oriented JavaScript programming package called
Mongoose [13].
• nodemailer - A Node.js tool called Nodemailer makes
Fig. 2. 3-Tier Architecture sending emails simple. It is a single module with no
dependencies, enables embedded attachments in unicode,
and has SMTP and OAuth2 authentication for security
A. MVC Architecture in MERN Stack [14].
MongoDB creates the database layer. The data component is • nodemon - Nodemon is a programme that facilitates the
defined by the Mongoose models. This stores all the essential creation of Node.js-based apps by relaunching the node
data that the application requires in order to run. application whenever a file change in the directory is
Express & Node.js are used to build the Business Logic identified. It is a node wrapper substitute [15].
Tier, and they handle all functional programming (controller). • jsonwebtoken - A concise, URL-safe method of encod-
The application server that will serve as a conduit for commu- ing claims that need to be exchanged between two parties
nication between the client and database is represented by this is the JSON Web Token (JWT). In a JSON Web Token
layer. The React components will be delivered to the user’s (JWT), the claims are encoded as a JSON object. This is
device by this layer, which will also take user HTTP requests used as the plaintext of a JSON Web Encryption (JWE)
and reply appropriately. structure or as a payload of a JSON Web Signature
 (JWS) structure allowing the claims to be encrypted, rising computational power [23].
digitally signed or integrity protected with a Message
Authentication Code (MAC) [16]. B. Client-side Dependencies
• googleapis - (Google APIs Node.js Client) is a library for • axios - Axios is a promises-based HTTP client library.
leveraging Google APIs with Node.js. The API endpoints It facilitates CRUD activities and the delivery of asyn-
are produced automatically, and authorization and authen- chronous HTTP requests to REST endpoints. This REST
tication using OAuth 2.0, API Keys, and JWT tokens are endpoint/API could be our own backend Node.js server
supported. For the purpose of user verification, we send or an external API like the Google API, GitHub API,
emails to newly registered users using Google APIs and and so on. The most often API queries are get, post, and
OAuth2 playground. delete because we always need to retrieve data to display
• express - Express is a straightforward and adaptable on our applications as well as add and remove data from
Node.js web application framework that offers a com- and to our API [24].
prehensive selection of functionality for both web-based • emoji-picker-react - An emoji picker component for
and mobile applications. It facilitates the creation of a React applications [25]. We provide this for the user to
strong API rapidly by providing access to a wide range add emojis in texts, comments and posts.
of HTTP utility methods and middle-ware [18]. • file-saver - The client-side file saving option is File-
• express-fileupload - Uploading and downloading files is Saver.js, which is ideal for web applications that produce
among the key features of any web app. Here, we’ll client-side files [26].
use the npm package express-fileupload to handle file • formik - Formik maintains a record of the state of a
uploads, and the express library’s res.download() function form and then makes it accessible via props to a few
will take care of downloads. The middleware is supplied reusable methods and event handlers like handleChange,
to the app as express-fileupload [19]. handleBlur, and handleSubmit. To determine which field
• dotenv -Dotenv is a zero-dependency module that loads needs updating, these handlers look at the name or the id
process.env with environment variables from.env files. attribute [27].
The Twelve-Factor App technique is used to store set- • js-cookie - Cookies are little text files that contain data
tings in the environment apart from code [20]. We that are saved on a user’s computer. After delivering
store the unpublished environment variables here like a web page to a browser, a web server cuts off com-
the PORT, the DATABASE URL, TOKEN SECRET, munication with the client and completely forgets about
BASE URL, EMAIL (through which verification emails the user. To address this issue, cookies were created. A
are sent), MAILING ID MAILING SECRET (Google straightforward, lightweight JavaScript API for managing
cloud API credentials), MAILING REFRESH MAIL- cookies is called JavaScript Cookie. It is compatible with
ING ACCESS ( OAuth 2.0 Playground Refresher and ac- all browsers, supports AMD/CommonJS and ES modules,
cess tokens), CLOUD NAME, CLOUD API KEY and is RFC 6265 compliant, and allows for custom encoding
CLOUD API SECRET (for access to Cloudinary to and decoding. It also takes any character [28].
store and access media) that is accessed from the .env • react - React is a JavaScript library used to create user
file in our code. interfaces. Only the functionality required to define React
• cors - A server can specify any origins (domain, scheme, components is contained in the react package. A React
or port) other than its own from which a browser should renderer, such as react-dom for the web or react-native
be able to load resources using the Cross-Origin Resource for native applications, is generally used in conjunction
Sharing (CORS) protocol, which is based on the HTTP with it. When the data changes, React quickly updates
header. As a result, we can run the server and client on and renders the appropriate components. [29].
distinct domains by separating them. • react-dom - The server and DOM renderers for React are
• cloudinary - A potent media API is called Cloudinary. accessible through this package. It is meant to be used
The cloudinary package makes it easier to create transfor- in conjunction with the react package, which contains
mation URLs and offers unique elements and directives the basic React components. If necessary, the react-dom
that make it simple to incorporate assets into our React package offers DOM-specific functions that can be used
application. We can quickly and simply integrate our as a backdoor to leave the React model [30].
application with Cloudinary, as well as easily optimise, • react-router-dom - An npm package called React Router
transform, upload, and manage the assets in our cloud, DOM makes it possible to integrate dynamic routing into
thanks to the Cloudinary Node SDK [22]. web applications. It can be utilised to display pages and
• bcrypt - Niels Provos and David Mazières’ password- enable visitor navigation. It is a complete client- and
hashing function, bcrypt, which was first presented in server-side routing library for React. Building single-
1999 at USENIX, was built on the Blowfish cypher. page applications, or programmes with numerous pages
Bcrypt is an adaptive function that can be slower over or components but no page refresh since the content
time when increased the number of iterations, making it is dynamically downloaded from the URL, requires the
more resistant to brute-force search assaults even with use of React Router Dom. React Router Dom makes it
 possible for this procedure, which is known as routing the modelling of intricate, interrelated validations or value
[31]. transformations. While significantly influenced by Joi,
• react-easy-crop - A free open-source JavaScript library is Yup’s API is leaner and was developed with client-side
available under the react-easy-crop package. It supports validation as its main use-case. Yes, it splits the functions
video formats supported by HTML5 as well as picture of parsing and validating into different processes. Data
formats (JPEG, PNG, and GIF) as a URL or base64 is transformed by cast() while input shape accuracy is
string. It works well for modifying images and movies verified by validate. Each can be carried out either jointly
in front-end applications. It supports drag, zoom and (as with HTML form validation) or individually (such as
rotate interactions, provides crop dimensions as pixels deserializing trusted data from APIs) [38].
and percentages and supports any images or video format
as url or base 64 string supported in HTML5 [32]. IX. A PPLICATION D ESIGN
• react-moment - It is a lightweight JavaScript date li- The Social Media Platform we are building here is a fully
brary for parsing, validating, manipulating, and format- responsive and functional web application where a user can
ting dates [33]. It is a a better way to calculate date and upload or view image or text based content and connect with
time for our project since we utilize timestamps in several other users which by extension will be the content filter for
ways throughout. All the post are sorted and displayed our application. User can view other connected user’s uploaded
by recency and the timeline for each post is visible to content sorted by recency and can upload content of their own
every user. that will be visible to other connected users. The user can like
• react-redux - The official Redux+JS/TS templates for or comment on the posts or feed of other connected users and
Create React App, which make use of Redux Toolkit, vice versa. They can send and receive connection requests to
are the suggested method for beginning new projects and from other users and respond to accept only the ones they
with React Redux. React Redux is the name of Redux’s approve. The idea of the project is to provide a working model
official React binding. It enables React components to of an actual Social Media Platform deploying a certain set of
access Redux Store data so they can update the data tools and technologies.
by sending actions to the store. Redux assists in project
growth by providing a viable means of managing state
using a unidirectional data flow design. [34].
• react-responsive - A media query module called react-
responsive uses CSS media queries as a component or
hook for responsive web design. In terms of CSS/Sass
styling, we can rearrange our DOM in order to render
or remove specific styled elements from the DOM in
accordance with the screen resolution/size [35].
• react-spinners - Developed with react in mind, React-
Bootstrap is a front-end framework. The Spinner Com-
ponent offers a means of displaying the loading effect.
It can be used to display the loading state anytime
it’s necessary for our application. React-npm-boilerplate
is used to bootstrap this package, which consists of a Fig. 4. Application Design - User Navigation DFD
collection of loading spinners built with React.js and
based on Halogen [36].
• redux - Redux is a design pattern and framework that A. Models
uses ”actions,” or events, to manage and update appli- The data in our MongoDB database is abstracted by the
cation state.It serves as a central repository for state models defined in the Node.js server. It is because of this
that must be used across the entire programme, with abstraction that we call on Mongoose schemas in order to
rules making sure that the state can only be changed construct a blueprint of how we want the added data to look
in a predictable way. We can manage ”global” state and behave. A document data structure that is imposed by
with Redux. The state required by numerous components the application layer is called a Mongoose schema. Models
of our application. Redux’s patterns and tools help you are more complex constructors that accept a schema and
understand when, when, why, and how the application’s produce a document instance. The Mongoose schema is
state is updated. They also help you understand how those contained within a Mongoose model. A Mongoose model
updates will affect the app logic [37]. offers a database interface for creating, querying, updating,
• yup - Yup is a tool for value parsing and validation in removing, and modifying records, whereas a Mongoose
JavaScript. We can establish a schema, modify a value to schema defines the structure of the document, the default
match, check the shape of a value that already exists, or values, their validators, etc. The compiled form of the schema
do both. Yes, schema are very expressive and enable for specification that corresponds exactly to a single document
in a MongoDB collection is known as a mongoose model [10]. create post popups, cards, input forms and many more with
functions that help us handle the get, post, put and other re-
1) User Model quests while updating profile/cover pictures, uploading images,
The User model or user schema is for all the information creating posts, adding/removing/searching friends, accessing
required/collected from the user. It requires to have the their profile, requesting/cancelling/accepting/deleting requests,
user’s first name, last name, username (assigned in the etc. It has all the design elements like the icons and styles,
front-end), email, password, gender, birth year (b year), the UI elements, the request and data handling functions and
birth month (b month), birth day (b day) and createdAt the reducers and routes handling the fluent back and forth
(date) when the user first signs up. It also saves the other data transactions with the backend. Below is a sample folder
(non-compulsory) information like the Cloudinary links structure representing our application:
to a user’s current profile and cover pictures as strings. Frontend:
A user’s friends, followers, following, pending requests, 1) Public (icons, images, reacts, etc.)
search history, saved posts, all with time stamps. It also 2) src
has all the details users feed into their bio, namely a) Components
- the bio itself, other name (if a user has any), job, i) Header
workplace, high school, college, current city, hometown, ii) Footer
their Instagram link, etc. We define a schema and export iii) Create post
the model as follows: iv) Post
module.exports = v) Error
vi) Login
mongoose.model(”U ser”, userSchema); A) Login form
Where the userSchema is defined using B) Sign up form
mongoose.Schema() and ”User” is the model. vii) Bio
b) Helper functions
2) Post Model i) Image URL to Blob
The Post Model, as the name suggests is for the ii) Image cropper
posts/uploads specifically. In our web application, a iii) Close menus/popups on click outside
user can upload or change his/her profile picture, cover c) Functions (to handle requests)
picture, or create a post with either plain text, images,
i) User
text with images or text on top of one of the give image
ii) Post
backgrounds. Hence, for starters, we store the type of
iii) Image upload
the post (profile picture, cover picture, etc.) along with
the text (if any else null), images (an array or null if not d) Pages
any), the user by reference, the background (if any else i) Home
null) and the comments received - the text, image(if ii) Login
any), commented by and the comment timestamp. All iii) Profile
the posts also have their timestamps saved. iv) Reset Password
v) Friends
3) React Model e) Reducers
Inspired by Facebook’s react design, the react model f) Routes (for when logged in and when logged out)
is to save all the likes and reacts a user got on his/her g) Styles
individual posts. It saves the react type (like, love, laugh, h) App.js (Root-component - starting point of our
sad, angry and amaze). It also stores the post reference SPA.)
of the user who created the post and the user reference i) index.css (Universal colors, cards, buttons, etc.)
of the user who reacted on the post. j) index.js (Mount/Render the root component)
k) .env
B. View l) .gitignore
The frontend view defines all the UI elements of a web m) package.json (With all the scripts, version info and
application where we receive all the data from the Controllers dependencies)
and packages and present it in the browser display. It also has
all the templates and data forms and produces a response for C. Controllers
the browser. In our Social app, we have defined a login page, The Controller handles all the events fired up by the View.
home page, user’s profile page, a reset password page and The component receives a path, retrieves a JSON answer, and
a friends page. These pages assemble the several individual then delivers the object to its child component. The Controller
components like header, footer, profile picture, error popups, is in charge of page caching, personalised loading screens,
prefetching, and server-side rendering. It processes a request cover(url string),
and returns a status code and message for a response. For gender (required, string),
eg., we try a block of code to activate a user’s account when birth year (required, string),
clicked on the activation link. We extract the user Id from birth month (required, string),
the account from which the request has been made and check birth day (required, string),
if it is a valid user from our database. If the account has not verified (default : false),
been previously activated, and the request is from a valid user, friends (array),
the controller function updates the required fields (in this case following (array),
verified is turned to true) and followers (array),
return res.status(200).json({ message: ”Account has been requests (array),
activated successfully.” }); search (array with timestamps),
else, if it is a valid user who has already activated their details (bio, other name, job, workplace, high school, college,
account before, it will do the following: current city, hometown, instagram, savedPosts (array with
return res.status(400).json({ message: ”This email is al- timestamps)
ready activated.” });
and if it is not a valid user, it will View
return res.status(400).json({message: ”You don’t have the const userInfos = {
authorization to complete this operation.”}); first name = ””,
In case an error has occurred during this process, last name = ””,
res.status(500).json({ message: error.message }); email = ””,
password = ””,
The backend has other helper functions as well. They birth year = ””,
help generate the 5 digit activation code, a mailer function to birth month = ””,
send an email to the user with the activation code, a token birth day = ””,
generator and other validation functions to check if it is a gender = ””
unique and valid email address, password and username. They }
also include the middle-ware. Functions that run during the set user state to userInfos;
request-response cycle are found in Middle-ware. Both the get the values from the form as the user populates the fields;
request object (req) and the answer object are accessible to //front-end validation
them (res). Middle-ware is executed in the window between a first name is required, should be between 2 to 16 characters
server receiving a request and it sending a response. Utilizing long and should have only alphabets.
JWT, we use it for authorization (Jason Web Token). Each last name is required, should be between 2 to 16 characters
subsequent request once the user logs in contains the JWT. long and should have only alphabets.
The middleware then validates this token before allowing email is required and should be a valid email address
the user access to routes, services, and resources. Similarly, password is required and must be 6 to 36 characters long
when uploading images or media, the middle-ware checks if all requirements are met, a post request is made passing
the format and file-size after receiving the request and only the data via the controllers, in which case
if the conditions are met, the controller goes through with error = ””,
processing the request and the database is updated. success = data with message
else success = ””,
X. W ORKING ON A R EAL - WORLD A PPLICATION
error = response data and message
A. Sign-up Process
As per the MVC Architecture, the data is received through Controllers
the front-end forms, verified and validated by the controller try {
and middle-ware authentication in the back-end and then //check if the input is a valid email convert the string into
populated in the database as per the model schema. lower case and match the format
if not a valid email
Model return response status 400 and message: ”invalid email ad-
const userSchema is a mongoose schema for user information. dress”;
userSchema = if the email already exists in the database
first name (required, string), return response status 400 and message: ”email address al-
last name (required, string), ready exists”;
username (required, unique string), if first name, last name and password are not appropriately
email (required, string), long
password (required, string), return response status 400 and message: ”must be between x
picture (url string), and y characters long”;
password is encrypted using bcrypt and saved We have already witnessed the power of Social Networks.
//generate a unique username for every sign-up username = They can alter votes, change preferences, set or banish trends
first name + last name; while username matches any in the and alter reality altogether with the sheer amount of influence
database { username = username + a random number between it has over people today. This project uses that same influence
0 to 9; } if username is unique, save to draw and motivate users into indulging their focus towards
a verification email is sent to the user’s email for account more significant things like social service, animal welfare,
activation sustainable growth and much more. Social Media casts a
a jwt token is generated and the user is redirected to the home domino effect- we see something, we like/buy it, we share
page. it and we reccomend it. Just this time it will be for a cause.
This token is required for every user activity and/or requests
the entire logged in session of that user for authentication ACKNOWLEDGMENT
purposes. Thanks to Dr. Jinan Fiaidhi, Lakehead University, 955
Similarly, all the requests and responses are handled in a Oliver Rd, Thunder Bay, ON P7B 5E1, Canada. E-mail:
similar fashion, using the Model-View-Control Architecture [email protected] The project has emphasized on effective
which keeps all sections of the code separate and sorted, independent re- search and development approaches in com-
enhances re-usability and readability of the code and help with puter science including literature exploration, discussion and
future modifications, updates, testing and debugging. presenting material, and provided the ability to identify and
venture possible new ideas for gaining practical knowledge. I
XI. F UTURE S COPE am grateful to have received the opportunity to explore and
Social Media is an ever growing industry. Information is develop this project under Dr. Fiaidhi’s supervision.
more valuable than gold. Uncountable tools ranging from NLP,
Sentiment Analysis, decrypting patterns, Big Data analysis, R EFERENCES
micro and macro network studies, human behaviour, impact [1] Obar, Jonathan A.; Wildman, Steve (2015). ”Social media definition
and the governance challenge: An introduction to the special issue”.
of influence, triggering heard behaviour and much, much Telecommunications Policy. 39 (9): 745–750. doi:10.2139/ssrn.2647377.
more has branched out ever since the rise of Social Media. SSRN 2647377.
The future scope of this particular project has no bounds [2] Hasan, M. and Sohail, M.S., 2021. The influence of social media
marketing on consumers’ purchase decision: investigating the effects of
but restricting our focus towards the short term goals and local and nonlocal brands. Journal of International Consumer Marketing,
for better implementation of this project, I would like to 33(3), pp.350-367.
work on improving the UI and towards the functionalities this [3] Mehra, M., Kumar, M., Maurya, A. and Sharma, C., 2021. MERN stack
Web Development. Annals of the Romanian Society for Cell Biology,
application is offering. It is the first step to build any successful 25(6), pp.11756-11761.
web app. If the User Experience is not rich enough, it will [4] Forbes, L. P., Forbes, L. P. (2013). Does Social Media Influence
never gain that many participants in order to conduct these Consumer Buying Behavior? An Investigation Of Recommendations
further ”behind-the-scenes and under-the-hood” studies. As for And Purchases. Journal of Business Economics Research (JBER), 11(2),
107–112. https://doi.org/10.19030/jber.v11i2.7623
the long term goals, who’s to say, maybe someday we find a [5] González-Padilla, Daniel A., and Leonardo Tortolero-Blanco. ”Social
way to use the networks to detach people from consumerism media influence in the COVID-19 Pandemic.” International braz j urol
instead and to promote and influence more pressing problems 46 (2020): 120-124.
[6] Basch CH, Hillyer GC, Meleo-Erwin ZC, Jaime C, Mohlman J,
as we now know the power Social Media possesses. Basch CE. Preventive Behaviors Conveyed on YouTube to Mitigate
Transmission of COVID-19: CrossSectional Study. JMIR Public Health
C ONCLUSION Surveill. 2020; 6:e18807. Erratum in: JMIR Public Health Surveill.
2020; 6:e19601.
The goal was to build a content oriented social media [7] Flanagan, David, ”JavaScript - The Definitive Guide”, 5th ed., O’Reilly,
platform using mern stack. We here, successfully built a social Sebastopol, CA, 2006, p.497
media platform called Social where the user can access, view [8] ”Single-page applications vs. multiple-page applications: pros, cons,
pitfalls - BLAKIT - IT Solutions”. blak-it.com. BLAKIT - IT Solutions.
and generate digital content under the humanitarian genra. October 17, 2017. Retrieved October 19, 2017
The web application is fully functional and responsive and [9] Davis, Ian. ”What Are The Benefits of MVC?”. Internet Alchemy.
provides great user experience alongside serving a purpose. Retrieved 2016-11-29.
[10] Matallah, H., Belalem, G. and Bouamrane, K., 2021. Comparative study
Social Media today owns the market, casting influence and between the MySQL relational database and the MongoDB NoSQL
shaping behavioural and purchase patterns. ”The Science of database. International Journal of Software Science and Computational
Influence” is a report on how social media influences decision- Intelligence (IJSSCI), 13(3), pp.38-63.
[11] “NPM docs,” npm Docs. [Online]. Available: https://docs.npmjs.com/.
making, 40% of respondents across generational categories [Accessed: 01-Nov-2022].
identified social media as having an influence on their travel- [12] ”MongoDB Node Driver”. MongoDB. URL:
related decision-making. Social media was still prominent in https://www.mongodb.com/docs/drivers/node/current/
[13] ”Schemas”. mongoose. Url: https://mongoosejs.com/docs/guide.html
other areas, albeit to a lesser extent; 25% of respondents said [14] ”Nodemailer”. Nodemailer. URL: https://nodemailer.com/about/
it was in financial services, 22% said it was in retail, and 21% [15] ”nodemon”. npm. URL: https://www.npmjs.com/package/nodemon
said it was in healthcare. As a close friend casts much more [16] ”jsonwebtoken”. npm. URL: https://www.npmjs.com/package/jsonwebtoken
[17] ”APIs Explorer”. Google. URL: https://developers.google.com/explorer-
influence, through the connectivity they offer, social media help
posts became the most influential source across all generations. [18] ”express”. npm. URL: https://www.npmjs.com/package/express
[19] ”How to implement file uploading and downloading with Express
?”. Geeks for Geeks. URL: https://www.geeksforgeeks.org/how-to-
implement-file-uploading-and-downloading-with-express/
[20] ”dotenv”. npm. URL: https://www.npmjs.com/package/dotenv
[21] ”cors”. npm. URL: https://www.npmjs.com/package/cors
[22] ”Cloudinary Node SDK”. npm. URL:
https://www.npmjs.com/package/cloudinary
[23] Provos, Niels; Mazières, David; Talan Jason Sutton 2012 (1999). ”A
Future-Adaptable Password Scheme”. Proceedings of 1999 USENIX
Annual Technical Conference: 81–92.
[24] ”Axios”. npm. URL: https://www.npmjs.com/package/axios
[25] ”Emoji Picker React (v4)”. npm. URL:
https://www.npmjs.com/package/emoji-picker-react
[26] ”FileSaver.js”. npm. https://www.npmjs.com/package/file-saver
[27] ”Formik Docs”. Formik. URL: https://formik.org/docs/overview
[28] ”JavaScript Cookie”. npm. URL: https://www.npmjs.com/package/js-
cookie
[29] React. URL: https://reactjs.org/docs/getting-started.html
[30] ”React-DOM”. React. https://reactjs.org/docs/react-dom.html
[31] ”React Router Dom”. npm. https://www.npmjs.com/package/react-
router-dom
[32] ”react-easy-crop”. ”npm”. https://www.npmjs.com/package/react-easy-
crop
[33] ”react-moment”. npm. https://www.npmjs.com/package/react-moment
[34] ”React Redux”. npm. https://www.npmjs.com/package/react-redux
[35] ”Build Responsive Web Pages With React-Responsive And Type-
Script”, OpenReplay. https://blog.openreplay.com/build-responsive-web-
pages-with-react-responsive-and-typescript/
[36] ”React Spinners”. npm. https://www.npmjs.com/package/react-spinners
[37] ”Redux”. Redux. https://redux.js.org/tutorials/fundamentals/part-1-
overview
[38] ”Yup”. npm. https://www.npmjs.com/package/yup
[39] Fig 1: ”MERN Stack”. Java-T-Point. https://www.javatpoint.com/mern-
stack
[40] Fig 2: ”The Ultimate Guide to MERN Stack”. ALT-Campus.
https://altcampus.school/guides/the-ultimate-guide-to-MERN-stack