A

INDUSTRIAL TRAINING REPORT

ON
FULL STACK WEB DEVELOPMENT

Submitted to:

R.T.U., KOTA (RAJASTHAN)

in partial fulfillment of the requirement of the award of degree of

BACHELOR OF TECHNOLOGY

Under the Supervision of Submitted by:

Pawan Sen Sachin Pal

HOD 20EAICS134

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

ARYA COLLEGE OF ENGINEERING JAIPUR

RAJASTHAN TECHNICAL UNIVERSITY, KOTA (RAJASTHAN)

SESSION (2023-2024)

i
 CERTIFICATE OF COMPLETION

This is certify that the project entitled “Full Stack Web Development” carried out by Sachin
Pal a student of Bachelor of Technology, 7th Sem of ARYA College (ACE) Kukas, Jaipur, at
Learn & Build done is a satisfactory account of the bonafide work under my supervision, is
recommended towards the end of his/her 7th semester of B. TECH.

Project In Charge Sachin Pal

HOD, CSE B. TECH, 7 th Sem

ii
 DECLARARION BY THE CANDIDATE

I, Sachin Pal, hereby declare that the project work entitled “Photo Sharing Website” is an
authenticated work carried out by me at “Learn & Build ” for the partial fulfillment of the
award of the degree of B.TECH and this work has not been submitted for similar purpose
anywhere else.

Date: 18/12/2023 Sachin Pal

Place: ACE, Kukas 20EAICS134
B. TECH 7th Sem

iii
 ACKNOWLEDGEMENT

“There are times when silence speaks so much more loudly than words of praise to only as
good as be little person, whose words do not express, but only put a veneer over true feelings,
which are of gratitude at this point of time.”

“Presentation, inspiration and motivation have always played a key role in the success of any
venture.”

I pay my deep sense of gratitude to Mr. Pawan Sir, Head of Department, Arya College of
engineering, Kukas, to encourage me to the highest peak and to provide me the opportunity to
prepare the project. I am immensely obliged to my friends for their elevating inspiration,
encouraging guidance and kind supervision in the completion of my project.

I feel to acknowledge my indebtedness a deep sense of gratitude to my guide Mr. Narendra

Sir, Training Coordinator, Arya College of Engineering.

Last, but not the least, my parents are also an important inspiration for me and also like to
thank all those who directly or indirectly helped me throughout my work. So, with due
regards, I express my gratitude to them.

(Sachin Pal)

iv
CERTIFICATE

v
 TABLE OF CONTENTS
Certificate of Completion ii
Candidate’s Declaration iii
Acknowledgement iv
Certificate v
Abstract 1

Chapter 1: Introduction 2-3

Chapter 2: Front-End Development 4-19
2.1 HTML5 and Semantic Markup
2.2 CSS3 Styling and Responsive Design
2.3 JavaScript Fundamentals
Chapter 3: Front-End Framework 20-24
3.1 React Js
3.2 React Keys
3.3 Advantages
3.4 React State
Chapter 4: Back-End Development 25-31
4.1 Server-Side Scripting Languages
4.1.1 Node.Js
4.1.2 Features of Node.Js
4.1.3 Parts of Node.Js
Chapter 5: Database Management (NoSQL) 32-33
5.1 Mongo DB
5.2 Features of MongoDB
5.2.1 Replication
5.2.2 Scalability
Chapter 6: API 34
6.1 Definition
6.2 Example
6.3 API Development
Chapter 7: Project 35-39
7.1 Project Outline
7.2 Project Screenshots
7.2.1 Login Page
7.2.2 Add Locations Page
7.2.3 Photos Uploaded
Chapter 8: Conclusion 40-43
8.1 Future Considerations and Continuous Learning
Chapter 9: References 44

vi
 ABSTRACT

This industrial training report encapsulates a hands-on experience in the realm of Full Stack
Web Development, gained through an immersive training program conducted at Learn &
Build. The report encompasses a systematic overview of the key components, technologies,
and methodologies encountered during the training period. The report begins with an
introduction to Full Stack Web Development, elucidating its significance in the contemporary
digital landscape. It delves into the fundamental concepts of front-end and back-end
development, emphasizing the need for a holistic skill set in creating robust and dynamic web
applications.

The training program covered a wide array of technologies and tools essential for Full Stack
Web Development. The front-end segment included in-depth exploration of HTML5, CSS3,
JavaScript, and popular frameworks like React.js. Concurrently, the back-end component
focused on server-side scripting languages such as Node.js, along with database management
using NoSQL database (MONGODB).Furthermore, the report delves into the intricacies of
API development, covering RESTful architectures, and the significance of efficient data
communication between the front and back end. It also discusses the incorporation of version
control systems, such as Git, and collaborative development practices using platforms like
GitHub. The project involved designing an intuitive user interface, implementing responsive
design principles, integrating database functionalities, and ensuring seamless interaction
between the client and server sides. Throughout the training, a strong emphasis was placed on
industry best practices, code optimization, and security considerations. The report outlines the
methodologies adopted to ensure the scalability, maintainability, and security of the web
applications developed during the training.

In conclusion, the industrial training in Full Stack Web Development provided an invaluable
opportunity to acquire a diverse skill set and practical insights into the intricacies of web
development. The report serves as a comprehensive documentation of the entire training
experience, detailing the theoretical foundations, practical applications, and the relevance of
Full Stack Web Development in the contemporary technological landscape.

1
 INTRODUCTION

The industrial training in Full Stack Web Development undertaken Learn & Build represents
a pivotal phase in the professional development of the trainee. In an era where the digital
landscape is continually evolving, the ability to proficiently navigate the intricacies of both
front-end and back-end web development has become a requisite skill set for aspiring
developers. This training program served as a comprehensive immersion into the dynamic
world of Full Stack Web Development, providing a structured and hands-on learning
experience.

