An Internship Report

on
Social Media web application using MERN

ELECTRONICS AND COMMUNICATION ENGINEERING

BY
Sk. Naina Sana [20NN1A0455]

B. Gayathri [20NN1A0407]

Ch. Pujitha [20NN1A0415]

Ch. Jahnavi [20NN1A0416]

Under the esteemed Guidance of

Ms. B. Shiny Vidya
Assistant Professor

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

VIGNAN’S NIRULA INSTITUTE OF TECHNOLOGY AND SCIENCE FOR WOMEN,

PEDAPALAKALURU, GUNTUR-522005
(Approved by AICTE, NEWDELHI and Affiliated to JNTUK KAKINADA)
(2022-2023)

Page | 7
 DECLARATION

We hereby declare that the work described in this Internship project work entitled “SOCIAL MEDIA
WEB APPLICATION USING MERN(“MONGO DB, EXPRESSJS, REACTJS, NODEJS)”
which is submitted by us in partial fulfilment of the academic requirements in Bachelor of technology
in the Department of ELECTRONICS AND COMMUNICATION ENGINEERING to the
Vignan’s Nirula Institute of Technology and Science for women, affiliated to Jawaharlal Nehru
Technological University Kakinada, Andhra Pradesh is the result of work done by us under the
guidance of Ms.B.Shiny Vidhya, Assistant Professor. The Work is original and has not been submitted
for any degree/diploma of this or any other university.

PROJECT ASSOCIATES
Sk. Naina Sana 20NN1A0455

B. Gayathri 20NN1A0407

Ch. Pujitha 20NN1A0415

Ch. Jahnavi 20NN1A0416

Page | 7
 Official Certification
This is to certify that SHAIK. NAINA SANA Reg.No: 20NN1A0455 has completed her
Internship program From Talentio Academy On Full Stack Development under My
supervision as a part of partial fulfillment of the requirement for the Degree of B-Tech in the
department of Electronics and communication Engineering from Vignan’s Nirula
Instistute of Technology and Science for women.

Certificate from Intern Organization

Page | 7
 Official Certification
This is to certify that BAYYAVARAPU GAYATHRI Reg.No: 20NN1A0407 has completed
her Internship program From Talentio Academy On Full Stack Development under My
supervision as a part of partial fulfillment of the requirement for the Degree of B-
Tech in the department of Electronics and communication Engineering from Vignan’s
Nirula Instistute of Technology and Science for women.

Certificate from Intern Organization

Page | 7
 Official Certification
This is to certify that CHINTADA PUJITHA Reg.No: 20NN1A0415 has completed her
Internship program From Talentio Academy On Full Stack Development under My
supervision as a part of partial fulfillment of the requirement for the Degree of B-Tech in the
department of Electronics and communication Engineering from Vignan’s Nirula
Instistute of Technology and Science for women.

Certificate from Intern Organization

Page | 7
 Official Certification
This is to certify that CHINTADA JAHNAVI Reg.No: 20NN1A0416 has completed her
Internship program From Talentio Academy On Full Stack Development under My
supervision as a part of partial fulfillment of the requirement for the Degree of B-Tech in the
department of Electronics and communication Engineering from Vignan’s Nirula
Instistute of Technology and Science for women.

Certificate from Intern Organization

Page | 7
 ACKNOWLEDGEMENT

The completion of any project depends upon cooperation, coordination and combined
efforts of several sources of knowledge. This report acknowledges a number of guidance,
supervision, stimulation and a lot of inspiration from numerous people. First of all, we
thank the almighty for the blessings that have been showered upon us to complete the
project work successfully. Our grateful regards to our beloved Principal Dr. P.Radhika for
her constant support and motivation.

We are thankful to Dr.G.Sandhya, Associate Professor, Head Of the Department of

ELECTRONICS AND COMMUNICATION ENGINEERING , for her extended and continuous
support, valuable guidance and timely advice in the completion of this project thesis.

