Training Report on MERN Stack Web

Development

Summer Training Report submitted in partial fulfilment

Of the requirement for the degree of

Bachelor of Technology
In
Electronics and Communication Engineering

Submitted by:-
Shivang Pasricha (01196307321)

MAHARAJA SURAJMAL INSTITUTE of TECHNOLOGY

C-4, Janakpuri, New Delhi-110058
AFFILIATED TO GURU GOBIND SINGH INDRAPRASTHA
UNIVERSITY

2021–2024

I
Certificate
 Acknowledgement

I express my deep sense of gratitude to Ms. Sonia Malik for encouraging and enabling
me to take up the summer training, ‘Full Stack Web Development using MERN’,
required for this project. Also, I would like to express my sincere gratitude to Dr.
Pradeep Sangwan (HOD, Department of Electronics and Communication
Engineering, Maharaja Surajmal Institute of Technology, New Delhi) for allowing me
to undergo the summer training.

I am grateful to our instructor, Mr. Amit Srivastava, Managing Director, Brain

Mentors Pvt. Ltd., New Delhi for his in-depth teaching and guidance throughout the
duration of the course.

I would also like to acknowledge with thanks the kind of patronage, loving inspiration
and timely guidance from Col. Ranjit Singh, Director, MSIT, the Training
Coordinators and Teachers for their guidance, suggestions and constructive criticism
that helped this project grow immensely.

Last but not the least; I would like to thank my family and my friends who have
been a constant support to me.
 Table of content

Title Page....................................................................................................................I
Certificate...................................................................................................................II
Acknowledgement….................................................................................................III
Chapter 1 – Introduction
1.1 Need & Objective
1.2 Methodology
1.2.1 Waterfall Model
1.3 Web Development
1.3.1 Front-End Development
1.3.2 Back-End Development
1.3.3 Full Stack Development
1.4 Software Used
1.4.1 VS code Editor
1.4.2 React.js
1.4.3 Node.js
1.4.4 Express.js
1.4.5 Mongo DB
1.4.6 Postman
1.4.7 Git & Github
1.4.8 Bootstrap
1.5 About Organization

Chapter 2: Why Should You Work With MERN Stack?

2.1 Use case of MERN Stack
 Chapter 1- Introduction

1.1 Need and Objective

Numerous people are constantly flooding movie theatres and cinemas for some
entertainment daily. The excitement of these customers can be crushed however by
the long lines involved in the manual process of booking and buying tickets. This is
why many businesses are opting to invest in digital ways for customers to access their
services.
There are several reasons why a business would opt for an online booking system.
Some of them include;

1.) Remote - An online system allows customers to access services from the
comfort of their homes. As long as a user has access to a phone or computer,
they can get easy access to the services available.
2.) Minimize Traffic - Making services easily accessible to the customers’ means
that fewer will be coming to purchase from the ticket window. This might also
cut costs for the business because they will not need so many at the ticket
windows. Employees will be able to direct their energies elsewhere.
3.) Constant Service - Online platforms don't need a break or the night off. They
can run constantly, giving every customer the benefit of accessing information
at any time of the day.
4.) Increased Revenue - When a business has an online service platform, there is
no limit to the number of people it can reach. It is not limited by the time
either because it operates 24/7. This means that promotions and ads can run
throughout and this could potentially boost sales.
1.2 Methodology
The following project utilizes the “Waterfall Methodology”

1.2.1 The waterfall methodology

The Waterfall methodology—also known as the Waterfall model—is a

sequential development process that flows like a waterfall through all phases
of a project (analysis, design, development, and testing, for example), with
each phase completely wrapping up before the next phase begins.

It is said that the Waterfall methodology follows the adage to “measure twice,
cut once.” The success of the Waterfall method depends on the amount and
quality of the work done on the front end, documenting everything in
advance, including the user interface, user stories, and all the features’
variations and outcomes. With most of the research done upfront, estimates of
the time needed for each requirement are more accurate, and this can provide
a more predictable release date. With a Waterfall project, if parameters
change along the way, it’s harder to change course than it is with agile
methodology.

Figure 1.2.1-The waterfall model

 a.) Requirements