The introduction unfolds by presenting the overarching significance of Full Stack Web
Development in contemporary technology-driven environments. It highlights the increasing
demand for developers who possess a holistic understanding of both client-side and server-
side development to create seamless and feature-rich web applications. The discussion
outlines the essential components of front-end and back-end development, emphasizing the
symbiotic relationship between the two.

The subsequent section introduces the host organization, Learn & Build, providing context to
the training environment. A brief overview of the organization's mission, values, and notable
achievements sets the stage for the immersive learning experience that followed. This
introduction aims to establish the backdrop against which the trainee gained exposure to real-
world challenges and industry best practices in Full Stack Web Development.

As we embark on an exploration of the training experience, it is imperative to recognize the

role of Learn & Build as the catalyst for this transformative learning journey. This section
provides insight into the organization's ethos, its position in the industry, and the technologies
it champions. This contextual backdrop not only establishes the credibility of the training but
also underscores the real-world relevance of the skills imparted during the program.

2
Moreover, the introduction aims to outline the multifaceted objectives of the industrial
training. Beyond the acquisition of technical proficiency, the training seeks to install a
problem-solving mindset, encourage collaborative development practices, and foster an
awareness of industry trends and best practices. It is an odyssey into the practical realm of
Full Stack Web Development, where theoretical foundations are brought to life through
hands-on experiences and the completion of a comprehensive web application project.

The introduction concludes by outlining the objectives of the industrial training, emphasizing
the intention to acquire a well-rounded skill set encompassing the latest technologies and
methodologies in web development. It underscores the practical nature of the training, where
theoretical knowledge was applied to develop a comprehensive web application, thereby
bridging the gap between conceptual understanding and practical implementation. This
industrial training report seeks to document and share the insights gained during this
transformative learning experience.

3
 Front-End Development
HTML5 and Semantic Markup

This subsection delves into the fundamentals of front-end development, starting with HTML5
and the importance of semantic markup. It covers the syntax, structure, and semantic
elements, highlighting their role in creating accessible and well-organized web content.

HTML5 is the latest standard of Hypertext Markup Language, the code that describes the
structure and presentation of web pages. It's made up of three codes: HTML, which keeps the
structure; CSS, which affects the presentation; and JavaScript, which creates interactive
effects within web browsers.

Example: HTML5, the latest iteration of Hypertext Markup Language, forms the backbone of
front-end development. It introduces semantic elements like <header>, <nav>, and
<article>, facilitating clearer content structure and improved accessibility. Understanding the
semantic web promotes not only better search engine optimization but also enhances the
overall user experience.

6 Important Benefits of HTML5 to Choose for Your Project:

Cleaner Code Structure.

Cross-Browser Compatibility.

Audio and Video Tags.

Offline Browsing.

No More Cookies.

Canvas for Animation and Game Development .

HTML5 has short and crisp syntax and comes with smart and improved security
features hence it became very easy to write and manage HTML5 code. HTML5 also included
temporary client-side data storage with the help of SQL which made it possible for the users
to browse already loaded content even when they are offline.

4
HTML5 (Hypertext Markup Language 5) is a markup language used for structuring and
presenting content on the World Wide Web. It is the fifth and final major HTML version that
is a World Wide Web Consortium (W3C) recommendation. The current specification is
known as the HTML Living Standard. It is maintained by the Web Hypertext Application
Technology Working Group (WHATWG), a consortium of the major browser vendors—
Apple, Google, Mozilla, and Microsoft.

HTML5 was first released in a public-facing form on 22 January 2008, with a major update
and "W3C Recommendation" status in October 2014. Its goals were to improve the language
with support for the latest multimedia and other new features; to keep the language both
easily readable by humans and consistently understood by computers and devices such as
web browsers, parsers, etc., without XHTML's rigidity; and to remain backward-compatible
with older software. HTML5 is intended to subsume not only HTML 4 but also XHTML 1
and DOM Level 2 HTML.

HTML5 includes detailed processing models to encourage more interoperable

implementations; it extends, improves, and rationalizes the markup available for documents
and introduces markup and application programming interfaces (APIs) for complex web
applications. For the same reasons, HTML5 is also a candidate for cross-platform mobile
applications because it includes features designed with low-powered devices in mind.

Many new syntactic features are included. To natively include and handle multimedia and
graphical content, the new <video>, <audio>, and <canvas> elements were added;
expandable sections are natively implemented through <summary>...</summary> and
<details>...</details> rather than depending on CSS or JavaScript; and support for scalable
vector graphics (SVG) content and MathML for mathematical formulas was also added. To
enrich the semantic content of documents, new page structure elements such as <main>,
<section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure> are added. New
attributes were introduced, some elements and attributes were removed, and others such as
<a>, <cite>, and <menu> were changed, redefined, or standardized. The APIs and Document

5
Object Model (DOM) are now fundamental parts of the HTML5 specification, and HTML5
also better defines the processing for any invalid documents.

History

The Web Hypertext Application Technology Working Group (WHATWG) began work on the
new standard in 2004. At that time, HTML 4.01 had not been updated since 2000, and the
World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0. In
2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not
to renew it.

The Mozilla Foundation and Opera Software presented a position paper at a World Wide Web
Consortium workshop in June 2004, focusing on developing technologies that are backward-
compatible with existing browsers, including an initial draft specification of Web Forms 2.0.
The workshop concluded with a vote—8 for, 14 against—for continuing work on HTML.
Immediately after the workshop, WHATWG was formed to start work based upon that
position paper, and a second draft, Web Applications 1.0, was also announced. The two
specifications were later merged to form HTML5. The HTML5 specification was adopted as
the starting point of the work of the new HTML working group of the W3C in 2007.

6
CSS3 Styling and Responsive Design

In the ever-evolving landscape of web development, CSS3 emerges as a beacon of innovation