It is our privilege to express our sincerest regards to our project guide , Ms.B.Shiny Vidhya ,
Assistant Professor, for her valuable inputs ,valuable guidance, encouragement, whole
hearted cooperation and constructive support throughout the duration of our project.

We take the opportunity to thank all our lectures who have directly or in directly helped
our project. We pay our respects and love to our parents and all other family members and
friends for their love and encouragement throughout our career. Last but not the least we
express our thanks to our friends for their cooperation and support.

Page | 7
 Contents

SI.NO: CHAPTER NAME: PAGE NO:

01 EXECUTIVE SUMMERY 09

02 OVERVIEW OF THE ORGANIZATION 10

03 INTERNSHIP PART (11-29)

 3.01 WEEK:01 (HTML & CSS) 12-13

 3.02 WEEK:02 (JAVASCRIPT) 14-15

 3.03 WEEK:03 (STATIC WEB PAGE) 16-17

 3.04 WEEK:04 (NODE JS) 18-19

 3.05 WEEK:05 (EXPRESS JS) 20-21

 3.06 WEEK:06 (REACT JS) 22-23

 3.07 WEEK:07 (MONGO DB) 24-25

 3.08 WEEK:08&09 (PROJECT)

26-30

04 OUTCOMES DESCRIPTION 30-31

05 RESULT AND REFERNCES 32

Page | 8
 CHAPTER 1: EXECUTIVE SUMMARY

Contrary to popular belief, an internship isn’t about organising a filing cabinet or fetching coffee
for your boss. The responsibilities of an intern has evolved. In many internships programs, you’ll
find yourself working on project, managing a small team and even working along some executives.
It’s important you enter your internship with the right mindset. If you don’t know what to expect
from your internship role, you’ll be better prepared and know what you need to do to succeed.
Also, carrying out your intern responsibilities successfully will assist you in building up a potent
skillset that will shine in your next role.

An intern is a trainee who has signed on with an organisation for a brief period. An intern’s goal is
to gain work experience, occasionally some university credit, and always an overall feel for the
industry they’re interning in. Internships may be paid, partially paid, or unpaid. However, there
has been an increase in the number of paid internship opportunities, woo! The engagement period
may range from a handful of weeks up to 2 years. With longer-term internships, you’ll almost
always be compensated in some way. The compensation may include a monthly wage,
accommodation, travel expenses, and a food allowance. Other benefits could be a stipend gym
membership or even a personal laptop. It’s also not uncommon to receive a full-time offer upon
completion of your internship with a company. Studies show that employers like to hire interns
and use their internships as well to source new talent for their company.

Page | 9
 CHAPTER 2: OVERVIEW OF THE ORGANIZATION

The genesis of Talentio in 2016 is the fructification of the market need to have access to realistic,
measurable, reliable, and industry-oriented training programs that DELIVER RESULTS. Backed
by a team of strong Leaders who have over 2 centuries of expertise in leading organisations like
IBM, Indian Airforce, Merittrac, TCS, Tech Mahindra, LG Life Sciences, Fast Booking India
(Subsidiary of ACCOR) in the areas of Talent Management, Talent Acquisition, Employee
Engagement, Learning and Development, the organisation is having the right understanding of
what is required to help the students to get their dream jobs.They have become thought leaders by
virtue of their contributions in the above areas to the industry at large.

Our scientific approach to training driven by Data Analytics focuses on Driving Right Behaviour,
Right Training for Right Group, ensuring trained graduates who could be productive for industries
from day one.The most trusted and dependable one-stop solution training partner for delivering
results in skills development.The values of these organization are Integrity, Passion, Ownership,
Excellence and Innovation.

They firmly believe in the age-old saying “Where there is a Will there’s a Way“, we, therefore,
focus on developing the Will, while we build the Skill in our students. They act as Enablers to the
students in their journey to get equipped to be gainfully employed. There programs focuses on
Habit Building for it (Habit Building) is the foundation of all Success.They don’t believe in the
quote “One size fits all”, our programs are highly customised and based on the current levels of
the students and the requirements of the colleges. However, if the college wants to choose any of
our “off-the-shelf” training programs, they have a variety of programs that they can choose
from.The centric approach for training focuses on the key matrices like placements,Redution of
training cost,Increase in high package salaries,Better job profiles and Better recruiting brands etc.