The Waterfall methodology depends on the belief that all project

requirements can be gathered and understood upfront. The project manager
does their best to get a detailed understanding of the project sponsor’s
requirements. Written requirements, usually contained in a single document,
are used to describe each stage of the project, including the costs,
assumptions, risks, dependencies, success metrics, and timelines for
completion.

b.) Design

Here, software developers design a technical solution to the problems set

out by the product requirements, including scenarios, layouts, and data
models. First, a higher level or logical design is created that describes the
purpose and scope of the project, the general traffic flow of each
component, and the integration points. Once this is complete, it is
transformed into a physical design using specific hardware and software
technologies.

c.) Implementation

Once the design is complete, technical implementation starts. This might be

the shortest phase of the Waterfall process, because painstaking research and
design have already been done. In this phase, programmers code
applications based on project requirements and specifications, with some
testing and implementation taking place as well. If significant changes are
required during this stage, this may mean going back to the design phase.

d.) Verification or testing

Before a product can be released to customers, testing needs to be done to

ensure the product has no errors and all of the requirements have been
completed, ensuring a good user experience with the software. The testing
team will turn to the design documents, personas, and user case scenarios
supplied by the product manager to create their test cases.
 e.) Deployment and maintenance

Once the software has been deployed in the market or released to

customers, the maintenance phase begins. As defects are found and change
requests come in from users, a team will be assigned to take care of updates
and release new versions of the software

1.3 Web Development

Web development is the building and maintenance of websites; it’s the work that
happens behind the scenes to make a website look great, work fast and perform well
with a seamless user experience.

Web developers, or ‘devs’, do this by using a variety of coding languages. The

languages they use depends on the types of tasks they are preforming and the
platforms on which they are working. The field of web development is generally
broken down into front-end (the user-facing side) and back-end (the server-side).

Fig. 1.3 Full Stack Development

1.3.1 Front-End Development

A front-end dev takes care of layout, design and interactivity using HTML, CSS and
JavaScript. They take an idea from the drawing board and turn it into reality. What
you see and what you use, such as the visual aspect of the website, the drop-down
menus and the text, are all brought together by the front-end dev, who writes a series
of programs to bind and structure the elements, make them look good and add
interactivity. These programs are run through a browser.

1.3.2 Back-End Development

The back-end developer engineers what is going on behind the scenes. This is where
the data is stored, and without this data, there would be no front-end. The back-end of
the web consists of the server that hosts the website, an application for running it and
a database to contain the data. The back-end development uses computer programs to
ensure that the server, the application and the database run smoothly together. To do
all this, they use a variety of server-side languages, like PHP, Ruby, Python and Java.

1.3.3 Full-Stack Development

Full-stack developers take care of both the front-end and the back-end, and need to
know how the web works on all levels, in order to determine how the client- and
server-sides will relate. Popular stacks used are:
• LAMP stack: JavaScript - Linux - Apache - MySQL - PHP
• LEMP stack: JavaScript - Linux - Nginx - MySQL - PHP
• MEAN stack: JavaScript - Mongo DB – Express.js – Angular.js - Node.js
• MEAN stack: JavaScript - Mongo DB – Express.js – React.js - Node.js
• Django stack: JavaScript - Python – Django - MySQL
• Ruby on Rails: JavaScript - Ruby - SQLite – Rails
1.4 Software used

1.4.1 VS Code Editor

Fig 1.4.1 VS Code

Visual Studio Code, also commonly referred to as VS Code, is a source-code editor

made by Microsoft with the Electron Framework, for Windows, Linux and Mac OS.
Features include support for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git. Users can change the
theme, keyboard shortcuts, preferences, and install extensions that add additional
functionality.

Visual Studio Code is a lightweight but powerful source code editor which runs on
your desktop and is available for Windows, Mac OS and Linux. It comes with built-
in support for JavaScript, Type Script and Node.js and has a rich ecosystem of
extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP,
Go, .NET).

Out of the box, Visual Studio Code includes basic support for most common
programming languages. This basic support includes syntax highlighting, bracket
matching, code folding, and configurable snippets. Visual Studio Code also ships
with IntelliSense for JavaScript, Type Script, JSON, CSS, and HTML, as well as
debugging support for Node.js. Support for additional languages can be provided by
freely available extensions on the VS Code Marketplace.