and style, pushing the boundaries of what is possible in the realm of web design. This
introduction embarks on a journey to uncover the transformative features and capabilities
introduced by CSS3, showcasing its evolution from its predecessor and illustrating how it has
become a catalyst for visually stunning, responsive, and interactive web experiences.

CSS3 is the latest iteration of the Cascading Style Sheets standard, succeeding CSS2.1. This
section provides an overview of the evolution, highlighting the major advancements and the
motivation behind the development of CSS3. It explores how CSS3 builds upon the
foundation laid by its predecessors, introducing a plethora of new features and enhancements.

Unlike its predecessors, CSS3 adopts a modular approach, breaking down the specification
into smaller, more manageable feature sets. This allows for incremental updates and easier
adoption of new features without necessitating a complete overhaul of the entire standard.
The modular structure paves the way for flexibility and adaptability in web design.

CSS3 introduces a richer set of selectors, expanding the ways developers can target and style
elements. This section explores the enhanced selectors, such as attribute selectors, pseudo-
classes, and combinators, empowering developers with more precise control over styling
elements.

One of the defining features of CSS3 is the formalization of Media Queries, enabling
responsive design. This section dives into the capabilities of Media Queries, showcasing how
CSS3 allows developers to craft styles that seamlessly adapt to various devices and screen
sizes.

CSS3 introduces the Flexbox layout model, revolutionizing how developers approach layout
design. This section delves into the flexibility and efficiency offered by Flexbox, enabling the
creation of complex layouts with ease.

The Grid Layout module provides a two-dimensional layout system, empowering developers
to create intricate and responsive designs. This section explores how Grid Layout enhances
the control over both rows and columns, offering unprecedented precision in layout design.

7
CSS3 Transitions bring smooth and gradual state changes to web elements. This section
demonstrates how transitions enhance the user experience, providing fluid and visually
pleasing effects during hover, focus, or other state changes.

CSS3 Animations elevate web design by introducing the capability to create complex and
interactive animations. This section explores how animations contribute to storytelling on the
web, captivate users, and provide a dynamic visual experience.

CSS3 introduces transformations, allowing elements to be translated, rotated, scaled, and

skewed in both two and three dimensions. This section showcases how transformations bring
depth and creativity to web design, enabling 3D effects and immersive experiences.

Some Syntax of CSS3 for performing styles in website are:

Attribute Selectors

/* Selects all anchor tags with a title attribute */