Page | 10
 CHAPTER 3: INTERNSHIP PART

ACTIVITYLOGFOR THE FIRSTWEEK

Day& Person In-

Date Brief description of the Learning Outcome Charge
daily activity Signature
HTML Introduction & basics. Basic Knowledge &
Implementation of HTML
Day–1 attributes,heading tags
and other basic tags.

HTML Styles and Formatting & Implementation of HTML

HTML forms. styles and creating
Day-2 HTML forms.

HTML CSS, HTML Links , Images Implementation of CSS

& Tables. styles in HTML (Inline
Day–3 styling, internal and
External styling.

HTML tables ,list and Blocks & Building a static

Inline. webpages by including
Day–4 some tables and styles.

HTML Frames , Classes & ID. Implementation of Class

and ID attributes.
Day–5

HTML Semantics and File Including the file path

paths& Layout. describes the location of
Day–6 a file in a website’s folder
structure.

Page | 11
 WEEK–1

Objective of the Activity Done: To get knowledge and implementation of HTML ,CSS

Detailed Report:
HTML is the most common markup language for web pages. It provides basic instructions
for how to display text, images, links, and other content on a page.
HTML also provides instructions for how to link one page to another page or site. The
HTML standard was created in 1990 by Tim Berners-Lee while he was working at CERN
in Switzerland.

HTML provides the basic structure for content on the web. It consists of tags, which are
enclosed in angle brackets, and it contains both content and metadata about that content.2
HTML tags are what add meaning to your HTML code, and they tell browsers how to
display your content. Tags come in pairs of opening and closing tags, such as <tag name>,
</tag name>, which tells a browser that everything between these two tags should be
displayed as a tag name operation wants.

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and
formatting of HTML documents.
It’s a very important part of the website development process that helps create a
consistent experience for users. It can be used to specify fonts, colors, spacing, layout and
other aspects of the web page’s presentation.

It’s a very important part of the website development process that helps create a consistent
experience for users. It can be used to specify fonts, colors, spacing, layout and other
aspects of the web page’s presentation.

 CSS stands for Cascading Style Sheets.

 It is a set of instructions that tell browsers how to display content on the page.
 It can be applied to HTML or XML documents.
 It can also be embedded in an HTML document as a style tag with the
type=”text/css” attribute.
 CSS is often used as a styling tool for web design and development.

CSS describes how HTML and XML documents are presented on screen, on paper, in
speech, or on other media.

CSS styles can be applied to any HTML element. These styles are usually applied to the
HTML element’s class attribute or ID attribute.

Page | 12
 WEEKLYREPORT

ACTIVITY LOG FOR THE SECONDWEEK

Day& Person In-

Date Brief description of the daily Learning Outcome Charge Sig
activity nature

Javascript Introduction and Differences between let

Comments & Variables (let & const) & const and
Day–1 and Data types. Implementation of basics
JS statements.

Javascript Operators and Functions. Implementation of JS

functions and Operators.
Day-2

Javascript Arrays & Array Methods Implementation of JS

and about Bigint. Arrays & it’s Methods.
Day–3

Javascript Strings & String Methods. Implementation of JS

Strings & it’s Methods.
Day–4

Javascript Dates & Date formats Implementation of Date

and Javascript math(random) object and date formats
Day–5 also usage of Math
objects in programs.

Javascript iterative & Conditional Implementation of

statements. looping statements and
Day–6 conditional statements.

Page | 13
 WEEK–2
ObjectiveoftheActivityDone:To get Knowledge and implementation of JS language.

DetailedReport:
JavaScript is most popular programming language of the web. JavaScript is to program
the behavior of web pages. It allows us to make web pages more interactive where as
HTML and CSS just give structure and style to the web pages. The first ever JavaScript
was created by Brendan Eich at Netscape and has since been updated to conform to
ECMA-262 and later versions.

In this JS session we have gained knowledge about the JavaScript variables ,comments,
operators and their implementation . we have implemented the different methods of
arrays and string which are present in JS . The dates and the date formats are
implemented using JS.

JavaScript is a lightweight due to the fact that it has low CPU usage,is easy to implement
and has minimal syntax.JS runs in the browser even though it has complex logic to get
executed.
JavaScript helps to create the dynamic websites.It consist of functions which are treated
as objects.They may have properties and methods just like another object.

We have understood that JavaScript was created in the first place for DOM
manipulation.Web Development can be made using the JS by adding the interactivity and
behavior to static sites .Web applications ,server applications can be done using the JS
programming languages.

Not only websites , but JavaScript also helps in creating games for leisure.JavaScript is
being used in all possible devices and applications .It can also be used to build an
application for non-web contexts.The features and uses of JavaScript make it a powerful
tool for creating mobile applications.

Based on the knowledge gained on JS we have started to implement the basic websites
using JS at the initial stage and developed a dynamic website using all the elements of the
JS.
We also tried to create a web application of our own choice using JS .
The main Objective JS which is a scripting language is enabling us to:
• Create dynamically updating content.
• Control multimedia
• Animation of images

Page | 14
 WEEKLYREPORT

ACTIVITY LOG FOR THE THIRD WEEK

Day Person In-

&Date Brief description of the daily Learning Outcome Charge
activity Signature

Static webpage-(basic) Creating structure with

HTML, style with CSS and
Day–1 making it interactive with
javascript.

Hosting a static website. Creating a SIGN-UP page.

Day-2

Website with CSS frame work. Creating a website with a

CSS frame work.
Day–3

Website with bootstrap. Creating a website with

Bootstrap
Day–4

Portfolio website. Creating a Portfolio

website.
Day–5

Resume Website. Creating an online resume

website.
Day–6

Page | 15
 WEEK–3
ObjectiveoftheActivityDone: Creating a Static web page.

DetailedReport:

In this session we create a static web page using html, css and javascript. We

create a basic Portfolio website as shown below in this session.

Here we include basic information, skills and resume as well as contact information.

Page | 16
Page | 17
 WEEKLYREPORT

ACTIVITY LOG FOR THE FORTH WEEK

Day Person In-

&Date Brief description of the daily Learning Outcome Charge
activity Signature

Node-JS Introduction & Node-JS Basic Knowledge about

Modules. Node-JS and it’s Modules.
Day–1

Node-JS HTTP Modules. Implementation of

NodeJS HTTP Modules.
Day-2

Node-JS File System. Implementation of

NodeJS File System
Day–3 Modules.

Node-JS URL Module. Implementation of

Node-JS URL Modules.
Day–4

Node-JS NPM Implementation of

Node JS NPM Package
Day–5 manager.

Node-JS upload files. Implementation of

Formidable module.
Day–6

Page | 18
 WEEK–4

Objective of the Activity Done: To get Knowledge and implementation of Node JS.
Detailed Report:

Node.js is an open source server environment.Node.js allows you to run JavaScript on the
server. Node.js is a very powerful JavaScript-based platform built on Google Chrome's
JavaScript V8 Engine. It is used to develop I/O intensive web applications like video
streaming sites, single-page applications, and other web applications. Node js is initially
developed by Ryan Dahl.
Node.js is open source, completely free, and used by thousands of developers around the
world. Many of the basic modules of Node.js are written in JavaScript. Node.js is mostly
used to run real-time server applications.
In this session we have learnt the features and main objectives of node js. Node.js is built
on Google Chrome's V8 JavaScript Engine, so its library is very fast in code
execution. Node.js follows a single threaded model with event looping. Node.js is highly
scalable because event mechanism helps the server to respond in a non-blocking way.
We have gained knowledge on the HTTP modules ,Node js file system modules ,node js
URL modules, npm packages ,formidable module of node js .Node. js is sometimes
misunderstood by developers as a backend framework that is exclusively used to
construct servers. This is not the case; Node. js can be used on the frontend as well as the
backend.Node js to build dynamic websites and web apps. Current Node. js examples of
major websites thriving thanks to its platform include the likes of Netflix, PayPal,
LinkedIn, and more. These names are not underground by any means.
There are many applications that can be made using node js such as real time chat
application which is mostly used now a days, IOT ,E-commerce platform,websites with
server-side rendering ,commandline tools and many more .Initially we have tried to
implement few applications using node js and tried to implement an application of our
own choice .
The node js provides better efficiency and overall developer productivity as :

 code sharing and reuse.

 Speed and performance
 Easy knowledge sharing within a team
 A huge number of free tools

Page | 19
 WEEKLYREPORT

ACTIVITY LOG FOR THE FIFTH WEEK

Day Person In-

&Date Brief description of the daily Learning Outcome Charge Sig
activity nature

Express-JS Introduction. Basic Knowledge about

Express-JS.
Day–1

Express-JS Routing. Implementation of

routing an express-JS
Day-2 application(Static)
[Implementation of
app.modules].
Express-JS HTTP methods Implementation of HTTP
methods(GET,POST,PUT
Day–3 and DELETE).

Express-JS URL Building. Implementation of

routing an Express
Day–4 application(Dynamic).

Express-JS Templating. Implementation of ‘PUG’

which is a very powerful
Day–5 templating engine.

Express-JS Authentication. Creating a single pape

using Express-JS.
Day–6

Page | 110
 WEEK–5

Objective of the Activity Done: To get knowledge and implementation of Express js

Detailed Report:

Express js is a node js web application framework that provides broad features for
building web and mobile applications.It is used to build a single page,multipage, and
hybrid web application .It’s a layer built on the top of the Node js that helps manage
servers and routes .It was developed by TJ Holowaychuk,StrongLoop and many others.It
was initially released in November 2010 and is currently on major version 4 of the API
Express js was created to make APIs and web applications with ease.It saves a lot of coding
time almost by half and still makes web and mobile applications are efficient.The main
features of express js is that it is fast server -side development,middle ware,routing
,templating ,debugging.
There are many advantages of using express js .Few of them are express js is fast to link it
with databases like MYSQL,MongoDB etc.It allows dynamic rendering of HTML pages
Based on passing arguments templates.
There are many applications that can be done using express js .Real time chats ,cpmplex
single page applications ,real time collaboration tools , streaming apps,microservices
architecture.We have developed few applications using both express js and node js and
implemented it .
The main objective of creating Express js frame work is:

 Time efficient

 Fast

 Economical

 Easy to learn

 Asynchronous

Page | 20
 WEEKLYREPORT

ACTIVITY LOG FOR THE SIXTH WEEK

Day Person In-

&Date Brief description of the daily Learning Outcome Charge
activity Signature

React-JS Introduction and Conditionals. Basic Knowledge on

React-JS.
Day–1

React-JS ES6. Basic Knowledge &

Implementation of ES6
Day-2 (ECMAScript 6).

ES6 Variables ,Classes & Arrow Implementation of ES6

functions. Classes and Arrow
Day–3 functions.

ES6 Array methods and Operators Implementation of Array

and Modules. methods and some
Day–4 Modules.

React render HTML & React JSX. Implementation of

ReactDOM.render()
Day–5 function & React-JSX.

React Classes,Props & React CSS Styling react using CSS.

styling.
Day–6

Page | 21
 WEEK-6

Objective of the Activity Done:To get knowledge and implementation of React JS

Detailed Report:

The React. js framework is an open-source JavaScript framework and library developed

by Facebook. It's used for building interactive user interfaces and web applications
quickly and efficiently with significantly less code than you would with vanilla JavaScript.
React was originally created by Jordan Walke. Today, React has over a thousand open
source contributors.
React is a front-end JavaScript library. React is capable of making API calls (sending the
request to the backend), which deal with the data. React cannot process the database or
the data source itself.React is a front-end JavaScript library. React is capable of making API
calls (sending the request to the backend), which deal with the data. React cannot process
the database or the data source itself.
React’s primary role in an application is to handle the view layer of that application just
like the V in a model-view-controller (MVC) pattern by providing the best and most
efficient rendering execution.
There are many important features of React js which we have understood through this
session.They are JSX(java script Extenssion) which is the combination of HTML and
Javascript , Virtual DOM , One – way Data Binding , good performance , condtional
statements and its components.
Through this session we have gained knowledge on real time applications which uses the
React js to improve its performance and efficiency. Few companies which uses react js are
Bloomberg , Facebook , Uber Eats, Discord,Instagram.
The major advantages of using React js are:

 Build Rich User Interfaces

 Offer Fast Rendering

 Offer Better Code Stability

 ReactJS Is Very Flexible

Page | 22
 WEEKLYREPORT

ACTIVITY LOG FOR THE SEVENTH WEEK

Day Person
&Date Brief description of the daily Learning Outcome In-
activity Charge
Sig nature
MongoDB Introduction. Basic Knowledge on
MongoDB.
Day–1

MongoDB Query API. Basic Knowledge on

CRUD Operations &
Day-2 Aggregation Pipelines.

Create Database. Creating& Connecting to

the Database using
Day–3 Mongosh.

CRUD Operations & Aggregations. Implementation of CRUD

Operations &
Day–4 Aggregations.

MongoDB & Node-JS Database Implementating a

Interaction . Connectivity between
Day–5 MongoDB & Node-JS
application.

MongoDB Schema Validation. Basic Knowledge on

MongoDB Schema
Day–6 Validation.

Page | 23
 WEEK–7

ObjectiveoftheActivityDone:To getknowledge on Mongo DB and its implementation

DetailedReport:
MongoDB is a source-available cross-platform document-oriented database program.
Classified as a NoSQL database program, MongoDB uses JSON-like documents with
optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server
Side Public License which is deemed non-free by several distributions. MongoDB is a
document database. It stores data in a type of JSON format called BSON.MongoDB was
founded in 2007 by Dwight Merriman, Eliot Horowitz and Kevin Ryan.

MongoDB is a document database used to build highly available and scalable internet
applications. With its flexible schema approach, it's popular with development teams
using agile methodologies.MongoDB is widely used for storing product information and
details by finance and e-commerce companies. You can even store the product catalogue
of your brand in it. MongoDB can also be used to store and model machine-generated
data.

There are many important features that we have learnt through this session.Few of
them are :

• Ad-hoc queries for optimized, real-time analytics.

• Indexing appropriatelyfor better query executions.

• Replication for better data availability and stability • Load balancing.

There are many applications that can be developed using Mongo DB connectivity.One of
them is Aadhar Project.It is using MongoDB as its database to store a massive amount of
demographic and biometric data of more than 1.2 billion Indians. MongoDB is being used
for the storage of images in the Aadhar project.

Advantages of using Mongo DB are :

• Full cloud-based developer data platform.

• Flexible document schemas.

• Widely supported and code-native data access.

• Change-friendly design.

• Powerful querying and analytics.

• Easy horizontal scale-out with sharding

Page | 24
 WEEKLYREPORT

ACTIVITY LOG FOR THE EIGTH & NINTH WEEK

Day Person In-

&Date Brief description of the daily Learning Outcome Charge
activity Signature

Prototype of Project. Deciding and Preparing a

Prototype(PPT).
Day–1 (‘SOCIAL MEDIA WEB APPLICATION
USING MERN (MongoDB ,Express-JS,
React-JS & Node-JS)’).
Building UI of the App. Creating a Guest Page,
Home Page and Profile
Day-2 Page etc.

Set-Up server. Set-up Server and

Dynamically render
Day–3 HTML.

Implementing Authentication. Creating a Sign-up and

Login pages for users.
Day–4

Routing and MVN patterns. Implementing routing and

MVN patterns.
Day–5

Database & It’s Connectivity. Building models for

database & connecting
Day–6 database to server.

Page | 25
 Day Person In-
&Date Brief description of the daily Learning Outcome Charge
activity Signature

Introduction about Socket.IO Implementation of

SOCKET.IO
Day–7

live chart using Socket.IO Building a live chart using

Socket.IO
Day–8

Validate the Project. Adding Validators and

Security features to the
Day–9 project.

Project Completion. Successfully Completed the

Project
Day–10 “Social media web
application using MERN”.

Page | 26
 WEEKLYREPORT

WEEK–8 & 9

Objective of the Activity Done: PROJECT:

“ Social media web application using MERN .”
Detailed Report:
We Build this full stack application using MERN(MongoDB,ExpressJS,ReactJS and NodeJs.
The main objective is to Build a full stack web application - OurApp (a social media app)
using Node.JS, Express.Js,MongoDB, EJS (Template Engine for server-side rendering).
OurApp is a simple real-world application where users can write short tweets, follow
each other and also chat with each other.
Project Stages
We can divide the project based on the stack used:
• HTML, CSS, Bootstrap: Building the UI of the application
• Serving HTML dynamically and use of EJS (template engine)
• Familiarising the NodeJS environment
• ExpressJS: Framework for creating servers.
• MongoDB: Using NoSQL Database.
• Socket.IO: Building live chatting feature.

Task 1

Prototyping the Application and environment setup :

REQUIREMENTS:
• Explore the OurApp's demo
• Node.js must be installed on your machine. You may use npm or yarn to get started
with the necessary dependencies' installation for this project
(cover later in this task).
• A MongoDB atlas account to manage your data in the cloud.
• Get familiarised with chrome dev tools. Elements panel in the dev tool can be used to
inspect DOM or CSS (Optional).
• This is a Node.js app built using Express.Js framework to build the web server and
project following the MVC pattern.

Page | 27
 Fig:(a)Folder structure fig:(b)Dependencies.

Task 2

Building the pages layout using HTML, CSS, and Bootstrap

• Create the basic UI for guest pages and home dashboard (that are seen after the
initial login/register forms' landing page).
• Create the header and footer of the webpage.
• Flexbox plays the most important role while building the layouts.
Task 3
Building the Express server and rendering the HTML dynamically
In this task, we will start using Node.js and Express.js to build the backend of
the application. Let's break this task into some steps:
1. Building the webserver using Express.
2. Knowing about the file structure and setting up the project.
3. Using EJS (template engine) to build dynamic contents into the HTML
templates. 4. Building the HTML templates in a reusable fashion.

Page | 28
Task 4
Using MongoDB database with Express server by following the MVC architecture
 At this point of the project, the integration of the database must be
completed. You should have got an idea about the MVC architecture
which we will be building from the next task. Get hands-on with
MongoDB.

Task 5

Implementing user registration and login

In this task, we will be building the authentication for the app. Let's divide this task into
smaller steps: 1. Building models for users. 2. Hashing the password before storing it in
the database. 3. Implementing session-based authentication. 4. Using Gravatar for User
profile photos.

Task 6
Implementing core functionalities of users
In this task, we will be building the core functionalities of the app. Let's divide
this task into
smaller steps:
1. Building the model for posts.
2. Letting users create and edit their posts.
3. Letting users follow each other.
4. User dashboard will consist of posts of the other users that they follow.

Task 7

Implementing the live chat and live search feature

----------------------------******************------------------------------

Page | 29
 CHAPTER 4: OUTCOMES DESCRIPTION

MERN is MongoDB, Express.js, React.js, and Node.js.Express.js is a web server framework

(together withNode.js); React.js is a web purchaser library, and Node.js as server-side
platform to MongoDB as a database. MERN combines four cutting-edge technologies in
today's development, from front-end to back-end. It saves effort and time for builders to
grasp new technology for utility improvement. The stack is supported by a large number of
open-source packages and a committed community enabling programmers to boost scalability and
maintain software products, thanks to the same JavaScript platform.

The basis of the MERN stack is Node.js, a server-side technologythatprovidesveryexcessiveoverall

performance and rapid reaction to all duties, such as huge and complicated data. MERN
doesn't need Typescript; all it needs is the flexible basis of React, today's most popular and
important front-end technology.

Fig: MERN architecture fig: structure of express.js

Express.js is an open-source framework that is utilized in commercial applications and has a

huge community of supporters. As a result, developers can utilize this framework with
confidence for their projects of any size, from little to huge. Express.js comes with a slew of
support packages and extra developer features to help you build a better system. It does not,
however, slow down Node.js. The popular Node.js forum today uses Express.js as the main
function.

The startup was launched in October 2007 by MongoDBInc.It was a component of a PaaS
(Platform as a Service)offering a kin to Windows Azure and Google App Engine. Later in 2009, it was
made open source. MongoDB is a text-based and NoSQL-based website. Therefore, MongoDB
will generally avoid database-based formats to be compatible with all documents such as
JSON, which is available in a highly flexible schema called BSON.

The Benefits and Drawbacks of MongoDB The following are some of MongoDB's most
compelling features that have persuaded current users to utilize it: Because MongoDB stores
data in JSON format, each collection has its own size and number of documents. They are,

Page | 30
nevertheless, extremelyadaptable when it comes to archiving. MongoDB data is usually not tied
to each other; does not support joining queries as in the RDBMS, so once users install, delete
or update, they will not spend much time checking whether they meet the criteria as in the
RDBMS or not. MongoDB is easy to measure.

In MongoDB, the term "collection" refers to groupings of nodes that have data to share. Users
canquicklyexpand the system by adding a new node to the cluster. Because the unique identity
_id will always be automatically discovered, the query information will always be processed
quickly. Data requests will be cached in RAM, requiring less access to the hard disc, resulting
in quicker read and write speeds. In addition to many outstanding advantages as above,
MongoDB still does have its drawbacks: It does not apply to any transaction models that requirea
high degree ofaccuracy due to its non- binding nature.

There's no sale medium for banking service operations. Because data perceives RAM to be
the focal point of action, it necessitates a significant amount of RAM when executing. Any
change tothe dereliction data isn't written to the hard driveincontinently, so the chance of
losing data from the cause of an unanticipated power failure is an unanticipated power
failure is React.js is a view rendering framework that prioritizes efficiency. Many of the
heavyweights on the MVVM (Model-View-View Model)framework take a long time to display
large amounts of data, such as lists. With React.js, however, this is no longer an issue because
it simply presents what changes.

The Social Platform perpetration will be carried out into three separate way back- end
creation, frontal – end creation, and eventually testing of the operation. It is not suggested to
cover all components of the project in depth becausetothethesisrestriction. However,itcanshowall
the steps needed to successfully launch the MERN application. The Express.js library, which
runs on top of Node.js, is used to create the app endpoint.

The Mongoose library is also installed to connect to the MongoDB website and store the
data in JSON format. Finally, routing logic is implemented, which includes endpoints for
interacting with the front-end. A node package called Mongooseis installed to connect the MongoDB
website to the Express.js application. Mongoose is an Object Data Modeling tool that aids in
the design of MongoDB schemas. Models are defined using the visual Schema interface.
Developer can use the Schema to define the fields that are saved in each document, as well
as their confirmation styles and dereliction values.

Page | 31
 CHAPTER 5: RESULT & REFERENCES:

RESULT:
There are four pages: a registration page for registration ofusers, a login page for who already
registered a home pageto post images, videos or massage, and a profile page to seeall the
post that user share with friends.

1.Register Page: 2.Login Page: 3.Profile Page: 4.Home Page:

References:
 https://annalsofrscb.ro/index.php/journal/article/view/6683/5035

 https://www.irjet.net/archives/V5/i2/IRJET-V5I2397

 https://www.academia.edu/68509443/A_Review_on_Technologies_use
d_in_MERN_stack

 https://www.theseus.fi/bitstream/handle/10024/502110/Cuong_Cao_
Nguyen.pdf?sequence=2

 IEEE.Dyl, T. and Przeorski, K., 2017. Mastering Full-Stack React Web

Development. PacktPublishing.

Page | 32