Source control is a built-in feature of Visual Studio Code. It has a dedicated tab
inside of the menu bar where users can access version control settings and view
changes made to the current project. To use the feature, Visual Studio Code must be
linked to any supported version control system (Git, Apache Subversion, Perforce,
etc.). This allows users to create repositories as well as to make push and pull
requests directly from the Visual Studio Code program.

a) Code to learn
Visual Studio Code highlights keywords in your code in different colors to
help you easily identify coding patterns and learn faster.

b) Fix errors as you code

As you code, Visual Studio Code gives you suggestions to complete lines of
code and quick fixes for common mistakes. You can also use the debugger in
VS Code to step through each line of code and understand what is happening.

c) Compare changes in your code

Use the built-in source control to save your work over time so you don't lose
progress. See a graphical side-by-side view to compare versions of your code
from different points in time.
1.4.2 REACT.JS

Fig. 1.4.2 React JS

 React is one of the most popular open-source front-end JavaScript libraries

used for building Web applications.
 Before using react, it has some prerequisites that one should follow, that
you must download Node packages in your system with their latest
versions. Also, you must have an understanding of HTML, CSS and
JavaScript.
 It is used to build user interfaces, especially for a single page web
application.
 It is not a JavaScript framework. It is just a JavaScript library developed by
Facebook to solve problems we could not solve earlier using other libraries
while building web and mobile applications.
 React is also used for making a grip over the view layer for mobile and web
applications.
 It allows us to create reusable UI (User Interface) components.
 It was first created by software engineer Jordan Walk, who works for
Facebook.
 React was first deployed in the Facebook news feed.
 It allows developers to create large web applications that can easily change
the data of the page even without reloading the page.
 The main objective of reacting is that it only works on user interfaces in the
application, whether mobile or web.
 It is very fast, simple and scalable.
 React is also used with a combination of other JavaScript libraries or
frameworks.
 There are a lot of open-source platforms that are also used to make the
front-end web and mobile applications easier, like Angular JS in MVC, but
still, React replaces the Angular from the MEAN stack. Now, most
developers are using the MERN stack in which react is used; the main
reason is that it is very fast and has more advantages over other front-
end frameworks.

 React code is made of entities called components. Components can be rendered

to a particular element in the DOM using the React DOM library. When
rendering a component, one can pass in values that are known as "props". The
two primary ways of declaring components in React is via functional
components and class-based components.

 Parallel native technology for creating reusable building blocks of the web —
Web Components. Advantage over React components — ability to create
components not only for React but also for Angular, other libraries/frameworks,
and for projects without any external dependency.

 Another notable feature is the use of a virtual Document Object Model or virtual
DOM. React creates an in-memory data-structure cache, computes the resulting
differences, and then updates the browser's displayed DOM efficiently. This
process is called reconciliation. This allows the programmer to write code as if
the entire page is rendered on each change, while the React libraries only render
subcomponents that actually change. This selective rendering provides a major
performance boost. It saves the effort of recalculating the CSS style, layout for
the page and rendering for the entire page.

 JSX, or JavaScript XML, is an extension to the JavaScript language syntax.

Similar in appearance to HTML, JSX provides a way to structure component
rendering using syntax familiar to many developers. React components are
typically written using JSX, although they do not have to be (components may
also be written in pure JavaScript). JSX is similar to another extension syntax
created by Facebook for PHP called XHP.

 Hooks are functions that let developers "hook into" React state and lifecycle
 features from function components. They make codes readable and easily
understandable. Hooks don’t work inside classes — they let you use React
without classes. React provides a few built in Hooks like use State, use Context,
use Reducer and use Effect to name a few. They are all stated in the Hooks API
Reference. use State and use Effect, which are the most used, are for controlling
states and side effects respectively in React Components.

Some important features of React

 Easy to learn - One of the great advantages of using react as it is very easier for a