a[title] {

color: blue;

/* Selects input elements with a type attribute of 'text' */

input[type="text"] {

border: 1px solid #ccc;

Pseudo Classes

/* Selects the first paragraph element */

p:first-child {

font-weight: bold;

8
/* Selects every other row in a table */

tr:nth-child(even) {

background-color: #f2f2f2;

Box Shadow:

/* Apply a subtle box shadow to an element */

.box-with-shadow {

box-shadow: 3px 3px 5px #888888;

Border Results:

/* Apply rounded corners to a div element */

.rounded-box {

border-radius: 10px;

Transitions:

/* Apply a color transition on hover */

.transition-example {

transition: background-color 0.3s ease;

.transition-example:hover {

background-color: #3498db;

9
Gradients:

/* Apply a linear gradient to a background */

.gradient-background {

background: linear-gradient(to right, #ffcc00, #ff6600);

Flexbox:

/* Create a flex container with evenly distributed items */

.flex-container {

display: flex;

justify-content: space-between;

Grid Layout:

/* Create a grid with three columns */

.grid-container {

display: grid;

grid-template-columns: auto auto auto

Custom Fonts:

/* Define a custom font for use in the stylesheet */

@font-face {

font-family: 'CustomFont';

src: url('path-to-font/custom-font.woff') format('woff');

10
JavaScript Fundamentals

This subsection covers the core concepts of JavaScript, emphasizing its role in enhancing
user interactivity on the client side. It discusses variables, data types, control structures,
functions, and event handling.

 JavaScript is a text-based programming language used both on the client-side and

server-side that allows you to make web pages interactive.
 It is one of the three core technologies of the World Wide Web, along with HTML and
CSS.
 JavaScript is a high-level, interpreted programming language. This means that it is
easy to read and write, and it does not need to be compiled before it can be run.
 JavaScript is a dynamic programming language. This means that the value of
variables can change during the execution of the program.
 JavaScript is a single-threaded programming language. This means that it can only
execute one task at a time.
 JavaScript is a prototype-based programming language. This means that objects are
created by cloning existing objects, rather than by using classes.

Example: JavaScript, the scripting language of the web, empowers developers to create
dynamic and interactive web pages. The understanding of variables, data types, and control
structures is fundamental. Additionally, the section introduces event-driven programming,
enabling the creation of responsive and engaging user interfaces.

JavaScript is used to add interactivity to web pages. It can be used to create animations,
slideshows, games, and other interactive elements. JavaScript can also be used to validate
forms, send emails, and perform other tasks.

JavaScript is a powerful language that can be used to create a wide variety of web
applications. It is also a popular language for server-side programming, and it is used in many
popular frameworks, such as Node.js.

All major web browsers have a built-in JavaScript engine that executes the code on the user's
device.

11
Modern JavaScript is a “safe” programming language. It does not provide low-level access to
memory or the CPU, because it was initially created for browsers which do not require it.

JavaScript’s capabilities greatly depend on the environment it’s running in. For
instance, NodeJS supports functions that allow JavaScript to read/write arbitrary files,
perform network requests, etc.

In-browser JavaScript can do everything related to webpage manipulation, interaction with

the user, and the webserver.

For instance, in-browser JavaScript is able to:

Add new HTML to the page, change the existing content, modify styles.

React to user actions, run on mouse clicks, pointer movements, key presses.

Send requests over the network to remote servers, download and upload files (so-called
AZAX and COMET technologies).

Get and set cookies, ask questions to the visitor, show messages.

Remember the data on the client-side (“local storage”).

JavaScript’s abilities in the browser are limited to protect the user’s safety. The aim is to
prevent an evil webpage from accessing private information or harming the user’s data.

Examples of such restrictions include:

JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or
execute programs. It has no direct access to OS functions.

Modern browsers allow it to work with files, but the access is limited and only provided if the
user does certain actions, like “dropping” a file into a browser window or selecting it via
an <input> tag.

There are ways to interact with the camera/microphone and other devices, but they require a
user’s explicit permission. So a JavaScript-enabled page may not sneakily enable a web-
camera, observe the surroundings and send the information to the NSA.

12
Different tabs/windows generally do not know about each other. Sometimes they do, for
example when one window uses JavaScript to open the other one. But even in this case,
JavaScript from one page may not access the other page if they come from different sites
(from a different domain, protocol or port).

This is called the “Same Origin Policy”. To work around that, both pages must agree for data
exchange and must contain special JavaScript code that handles it. We’ll cover that in the
tutorial.

This limitation is, again, for the user’s safety. A page from http://anysite.com which a user has
opened must not be able to access another browser tab with the URL http://gmail.com, for
example, and steal information from there.

JavaScript can easily communicate over the net to the server where the current page came
from. But its ability to receive data from other sites/domains is crippled. Though possible, it
requires explicit agreement (expressed in HTTP headers) from the remote side. Once again,
that’s a safety limitation.

The syntax of JavaScript does not suit everyone’s needs. Different people want different
features.

That’s to be expected, because projects and requirements are different for everyone.

So, recently a plethora of new languages appeared, which are transpiled (converted) to
JavaScript before they run in the browser.

Modern tools make the transpilation very fast and transparent, actually allowing developers
to code in another language and auto-converting it “under the hood”.

Examples of such languages:

CoffeeScript is “syntactic sugar” for JavaScript. It introduces shorter syntax, allowing us to

write clearer and more precise code. Usually, Ruby devs like it.

TypeScript is concentrated on adding “strict data typing” to simplify the development and
support of complex systems. It is developed by Microsoft.

Flow also adds data typing, but in a different way. Developed by Facebook.

Dart is a standalone language that has its own engine that runs in non-browser environments
(like mobile apps), but also can be transpiled to JavaScript. Developed by Google.

13
Brython is a Python transpiler to JavaScript that enables the writing of applications in pure
Python without JavaScript.

Kotlin is a modern, concise and safe programming language that can target the browser or
Node.

There are more. Of course, even if we use one of these transpiled languages, we should also
know JavaScript to really understand what we’re doing.

JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of
tools on top of the core JavaScript language, unlocking a vast amount of functionality with
minimum effort. These include:

Browser Application Programming Interfaces (APIs) built into web browsers, providing
functionality such as dynamically creating HTML and setting CSS styles; collecting and
manipulating a video stream from a user's webcam, or generating 3D graphics and audio
samples.

Third-party APIs that allow developers to incorporate functionality in sites from other content
providers, such as Twitter or Facebook.

Third-party frameworks and libraries that you can apply to HTML to accelerate the work of
building sites and applications.

It's outside the scope of this article—as a light introduction to JavaScript—to present the
details of how the core JavaScript language is different from the tools listed above. You can
learn more in MDN's JavaScript learning area, as well as in other parts of MDN.

Certainly! Let's explore the fundamentals of JavaScript in a comprehensive manner.

---

# JavaScript Fundamentals

## Introduction to JavaScript:

14
JavaScript is a high-level, versatile programming language primarily known for its role in
building interactive and dynamic web pages. As a client-side scripting language, it runs in
web browsers, allowing developers to manipulate the Document Object Model (DOM) and
respond to user interactions.

## Key Concepts:

### 1. Variables and Data Types:

JavaScript uses variables to store and manipulate data. Variables are declared using `var`,
`let`, or `const`. Common data types include:

- **Primitive Types:**

- `Number`: Represents numeric values.

- `String`: Represents textual data.

- `Boolean`: Represents true or false values.

- `Undefined`: Represents an uninitialized variable.

- `Null`: Represents the absence of a value.

- **Composite Types:**

- `Object`: Represents a collection of key-value pairs.

- `Array`: Represents an ordered list of values.

### 2. Operators:

15
JavaScript supports various operators for performing operations on variables and values.
Common operators include:

- **Arithmetic Operators:** `+, -, *, /, %`

- **Comparison Operators:** `==, ===, !=, !==, <, >, <=, >=`

- **Logical Operators:** `&&, ||, !`

### 3. Control Flow Statements:

Control flow statements determine the order in which code is executed. Key statements
include:

- **Conditional Statements:**

- `if`, `else if`, `else`

- **Looping Statements:**

- `for`, `while`, `do...while`

- **Switch Statement:**

- Used for multiple branches based on the value of an expression.

### 4. Functions:

Functions are reusable blocks of code that can be defined and called. They help in organizing
code and promoting reusability.

16
```javascript

// Example of a function declaration

function greet(name) {

return "Hello, " + name + "!";

// Example of a function call

var greeting = greet("World");

console.log(greeting);

```

### 5. Objects and Arrays:

JavaScript is an object-oriented language, and objects play a crucial role. Objects are
collections of key-value pairs, and arrays are ordered lists.

```javascript

// Example of an object

var person = {

firstName: "John",

lastName: "Doe",

age: 30,

};

17
// Example of an array

var colors = ["red", "green", "blue"];

```

### 6. DOM Manipulation:

JavaScript interacts with the DOM to modify the content and structure of web pages
dynamically. Common operations include selecting elements, changing HTML content, and
handling events.

```javascript

// Example of changing HTML content

document.getElementById("demo").innerHTML = "Hello, JavaScript!";

```

### 7. Asynchronous JavaScript:

JavaScript is single-threaded, but it supports asynchronous operations using mechanisms like

callbacks, promises, and async/await.

```javascript

// Example of using Promises

function fetchData() {

return new Promise((resolve, reject) => {

// Asynchronous operation

18
 setTimeout(() => {

resolve("Data fetched successfully!");

}, 2000);

});

fetchData().then((data) => {

console.log(data);

});

```

## Conclusion:

Understanding these fundamental concepts is crucial for mastering JavaScript and building
robust web applications. As you progress, you'll encounter advanced topics like closures,
prototypes, and ES6 features, enhancing your ability to create efficient and scalable
JavaScript code.

19
 Front-End Framework
React.JS

This part explores popular front-end frameworks, such as React.js or Angular. It discusses the
benefits of using frameworks for building modular and maintainable user interfaces, as well
as the concept of component-based architecture.

Example: Frameworks like React.js and Angular streamline front-end development by

introducing a component-based approach. Components encapsulate functionality and can be
reused, promoting code modularity and maintainability. The section delves into the
advantages of using these frameworks and their respective ecosystems.

ReactJS History

When compared to other technologies on the market, React is a new technology. Jordan
Walke, a software engineer at Facebook, founded the library in 2011, giving it life. The likes
of XHP, a straightforward HTML component framework for PHP, have an influence on
React. React's newsfeed was its debut application in 2011. Later, Instagram picks it up and
incorporates it into their platform.

Why React?

React’s popularity today has eclipsed that of all other front-end development frameworks.
Here is why:

Easy creation of dynamic applications: React makes it easier to create dynamic web
applications because it requires less coding and offers more functionality, as opposed to
JavaScript, where coding often gets complex very quickly.

Improved performance: React uses Virtual DOM, thereby creating web applications faster.
Virtual DOM compares the components’ previous states and updates only the items in the
Real DOM that were changed, instead of updating all of the components again, as
conventional web applications do.

Reusable components: Components are the building blocks of any React application, and a
single app usually consists of multiple components. These components have their logic and
controls, and they can be reused throughout the application, which in turn dramatically
reduces the application’s development time.

20
Unidirectional data flow: React follows a unidirectional data flow. This means that when
designing a React app, developers often nest child components within parent components.
Since the data flows in a single direction, it becomes easier to debug errors and know where a
problem occurs in an application at the moment in question.

Small learning curve: React is easy to learn, as it mostly combines basic HTML and
JavaScript concepts with some beneficial additions. Still, as is the case with other tools and
frameworks, you have to spend some time to get a proper understanding of React’s library.

It can be used for the development of both web and mobile apps: We already know that React
is used for the development of web applications, but that’s not all it can do. There is a
framework called React Native, derived from React itself, that is hugely popular and is used
for creating beautiful mobile applications. So, in reality, React can be used for making both
web and mobile applications.

Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be
used to debug React applications. This makes the process of debugging React web
applications faster and easier.

The above reasons more than justify the popularity of the React library and why it is being
adopted by a large number of organizations and businesses. Now let’s familiarize ourselves
with React’s features.

ReactJS Keys

After answering what is ReactJs, let us know what are keys.

While dealing with components that are produced periodically in React, keys are essential.
Your component will continue to be uniquely identifiable after the modification if the key
value is set. They aid React in determining which elements have changed, been eliminated,
or been added.

When making lists of components in React, you must use a special string personality factor
"key". React uses keys to indicate which list items have been modified, destroyed, or altered.
Or, to put it another way, we may say that keys are utilized to identify the components in
lists.

ReactJS Advantages

21
React.js builds a customized virtual DOM. Because the JavaScript virtual DOM is quicker
than the conventional DOM, this will enhance the performance of apps .

ReactJS makes an amazing UI possible.

Search - engine friendly ReactJS.

Modules and valid data make larger apps easier to manage by increasing readability.

React integrates various architectures.

React makes the entire scripting environment process simpler.

It makes advanced maintenance easier and boosts output.

Guarantees quicker rendering

The availability of a script for developing mobile apps is the best feature of React.

ReactJS is supported by a large community.

Advantages

Makes use of the JavaScript structure known as virtual DOM. Since JavaScript's virtual
DOM is quicker than the conventional DOM, this will boost the speed of programs.

Can be used with various systems and on both client and server sides is commendable.

Components and identify trends make larger apps easier to manage by increasing clarity.

Limitations

Only addresses the app's angle and distance; as a result, additional techniques must be
selected if you want a full collection of development tools.

Employs inline scripting and JSX, which some programmers might find uncomfortable.

Features of React

React offers some outstanding features that make it the most widely adopted library for
frontend app development. Here is the list of those salient features.

22
JSX

JSX is a JavaScript syntactic extension. It's a term used in React to describe how the user
interface should seem. You can write HTML structures in the same file as JavaScript code by
utilizing JSX.

const name = 'Simplilearn';

const greet = <h1>Hello, {name}</h1>;

The above code shows how JSX is implemented in React. It is neither a string nor HTML.
Instead, it embeds HTML into JavaScript code.

Virtual Document Object Model (DOM)

23
The Virtual DOM is React's lightweight version of the Real DOM. Real DOM manipulation
is substantially slower than virtual DOM manipulation. When an object's state changes,
Virtual DOM updates only that object in the real DOM rather than all of them.

What is the Document Object Model (DOM)?

Fig: DOM of a Webpage

DOM (Document Object Model) treats an XML or HTML document as a tree structure in
which each node is an object representing a part of the document.

How do Virtual DOM and React DOM interact with each other?

When the state of an object changes in a React application, VDOM gets updated. It then
compares its previous state and then updates only those objects in the real DOM instead of
updating all of the objects. This makes things move fast, especially when compared to other
front-end technologies that have to update each object even if only a single object changes in
the web application.

State in React

A state is an object that stores properties values for those attributed to a component that could
change over some time.

A state can be changed as a result of a user's action or changes in the network.

React re-renders the component to the browser whenever the state of an object changes.

The function Object() { [native code] } is where the state object is create.

24
 Back-End Development
Server-side Scripting Language

Node.Js

This subsection introduces server-side scripting languages, including Node.js, Python, and
Ruby. It covers the role of these languages in handling server-side logic, routing, and
processing client requests.

Example: Server-side scripting languages play a crucial role in executing server-side logic.
Node.js, known for its non-blocking I/O, Python, with its readability, and Ruby, with its
elegant syntax, are explored. The section emphasizes their role in processing client requests
and managing server-side functionalities.

Whenever a client requests something from the client side of the application what happens is ,
the request is first sent to the server and then in that server some processing or calculations
goes on for the validation of the client side request and after doing all such validation a
response is sent to the client side. Basically for doing all such calculations and processing ,
this NodeJs framework of JavaScript is used.

For running our web applications outside the client’s browser , NodeJS is basically used as an
open-source and cross platform JavaScript runtime environment.For running the server side
applications we use this.For building the I/O intensive applications like video streaming sites
,online chatting applications and many other applications , it is used. Many established tech
giant companies and newly created start-ups are using NodeJs framework in their company.

In 2009, NodeJs was developed by a guy called Ryan Dahla and the current version of
NodeJs is v16.9.0.

Node.js is an open-source, cross-platform JavaScript runtime environment and library for

running web applications outside the client's browser. Ryan Dahl developed it in 2009, and its
latest iteration, version 15.14, was released in April 2021. Developers use Node.js to create
server-side web applications, and it is perfect for data-intensive applications since it uses an
asynchronous, event-driven model.

There are many reasons for which we prefer using NodeJs for the server side of our
application, some of them are discussed in the following:

25
NodeJs is built on Google Chrome’s V8 engine, and for this reason its execution time is very
fast and it runs very quickly.

There are more than 50,000 bundles available in the Node Package Manager and for that
reason developers can import any of the packages any time according to their needed
functionality for which a lot of time is saved.

As NodeJs do not need to wait for an API to return data , so for building real time and data
intensive web applications, it is very useful. It is totally asynchronous in nature that means it
is totally non-blocking.

The loading time for an audio or video is reduced by NodeJs because there is better
synchronization of the code between the client and server for having the same code base.

As NodeJs is open-source and it is nothing but a JavaScript framework , so for the developers
who are already used to JavaScript, for them starting developing their projects with NodeJs is
very easy.

Features of NodeJs

Now let us discuss on some of the features of NodeJs:

Asynchronous in Nature and Event driven: The servers made with the NodeJs never waits for
the from an API. Without waiting for the data from the API, it directly moves to the next API.
So all the APIs of NodeJS are totally non-blocking in nature. In order to receive and track all
the responses of the previous API requests, it follows an event driven mechanism. Hence we
can say that all the NodeJs API are non-blocking in nature.

Single Threaded Architecture: With event looping, a single threaded architecture is followed
by NodeJs and for this architecture makes NodeJs more scalable. In contrast to other servers,
limited threads are created by them for processing the requests. Whereas for the event driven
mechanism, the NodeJS servers reply in a non-blocking or an asynchronous manner and for
this reason NodeJS becomes more scalable. If we compare NodeJs with other traditional
servers like Apache HTTP servers, then we can say NodeJs handles a larger number of
requests. A single threaded program is followed by NodeJS and this allows NodeJs to process
a huge amount of requests.

Scalable: Nowadays, scalable software is demanded by most of the companies. One of the
most pressing concerns in Software Development is addressed by NodeJs and that is

26
scalability. Concurrent requests can be handled very efficiently using NodeJs. A cluster
module is used by NodeJs for managing the load balancing for all the active CPU cores. The
most appealing feature of NodeJs is that it can partition the applications horizontally and this
partition procedure is mainly achieved by it due to the use of child processes. Using this
feature, the distinct app versions are provided to the different target audiences and also for
customization it allows them for catering to the client preferences.

Quick Execution time for code: V8 JavaScript runtime motor is used by NodeJs and this is
also used by Google chrome. A wrapper is provided for the JavaScript by the hub and for that
reason the runtime motor becomes faster and for this reason inside NodeJs, the preposition
process of the requests also become faster.

Compatibility on the cross platforms: Different types of systems like Windows, UNIX,
LINUX, MacOS and other mobile devices can use NodeJs. For generating a self-sufficient
execution, it can be paired with any appropriate package.

Uses JavaScript: From an engineer's perspective, it is a very important aspect of NodeJs that
this framework uses JavaScript Most of the developers are familiar with JavaScript, so for
them it becomes very easier to grab NodeJs.

Fast Data Streaming: The processing time of the data that have been transmitted to different
streams takes a long time. Whereas for processing the data, NodeJs takes a very short amount
of time and it does it at a very fast rate. NodeJs saves a lot of time because the files are
processed and uploaded simultaneously by NodeJs. So as a result, the overall speed of data
and video streaming is improved by NodeJs.

27
Parts of Node.js

Now, let's go through each part of Node.js to get a better understanding of the server-side
platform as a whole.

Modules

Modules are like JavaScript libraries that can be used in a Node.js application to include a set
of functions. In order to include a module in a Node.js application, use the require() function
with the parenthesis containing the name of the module.

28
Fig: Include a module in Node.js

Node.js has many modules that provide the basic functionality needed for a web application.
Some of them are mentioned in this table:

Console

The console is a module that provides a method for debugging that is similar to the basic
JavaScript console provided by internet browsers. It prints messages to stdout and stderr.

29
Fig: Node.js console

Cluster
Node.js is built-on on the concept of single-threaded programming. Cluster is a module that
allows multi-threading by creating child processes that share the same server port and run
simultaneously.

A cluster can be added to an application in the following way:

Fig: Add cluster in Node.js

Global

Global objects in Node.js are available in all modules. These objects are functions, modules,
strings, etc. Some Node.js global objects are mentioned in the table below:

Fig: Global objects table

30
Error Handling

Node.js applications experience four types of errors.

Fig: Node.js errors

31
 Database Management ( NoSQL)
Mongo DB

MongoDB is an open source NoSQL database management program. NoSQL (Not only
SQL) is used as an alternative to traditional relational databases. NoSQL databases are quite
useful for working with large sets of distributed data. MongoDB is a tool that can manage
document-oriented information, store or retrieve information.

MongoDB is used for high-volume data storage, helping organizations store large amounts of
data while still performing rapidly. Organizations also use MongoDB for its ad-hoc queries,
indexing, load balancing, aggregation, server-side JavaScript execution and other features.

Structured Query Language (SQL) is a standardized programming language that is used to

manage relational databases. SQL normalizes data as schemas and tables, and every table has
a fixed structure.

Instead of using tables and rows as in relational databases, as a NoSQL database, the
MongoDB architecture is made up of collections and documents. Documents are made up of
Key-value pairs -- MongoDB's basic unit of data. Collections, the equivalent of SQL tables,
contain document sets. MongoDB offers support for many programming languages, such as
C, C++, C#, Go, Java, Python, Ruby and Swift.

MongoDB environments provide users with a server to create databases with MongoDB.
MongoDB stores data as records that are made up of collections and documents.

Documents contain the data the user wants to store in the MongoDB database. Documents are
composed of field and value pairs. They are the basic unit of data in MongoDB. The
documents are similar to JavaScript Object Notation (JSON) but use a variant called Binary
JSON (BSON). The benefit of using BSON is that it accommodates more data types. The
fields in these documents are like the columns in a relational database. Values contained can
be a variety of data types, including other documents, arrays and arrays of documents,
according to the MongoDB user manual. Documents will also incorporate a primary key as a
unique identifier. A document's structure is changed by adding or deleting new or existing
fields.

Sets of documents are called collections, which function as the equivalent of relational
database tables. Collections can contain any type of data, but the restriction is the data in a

32
collection cannot be spread across different databases. Users of MongoDB can create multiple
databases with multiple collections.

The mongo shell is a standard component of the open-source distributions of MongoDB.

Once MongoDB is installed, users connect the mongo shell to their running MongoDB
instances. The mongo shell acts as an interactive JavaScript interface to MongoDB, which
allows users to query or update data and conduct administrative operations.

A binary representation of JSON-like documents is provided by the BSON document storage

and data interchange format. Automatic sharding is another key feature that enables data in a
MongoDB collection to be distributed across multiple systems for horizontal scalability, as
data volumes and throughput requirements increase.

The NoSQL DBMS uses a single master architecture for data consistency, with secondary
databases that maintain copies of the primary database. Operations are automatically
replicated to those secondary databases for automatic failover.

Features of Mongo DB

Features of MongoDB include the following:

Replication. A replica set is two or more MongoDB instances used to provide high
availability. Replica sets are made of primary and secondary servers. The primary MongoDB
server performs all the read and write operations, while the secondary replica keeps a copy of
the data. If a primary replica fails, the secondary replica is then used.

Scalability. MongoDB supports vertical and horizontal scaling. Vertical scaling works by
adding more power to an existing machine, while horizontal scaling works by adding more
machines to a user's resources.

Load balancing. MongoDB handles load balancing without the need for a separate,
dedicated load balancer, through either vertical or horizontal scaling.

Schema-less. MongoDB is a schema-less database, which means the database can manage
data without the need for a blueprint.

Document. Data in MongoDB is stored in documents with key-value pairs instead of rows
and columns, which makes the data more flexible when compared to SQL databases.

33
 API
This subsection introduces architectural styles for building APIs, focusing on RESTful . It
explains the principles behind REST and , their respective advantages, and considerations for
choosing between them.

Example: APIs serve as the bridge between front-end and back-end systems. RESTful
architecture, with its stateless design, offering more flexibility in data retrieval, are examined.
The section emphasizes understanding when to choose each architecture based on project
requirements.

API Development

This part delves into the development of Application Programming Interfaces (APIs). It
covers the principles of designing robust and scalable APIs, including endpoint creation, data
serialization, and versioning.

Example: API development is central to enabling communication between front-end and

back-end systems. This section explores the principles of designing RESTful or GraphQL
APIs, including creating endpoints, handling data serialization, and addressing versioning
concerns. It emphasizes creating APIs that are scalable, maintainable, and user-friendly.

Version Control Systems (e.g., Git)

This subsection introduces version control systems, with a focus on Git. It covers the basics
of version control, branching strategies, and collaborative workflows.

Example: Version control systems like Git facilitate collaboration and code management.
This section explores the fundamentals of version control, including repositories, branches,
and commits. It also discusses collaborative workflows, such as feature branching and pull
requests, highlighting their role in maintaining code integrity and facilitating teamwork.

34
 PROJECT
Project Outline:

Backend (Node.js and Express.js):

Install necessary packages: express, mongoose, multer (for file uploads), jsonwebtoken
(for authentication), etc.

Set up MongoDB using Mongoose.

Implement user authentication (signup, login) using JWT tokens.

Create routes for handling photo uploads, fetching photos, etc.

Utilize Multer for handling file uploads.

Set up middleware for authentication.

Implement error handling middleware.

Set up CORS for handling cross-origin requests.

Create and run Express server.

Sample Code (Backend - Express.js):

// Install necessary packages using npm

// npm install express mongoose multer jsonwebtoken

const express = require('express');

const mongoose = require('mongoose');

const multer = require('multer');

const jwt = require('jsonwebtoken');

const app = express();

const port = process.env.PORT || 3001;

35
// MongoDB connection

mongoose.connect('mongodb://localhost/photo_sharing_app', { useNewUrlParser: true,

useUnifiedTopology: true });

Frontend (React.js):

Set up a React app using create-react-app.

Create components for signup, login, photo upload, photo display, etc.

Use axios for making API requests to the backend.

Implement user authentication in the frontend using JWT.

Create a responsive and user-friendly UI.

Sample Code (Frontend - React.js):

// Install axios using npm

// npm install axios

import React, { useState } from 'react';

import axios from 'axios';

const App = () => {

// Implement state and functions for user authentication, photo uploads, etc.

return (

<div>

{/* Create components for signup, login, photo upload, photo display, etc. */}

</div>

36
 );

};

export default App;

API Testing with Postman:

Use Postman to test your API endpoints.

Test user authentication (signup, login) endpoints.

Test photo upload and fetching endpoints.

Validate the responses and ensure proper error handling.

Projects Screenshots
Initial Front Page

37
Login Page

Add Locations Page

38
Photos Uploaded

39
 CONCLUSION

Recapitulation of Learning Objectives:

In this section, you summarize the key learning objectives of your project or study. This is an
opportunity to revisit the main goals you set out to achieve and highlight how well you
accomplished them. Mention the skills, knowledge, or competencies you aimed to gain or
demonstrate.

Example: "In the course of this project, our primary objectives were to implement a
functional photo-sharing website using the MERN stack, integrate user authentication, and
establish seamless communication between the frontend and backend. As we conclude, it's
essential to reflect on how these objectives have been met and evaluate the extent to which
the project aligns with our initial goals."

Achievements and Insights:

In this section, discuss the achievements and insights gained during the project. Highlight any
notable accomplishments, successful implementations, or key findings. This is the space to
showcase the positive outcomes and lessons learned throughout the development process.

Example: "Our achievements in this project include the successful implementation of user
authentication, the creation of an intuitive and responsive frontend, and the establishment of a
robust communication flow between the frontend and backend. Insights gained during the
development process have enriched our understanding of handling user data securely,
optimizing file uploads, and structuring a scalable MERN application."

Future Considerations and Continuous Learning:

Discuss the considerations for the future and the opportunities for continuous learning. This
could involve improvements to the existing project, potential features or enhancements, and
the exploration of new technologies or methodologies. Acknowledge that learning is an
ongoing process and outline how you plan to stay engaged with the subject matter.

40
Example: "While the current project marks a significant milestone, there are avenues for
future improvements. Enhancements such as implementing real-time updates, refining user
interfaces, and exploring cloud-based storage solutions could further elevate the user
experience. Additionally, the ever-evolving nature of web development encourages us to stay
abreast of emerging technologies and methodologies. Continuous learning remains a priority,
and we aim to delve into advanced topics such as serverless architecture and GraphQL in our
ongoing journey."

In conclusion, this section provides a reflective and forward-looking perspective on the

project, summarizing achievements, acknowledging insights, and paving the way for future
growth and learning.

Our MERN stack project stands adorned with achievements that extend beyond the mere
integration of technologies. The successful implementation of user authentication is not just a
security feature but a cornerstone in fostering a personalized and secure user experience.
Integrating MongoDB allowed us to manage vast amounts of data efficiently, and the
React.js-driven frontend provided a responsive, single-page application with a fluid and
intuitive interface. Insights gained from this experience have deepened our understanding of
state management, UI/UX design principles, and the seamless integration of server and client-
side components.

Challenges Overcome and Resilience:

No project is without its challenges, and our MERN stack endeavor was no exception. From
overcoming asynchronous complexities to harmonizing data flow between the frontend and
backend, each obstacle was an opportunity for growth. Navigating these challenges has honed
our problem-solving skills and reinforced our resilience in the face of complex development
scenarios.

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.

MongoDB, 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 NoSQL
database management system works well with NodeJS and thus, allows manipulating,
representing, and storing JSON data at every tier of the application.

41
It comes in a variant called MongoDB Atlas that further eases database management by
offering an auto-scaling MongoDB 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 ReactJS
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.

MVC

One of the prime advantages of the MERN stack is the Model-View-Controller architecture
it offers and how straightforward it is for developers to construct online programs. One of the
most important aspects of a MERN application is that it is designed to be distributed using a
micro-services architecture, in which each micro-service is ideally independent of the others
and only depends on a select few other services. MERN allows programmers to create
incredibly trustworthy programs.

Full-Stack

Programmers can write programs more quickly and with less effort just because of the
MERN Stack tools. Developers may more effectively concentrate their time on resolving
issues, creating new features, and enhancing the product by eliminating the complexity of
API calls.

The MERN stack, micro-service architecture, makes it feasible to describe services

separately. Each service in the MERN stack comprises a single task. The MERN stack is an
excellent architectural design paradigm for programs of any size and complexity. Numerous
programs can make use of the MERN stack.

Easy Learning

The MERN stack consists of a framework, a runtime system, and a programming language.
MERN is a programming language that combines the online and offline worlds. Thus, web
developers can make the most potent in-browser applications without a browser window. The
JavaScript-based runtime Node, which is efficient and speedy, may now be used to run

42
MERN apps. MERN Stack Developers should have a solid grasp of JavaScript and JSON to
use the MERN stack advantages while developing online applications.

Code Maintenance

Using the MERN stack, developers may create applications that are simpler to manage than
conventional web applications. It is a MERN architecture with multiple tiers. It is a scalable
solution that allows for both upscaling and downscaling without compromising the integrity
of the code. It saves time and money in a more significant way.

Strong Community

MERN stack is becoming so well-known over time because of its functionality, which
combines the front end, back end, and database. Due to its popularity, a growing community
is stepping forward to support developers in their search for the ideal answer.

43
 REFERENCES
https://github.com/sachingramram/CollegeProject

https://www.mongodb.com/mern-stack

https://www.postman.com/

https://react.dev/

https://expressjs.com/

https://nodejs.org/en

44