beginner to learn it and make web and mobile applications using this front-end
framework. Anyone with a piece of previous basic knowledge in programming
can easily understand React compared to Angular. Angular is referred to as a '
Domain Specific Language ', so it is implied that it is quite difficult to understand
it. For Learning React, you need the basic knowledge of CSS and HTML.
 Simple - React is one of the simplest open-source JavaScript front-end
frameworks for building web and mobile applications. It uses the component-
based approach, uses plain and simple JavaScript, and a well-defined lifecycle,
which makes react much simpler and easier. So that one can easily learn it and
build professional mobile and web applications. It uses a simple syntax named
JSX, which allows learners or developers to mix HTML with JavaScript to make
it easier for them to apply and use it for making efficient web and mobile
applications. However, it is not required to use JSX, you can either use plain
JavaScript, but as compared to JSX, JSX is the much better option over it due to
its simplicity and easier syntax.
 Data Binding - React uses an application architecture known as Flux to control
data flow to components via one control point called the dispatcher. It uses one-
way data binding, which is easier to debug self-contained components of large
React applications.
 Native Approach - React is used to create mobile applications (React Native) and
web applications. React allows the reusability of code and can easily support it,
which has many benefits and is much time saver. So simultaneously, at the same
time, we can make IOS, Web applications and Android.
 Performance - React has very fast performance due to the immutability of data.
As the name suggests, we can predict that the immutable data structures never
change and allows you to compare direct object references instead of doing deep-
 tree comparisons. The above reason ultimately affects the performance of reacting
and makes it faster.
 Testability - React is very easy to test; whatever applications we are generating
from the react, whether mobile or web applications, it is much easier for us to test
it on react. There are some state functions in the react, where various react views
are treated as these functions of the states, and we can easily manipulate with the
state we pass to the react view. Also, we can take a look at the output and
triggered actions, functions, events, etc.
1.4.3 NODE.JS

Fig. 1.4.3 NODE JS

 JS is an open-source server environment, and it is a cross-platform runtime

environment for executing JavaScript code outside a browser.
 JS is not a programming language, and even it is not a framework.
 It is often used for building and developing numerous backend services like net
applications, mobile applications.
 Massive corporations principally utilize it in production like Uber, PayPal, and
Netflix.
 It may be a free ASCII text file platform and may be utilized by anybody.
 It will run on numerous operative systems like Windows, Mac, Linux, Unix, etc.
 It is incredibly simple to urge started with it and may even be used for agile
development and prototyping.
 It provides extremely ascendable and really quick services to the users.
 It is incredibly consistent and may be used as an ASCII text file cleaner.
 It continuously uses JavaScript; thus, it's ultimately helpful for a computer user to
quickly create any net service or any net or mobile application.
 It provides a massive system for any ASCII text file library.
 It contains a Non-blocking or, can say, Asynchronous nature.
 Node.js has an event-driven architecture capable of asynchronous I/O. These
design choices aim to optimize throughput and scalability in web applications
with many input/output operations, as well as for real-time Web applications (e.g.,
real-time communication programs and browser games). Node.js is primarily used
to build network programs such as Web servers. The most significant difference
between Node.js and PHP is that most functions in PHP block until completion
(commands only execute after previous commands finish), while Node.js
functions are non-blocking (commands execute concurrently or even in parallel,
 and use call-backs to signal completion or failure). Node.js operates on a single-
thread event loop, using non-blocking I/O calls, allowing it to support tens of
thousands of concurrent connections without incurring the cost of thread
context switching.

Some important features of React -

 Easy Scalability: JS is highly scalable because it uses a single-threaded model

with event looping. The server usually responds in a non-blocking way due to the
help of the event mechanism. It also makes the server very scalable instead of
traditional servers that create limited threads to handle requests. Node.js uses a
single-threaded program, and this program will be able to provide service to many
requests.
 Fast: The event loop in Node.js handles all asynchronous operations, so Node.js
acts like a fast suite, and all the operations in Node.js are performed quickly like
network connection, reading or writing in the database, or file system. It runs on
the V8 engine developed by Google.
 Easy to learn and debug code: JS is quite easy to learn and debug because it uses
JavaScript for running code of web-based projects and various web and mobile
applications. If you have excelled in front-end developing and have a good
command of JavaScript, you can easily build and run the application on Node.js
and explore more as much you can; it depends on your capability.
 Real-time web apps: JS plays a key role in making real-time web applications.
And If you are building a mobile or a web application, you can also use PHP,
although it will take the same time duration as when you use Node.js. Still, if
 someone wants to build gaming apps and chat applications, then Node.js is a
much better option because of its faster synchronization.
 Caching Advantage: JS provides the caching property in which a single module
is cached. Sometimes you do not need to re-execute the same lines of code
because it has already been cached using Node.js.
 Data Streaming : In Node.js, hypertext transfer protocol ( HTTP ) requests and
responses area unit thought-about as 2 separate events. They're knowledge
streams, thus once you method a file at the time of loading, it'll scale back the time
and create it quicker once the info is given within the style of transmissions. It
additionally permits you to stream audio and video files at lightning speed.
 Object-Oriented Approach: A huge complaint against Node.js was its
JavaScript heritage, which frequently involved many procedural spaghetti codes.
Frameworks like Coffee Script and Typescript solved these issues but came as a
bolt-on for those who seriously cared about coding standards. With the release and
general adoption of ES6, Classes are built into the framework, and the code looks
syntactically similar to C#, Java and SWIFT.
 Event-Driven and Asynchronization - All Apis of the Node.js library area unit
asynchronous, that is, non-blocking. It suggests that a Node.js based mostly server
ne'er waits for associate API to come back knowledge. The server moves to the
consequent API once line it, and a notification mechanism of Events of Node.js
helps the server to urge a response from the previous API decision.
 Corporate Support: There are a lot of famous companies like PayPal, Wal-Mart,
Microsoft, and Google that are using Node.js for building the applications.
Node.js uses JavaScript, so most companies are combining front-end and backend
Teams into a single unit.
1.4.4 EXPRESS.JS

Fig. 1.4.4 NODE JS

 Express is a JavaScript server-side framework that runs within js.

 It is one of the best backend development JavaScript Frameworks.
 It provides the developer with a platform to create and maintain robust servers.
 Express is used for building and designing web and mobile applications easily and
quickly.
 Express is used to provide server-side logic for mobile and web applications, and
as such, it is used all over the place.
 It allows developers to spin up robust APIs (Application Programming
Interface) and web servers much easier and simpler.
 Express makes robust web servers easier to organize your application's
functionality with routing and middleware.
 It also adds helpful functionalities to Node.js HTTP (HyperText Transfer
Protocol) objects.

 It is an important component of the MERN and MEAN Stack and is used to

build fast, maintainable, and robust productions web applications.

 Express.js, or simply Express, is a web application framework for Node.js,

released as free and open-source software under the MIT License. It is designed
for building web applications and APIs. It has been called the de facto standard
server framework for Node.js.

 The original author, TJ Holowaychuck, described it as a Sinatra-inspired server,

meaning that it is relatively minimal with many features available as plugins.
Express is the back-end component of the MERN stack, together with the
Mongo DB database software and React.js front-end framework.

Fig. Express JS with Node JS

 Express.js is specifically designed for building single-page, multi-page, and

hybrid web applications.
 It makes it very easy to develop an application which can be used to handle
multiple types of requests like the GET, PUT, and POST and DELETE
requests.
1.4.5 MONGO DB

Fig.1.4.5 Mongo DB

 Mongo DB is the most popular NoSQL (NoSQL or Non Structured Query

Language) database, an open-source document-oriented database.
 The term 'NoSQL' typically means a non-relational database that does not require
a fixed schema or proper relational tables to store the necessary data in it. Mongo
DB stores the data in a different format other than the relational tables, consisting
of rows and columns.
 It implies that Mongo DB is not based on the table-like relational database
structure. On the other hand, it provides an altogether different mechanism for the
retrieval and storage of data.
 The storage format in which the data is stored is known as BSON, which stands
for Binary JavaScript Object Notation; its binary structure encodes length and
type of information, which allows it to be parsed much more quickly.
 Mongo DB uses BSON when storing documents in collections.
 It allows a highly scalable and flexible document structure.
 It is very faster as compared to RDBMS due to its efficient storage and indexing
techniques.
 In Mongo DB, complex join operations are not available; hence, it cannot support
complex transactions.
 Mongo DB uses JavaScript for coding as a language which is one of the great
advantages.
 It is Schema less as any data stored which is stored in a separate document.
 In Mongo DB, there is no concept of relationships or table formations, as this is
happening in RDBMS (Relational Database Management System), in which tables
have a certain relation between them.
 It also supports a flexible document model, which is very fast for any developer to
create.
 Mongo DB is one of the important types of NoSQL Databases. It is more scalable
and provides excellent performance if we notice that it will reach its scaling limit
whenever a database runs on a single server.

 Mongo DB is a NoSQL database that scales by adding more and more servers
and increases productivity with its flexible document model.

 Mongo DB is a cross-platform document-oriented database program. Classified

as a No SQL database program, Mongo DB uses JSON-like documents with
optional schemas. Mongo DB is developed by Mongo DB Inc. and licensed
under the Server-Side Public License (SSPL).

 Mongo DB is also available as an on-demand fully managed service. Mongo DB

Atlas runs on AWS, Microsoft Azure, and Google Cloud Platform. This is used
in this project as the database service.

 Mongo DB provides high availability with replica sets. A replica set consists of
two or more copies of the data. Each replica-set member may act in the role of
primary or secondary replica at any time. All writes and reads are done on the
primary replica by default.
 Secondary replicas maintain a copy of the data of the primary using built-in
replication. When a primary replica fails, the replica set automatically conducts
an election process to determine which secondary should become the primary.
Secondary can optionally serve read operations, but that data is only eventually
consistent by default.

 Mongo DB can be used as a file system, called GridFS, with load balancing and
data replication features over multiple machines for storing files. This function,
called grid file system, is included with Mongo DB drivers. Mongo DB exposes
functions for file manipulation and content to developers. GridFS can be
accessed using mongo files utility or plugins for Nginx and lighttpd. GridFS
divides a file into parts, or chunks, and stores each of those chunks as a separate
document.
 JavaScript can be used in queries, aggregation functions (such as Map Reduce),
and sent directly to the database to be executed.

Some important features of Mongo DB -

 Schema-less Database: Mongo DB has this one of the great features, which
means that one collection can hold different types of documents in it. Due to this
extraordinary feature, Mongo DB provides great flexibility to databases. In the
Mongo DB database, a single collection comprises multiple documents, and these
documents may further comprise the different numbers of values, fields, and so
on. One document doesn't need to be a must to relate with the other documents, as
it happens in relational databases.
 Indexing: In the Mongo DB database, one can easily fetch out the necessary data
from the data pool due to this indexing feature. In Mongo DB, every data item has
provided a particular index, categorized as primary and secondary indices. With
this indexing, data retrieval is easier for the user; it saves a lot of time. If the data
is not indexed, the database searches each document with the specified query,
which takes lots of time and is inefficient.
 Document Oriented: In Mongo DB, all the data has been stored in documents
instead of tables like SQL. Also, these documents have their unique object id. In
these documents, the informative data is stored in fields, i.e., key-value pairs
instead of columns and rows, making the data much more flexible and easier to
fetch out rather than applying queries for every data compared to RDBMS.
 Faster – Mongo DB is very fast compared with relational database (RDBMS),
which is document-oriented. Each data item has its index value, making it easier
for us to retrieve any data without wasting time writing queries and making logic
accordingly.
 Scalability: Mongo DB is more scalable with the help of sharding. It provides
horizontal scalability. Here the term sharding means distributing data on multiple
servers; in this, a large amount of data has been divided into multiple small data
chunks with the help of shard key. These types of data chunks are evenly
distributed across shards that reside across many physical servers.
 High Performance: Mongo DB has very high performance and has data
persistency as compared to other databases due to the presence of its great features
like indexing, scalability, replication, etc.
 Replication and Highly Available – Mongo DB increases the availability of data
due to creating multiple copies of data on different servers. Providing redundancy
or data replication ultimately protects the database from any hardware failure and
protects the data from being lost in the future. I suppose if one server was not
working or clashes due to error, and then data can easily be retrieved from other
active servers, who are currently working at that time, this will all be due to
redundancy of data.
 Aggregation: This feature of Mongo DB is quite similar to the SQL GROUPBY
clause. This GROUPBY clause performs various operations on the grouped data
to get the unique or computed
 Simple Environment Setup – Mongo DB has a very simple environment setup.
One can easily set up Mongo DB in their system without applying much effort.

1.4.6 POSTMAN

Fig. 1.4.6 Postman

Postman is an API platform for building and using APIs. Postman simplifies each step
of the API lifecycle and streamlines collaboration so you can create better APIs—
faster. The Postman API Platform delivers high productivity for developers, great
quality for
APIs, and airtight governance for organizations across the world. Postman started in
2012 as a side project of software engineer Abhinav and Asthana, who wanted to
simplify API testing, while working at Yahoo Bangalore. He launched Postman as a
free app in the Chrome Web Store.

1.4.7 GIT & GITHUB

Fig. 1.4.7(1)

Git is an open-source distributed version control system. It is designed to handle

minor to major projects with high speed and efficiency. It is developed to co-ordinate
the work among the developers. The version control allows us to track and work
together with our team members at the same workspace.
Git is foundation of many services like GitHub and GitLab, but we can use Git
without using any other Git services. Git can be used privately and publicly.
Git is easy to learn, and has fast performance. It is superior to other SCM tools like
Subversion, CVS, Perforce, and Clear Case.

Fig.1.4.7(2) GitHub

GitHub, Inc. is a provider of Internet hosting for software development and version
control using Git. It offers the distributed version control and source code
management (SCM) functionality of Git, plus its own features. It provides access
control and several collaboration features such as bug tracking, feature requests, task
management, continuous integration and wikis for every project. Headquartered in
California, it has been a subsidiary of Microsoft since 2018.
It is commonly used to host open-source projects. As of January 2020, GitHub reports
having over 40 million users and more than 190 million repositories (including at
least 28 million public repositories). It is the largest source code host as of April 2020.
GitHub can be separated as the Git and the Hub. GitHub service includes access
controls as well as collaboration features like task management, repository hosting,
and team management.

1.4.8 BOOTSTRAP

Fig.1.4.8 Bootstrap

Bootstrap is a free and open-source tool collection for creating responsive

websites and web applications. It is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first websites. Nowadays, the
websites are perfect for all browsers (IE, Firefox, and Chrome) and for all sizes of
screens (Desktop, Tablets, Phablets, and Phones). All thanks to Bootstrap
developers – Mark Otto and Jacob Thornton of Twitter, though it was later
declared to be an open-source project.
Bootstrap is a free and open-source web development framework. It’s designed to
ease the web development process of responsive, mobile-first websites by
providing a collection of syntax for template designs.
In other words, Bootstrap helps web developers build websites faster as they
don’t need to worry about basic commands and functions. It consists
of HTML, CSS, and JS-based scripts for various web design-related functions and
components.
This article will cover the benefits of using Bootstrap and explain the different
file types it uses. By the end, you will know whether Bootstrap can benefit your
workflow.

1.5 About Organization

 Brain Mentors

Fig. 1.5 Brain Mentors Pvt. Ltd.

Brain Mentors Pvt. Ltd. is a Team of IT Professional’s. Our All Trainers worked as
Developers and having Software / Web Development Experience. Our Trainers
Worked with TOP MNC’s like (Nucleus Software, IVP, UST Global, HCL etc.).
Our Trainers also having Experience in Enterprise Application Development like UI
and UX Development, Mobile App Development & Artificial intelligence. Our
Trainers Deliver Corporate Trainings on Various MNC’s like UST Global, TPDDL,
IBM, India Mart, NIIT Technologies, H & R Block, CGI Fidelity, United Health
Group and many more.
 Chapter 2- Why Should You Work With MERN
Stack?

There are many good reasons to use the MERN Stack. For example, it allows the
creation of a 3-tier architecture that includes frontend, backend, and database using
JavaScript and JSON.

Mongo DB, which is the base of the MERN stack, is designed to store JSON data
natively. Everything in it, including CLI and query language, is built using JSON and
JS. The No SQL database management system works well with Node JS and thus,
allows manipulating, representing, and storing JSON data at every tier of the
application.

It comes in a variant called Mongo DB Atlas that further eases database management
by offering an auto-scaling Mongo DB cluster on any cloud provider and with just a
few clicks.

Express is a server-side framework that wraps HTTP requests and responses and
makes mapping URLs to server-side functions easy. This perfectly complements the
React JS framework, a front-end JS framework for developing interactive UIs
in HTML while communicating with the server.

As the two technologies work with JSON, data flows seamlessly, making it possible
to develop fast and debug easily. To make sense of the entire system, you need to
understand only one language, i.e., JavaScript and the JSON document structure.

2.1Use Cases of MERN

Like other popular web stacks, it is possible to develop whatever you want in MERN.
Nonetheless, it is ideal for cloud-based projects where you require intensive JSON
and dynamic web interfaces. A few examples of purposes where MERN is used are:

 Calendars and To-do Apps

A calendar or a to-do app is a rudimentary project that can tell you a lot about the
mechanics of the MERN stack. You can design the frontend, i.e., the interface of the
calendar or to-do app using React JS.
  Interactive Forums

Another suitable use case for MERN is an interactive forum, which can be a social
media platform or a website that allows users to share messages and communicate.
The topic of the interactive forum may or may not be predefined.

 Social Media Product

An interactive forum is just one use of the MERN stack for social media. These
include ads, posts, a mini web app embedded in the social media page, etc.
 Chapter 3 – Project

This project is based on the basic MERN stack application development methodology.
The below image show the home page of the application.

To add your Task follow the steps given below:-

The below image shows – How we can add any of our daily task in the website.
Step 1:- After typing in the task (as shown) you have to press .
Step 2:- After pressing , your Task will be added as shown in the image
below.

Step 3:- You will be shown all the tasks on the home page. If you want to
segregate the tasks based on: if its Complete or Incomplete, you can use the
button on the right of where you enter your tasks.

The above Image show all the tasks that you have completed.
 The above Image shows all the task that are yet to be completed.

Step 4:- To delete the task that you have completed, simply press the
delete button.

The Task (Complete the Assignment) has been deleted.

 Chapter 4 Conclusion

Why use MERN Stack?

1.) UI rendering and performance

React JS is the best when it is about UI layer abstraction. Since React is only a
library, it provides you the freedom to build the application and organize the code
however you want. So, it is better than Angular in terms of UI rendering and
performance.

2.) Cost-Effective
As MERN Stack uses one language throughout that is JavaScript so it will be
beneficial for a company to hire JavaScript experts only rather than hiring
different specialists for different technology. This move will save a lot of time
and money.

3.) Open Source

All technologies that are involved in MERN are open-source. This feature allows
a developer to get solutions to queries that may evolve during development, from
the available open portals. As a result, it will be beneficial for a developer.

4.) Easy to switch between client and server

As everything is written in one language this is why MERN is simple and fast.
And also it is easy to switch between client and server.

Web Development is an important skill to have in a developer’s arsenal and while

the web allows for the usage of several technology stacks, it is useful to have
proficiency in one. MERN stack, comprising of Mongo DB, Express, React and
Node is a very powerful technology stack to develop single/multi-page web
applications.

JavaScript has been used as the basic programming language for the project as it
is the language of the web and is being used extensively for web development.
View engines have been used as the framework for the client-side development
while Express is used for Node.js server-side development.
 References

1. React.js Docs: https://reactjs.org/

2. NPM: https://www.npmjs.com/
3. JavaScript: https://www.w3schools.com/js/
4. Bootstrap: https://getbootstrap.com/
5. Express.js Docs: https://expressjs.com/
6. Node.js Docs: https://nodejs.org/en/
7. MongoDB: https://www.mongodb.com/docs/
8. Google: https://www.google.com/
9. Additional helping articles on: www.freecodecamp.org
10. Lestari, D., Hardianto, D., Hietayanto, A.,(2014), “Analysis of User
Experience Quality on Responsive Web Design from its Informative
Perspective”, International Journal of Software Engineering and its
Applications,(5),53-62