An Industrial Training Report

On

BookStore Website

Submitted for partial fulfillment of award of

BACHELOR OF TECHNOLOGY
Degree in

Information Technology

By

ANURAG CHAUHAN (2200640130006)

Name of Faculty
Mr. AJAY PARASHAR

INFORMATION TECHNOLOGY
Hindustan College of Science and Technology,
Farah, Mathura

DR. A. P. J. ABDUL KALAM UNIVERSITY, LUCKNOW, INDIA

December, 2024
CERTIFICATE (PHOTO COPY)
 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to all those who have contributed to
the successful completion of this project. This endeavor would not have been
possible without the support, guidance and encouragement of various
individuals.

First and foremost, I extend my heartfelt thanks to “Mr. AJAY PARASHAR”

Assistance Professor, Department of Information Technology, Hindustan
College of Science and Technology, Mathura who helped me in completing the
project and exchanged his interesting thoughts and ideas and made this project
possible.

Thank you to everyone who played a role, big or small, in the successful
completion of this project.

ANURAG CHAUHAN
 PAGE INDEX

Topic Page No.

LIST OF FIGURES
1. COMPANY PROFILE 1
1.1 My Experience at TechMagna Solutions 1
1.2 Core Values of the Company 1
2. OVERVIEW OF TRAINING 2-11
2.1 MERN Stack Overview 2
2.1.1 MongoDB 2
2.1.2 Express.Js 4
2.1.2.1 Key Features of Express 5
2.1.2.2 Basic routing in Express 5
2.1.3 React.Js 7
2.1.3.1 React Props: Passing data to Component 8
2.1.3.2 React State: Managing Dynamic Data 9
2.1.4 Node.Js 10
3. INTRODUCTION TO PROJECT 12-17
3.1 Authentication Module 12
3.2 Database Module 14
3.3 Backend API Module 16
3.4 Frontend Module 17
4. SNAPSHOTS OF PROJECT 18-21
5. CONCLUSION 22
REFERENCES 23
 LIST OF FIGURES

Figure Number Figure Caption

Fig.1 MongoDB
Fig.2 MongoDB Schema Design
Fig.3 MongoDB Collection Design
Fig.4 Express.Js
Fig.5 React.Js
Fig.6 Node.Js
Fig.7 Express.JS VS Other Frameworks
 CHAPTER – 1
COMPANY PROFILE

COMPANY NAME - TechMagna Solutions India Pvt. Ltd.

TechMagna Solutions India Pvt. Ltd. is a premier technology solutions provider

based in India, specializing in cutting-edge software development and IT
services. Established with a vision to drive digital transformation, the company
has consistently delivered high-quality and innovative solutions to a diverse range
of clients across industries.

The company prides itself on its ability to adopt the latest technological trends
and tailor solutions to meet specific business needs. With a team of skilled
professionals and a client-centric approach, TechMagna Solutions has
successfully positioned itself as a leader in the technology sector.

1.1 My Experience at TechMagna Solutions

During my training at TechMagna Solutions, I had the opportunity to explore

various aspects of web development. The company provided me with hands-on
experience in:

 Understanding the architecture of web applications.

Although my contributions during the training primarily involved small-scale

tasks, the experience significantly enhanced my understanding of practical
development processes and industry standards. These tasks, while not directly
contributing to my project, allowed me to grasp the intricacies of working in a
professional software development environment.

1.2 Core Values of the Company

 Mission: To empower businesses with reliable and scalable technology

solutions.
 Vision: To become a global leader in the IT industry by fostering
innovation and excellence.

1
 CHAPTER – 2
OVERVIEW OF TRAINING

2.1 MERN Stack Overview

The MERN stack is a popular choice for building full-stack web applications. It
consists of:

 MongoDB: A NoSQL database that provides flexibility in data modeling

and scalability.
 Express.js: A lightweight back-end framework for building APIs and
handling server-side logic.
 React.js: A front-end library for creating interactive user interfaces using
components.
 Node.js: A runtime environment for executing JavaScript on the server
side.

2.1.1 MongoDB

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format

called BSON (Binary JSON). Unlike traditional relational databases, MongoDB
uses collections and documents, allowing for a schema-less structure that is
highly adaptable to changes. This makes it particularly suitable for applications
with evolving requirements. MongoDB also offers features like horizontal
scaling, indexing, and aggregation, which enhance performance and flexibility.

Fig.1

2
Mongoose was used to define the data schema and interact with the MongoDB
database. It provided an abstraction layer over MongoDB, enabling me to easily
perform CRUD (Create, Read, Update, Delete) operations and validate data
before it’s saved to the database.

MongoDB Schema Design

MongoDB stores data in collections rather than tables (as in SQL databases).
Each collection contains documents in JSON-like format.

Fig.2

Fig.3

3
2.1.2 Express.Js

Express.js is a lightweight and flexible web application framework for Node.js.

It simplifies the process of building server-side applications by providing a range
of features, such as middleware, routing, and handling HTTP requests and
responses. Express is highly customizable, enabling developers to structure their
applications in a modular and maintainable way. It acts as a bridge between the
frontend and the database, ensuring smooth data flow.

Fig.4

Express.js is a web framework for Node.js that simplifies the creation of server-
side applications and APIs. I used Express to:

Build RESTful API endpoints for handling operations such as user authentication.

Manage routing and HTTP requests (GET, POST, PUT, DELETE) for different
actions on the website.

Handle middleware functions for logging, authentication, and error handling.

Express.js creates its own server to host applications. When developers write
code in the main JavaScript file, the content is displayed on a webpage.
However, every time a change is made in the code, the server needs to be
manually restarted to reflect the updates. To address this inconvenience,
developers use tools like Nodemon, which automatically restarts the server

4
whenever file changes are detected, saving time and improving development
efficiency.

2.1.2.1 Key Features of Express

Middleware and Routing: Define clear pathways (routes) within your

application to handle incoming HTTP requests (GET, POST, PUT, DELETE).
Minimalistic Design: Express.js follows a simple and minimalistic design
philosophy. This simplicity allows you to quickly set up a server, define routes,
and handle HTTP requests efficiently.
Flexibility and Customization: Express.js doesn’t impose a strict application
architecture. You can structure your code according to your preferences.
Templating Power: Incorporate templating engines like Jade or EJS to
generate dynamic HTML content, enhancing user experience.
Static File Serving: Effortlessly serve static files like images, CSS, and
JavaScript from a designated directory within your application.
Node.js Integration: Express.js seamlessly integrates with the core
functionalities of Node.js, allowing you to harness the power of asynchronous
programming and event-driven architecture.

2.1.2.2 Basic routing in Express

Routing refers to determining how an application responds to a client request to

a particular endpoint, which is a URI (or path) and a specific HTTP request
method (GET, POST, and so on).

Each route can have one or more handler functions, which are executed when the
route is matched.

Route definition takes the following structure:

app.METHOD(PATH, HANDLER)

Where:

• app is an instance of express.

• METHOD is an HTTP request method, in lowercase.

• PATH is a path on the server.

• HANDLER is the function executed when the route is matched.

5
The following examples illustrate defining simple routes.

Respond with Hello World! on the homepage:

app.get('/', (req, res) => {

res.send('Hello World!')

})

Respond to POST request on the root route (/), the application’s home page:

app.post('/', (req, res) => {

res.send('Got a POST request')

})

Respond to a PUT request to the /user route:

app.put('/user', (req, res) => {

res.send('Got a PUT request at /user')

})

Respond to a DELETE request to the /user route:

app.delete('/user', (req, res) => {

res.send('Got a DELETE request at /user')

})

6
2.1.3 React.Js

React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. It lets you compose complex UIs from small and isolated pieces of
code called “components”.

React.js is a powerful JavaScript library for building user interfaces, particularly

single-page applications (SPAs). Developed and maintained by Facebook, React
allows developers to create reusable UI components, manage the application’s
state efficiently, and improve performance using its virtual DOM. With its
declarative approach, React simplifies the process of designing dynamic and
interactive user interfaces.

Fig.5

React allows for the development of component-based UIs, where the page is
divided into reusable, self-contained components. Each component manages its
own state and can be rendered independently, making the codebase modular and
easier to maintain.

I used React Hooks (such as useState, useEffect, useContext) to handle state

management and side-effects in functional components, which is a modern and
efficient way to build React apps.

For routing within the website, I used React Router to enable smooth navigation
between pages (e.g.,user authentication) without the need for full page reloads.

7
how a Basic React Application looks like

import React from 'react';

function App() {
return (
<div>
<h1>Welcome To React Tutorial</h1>
</div>
);
}
export default App;

Explaination of Code

 JSX looks like HTML but is JavaScript. <div> and <h1> are React
elements created under the hood.

 Every tag in JSX (like <h1> or <div>) must be properly closed, including
self-closing ones like <img />.

 All returned elements must be inside one parent (e.g., the <div> here).

 App is a function that returns the UI. It’s exported so it can be used
elsewhere.

 import React from 'react'; is required to use JSX, as JSX is transformed

into JavaScript using React.

2.1.3.1 React Props: Passing Data to Components

Props (short for properties) are how you pass data to components in React.
Props are read-only and allow you to customize components dynamically.

const Greeting = (props) => {

return <h1>Hello, {props.name}!</h1>;
};
// Using the component
<Greeting name="XYZ" />

 Props are passed from parent to child components.

 Props can be any type: string, number, array, object, etc.

8
React State: Managing Dynamic Data

State allows React components to manage their own data. Unlike props, which
are passed from parent to child, state is managed within the component itself
and can change over time.

import React, { useState } from 'react';

const Counter = () => {
const [count, setCount] = useState(0); // useState hook

return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;

 useState is a React Hook that lets you add state to function components.
 State is mutable and can change over time, triggering a re-render of the
component.

9
2.1.4 Node.js

Node.js is a server-side runtime environment that enables JavaScript to be

executed outside the browser. Built on Google’s V8 JavaScript engine, Node.js
provides a non-blocking, event-driven architecture, making it ideal for
developing scalable and high-performance applications. It serves as the
foundation for the backend of the MERN stack, allowing seamless integration
with other components.

Fig.6

Node.js offers an extensive ecosystem of libraries and tools, available through the
Node Package Manager (NPM). This vast repository enables developers to
accelerate the development process by leveraging pre-built modules.
Additionally, Node.js supports asynchronous programming, which helps handle
multiple requests concurrently, enhancing the application’s responsiveness and
efficiency. Its cross-platform compatibility allows developers to deploy Node.js
applications on various operating systems seamlessly.

Notable features of Node.js include:

 Event-Driven Architecture: Enables handling of high-throughput

scenarios, such as real-time chat applications and APIs.
 Scalability: Built-in clustering features allow applications to utilize multi-
core systems effectively.
 File System Access: Facilitates interaction with the file system, enabling
developers to read, write, and manage files directly.
 Built-in Modules: Offers essential modules for networking, data streams,
and more, reducing the need for external dependencies.

10
// Import the http module
const http = require('http');

// Create a server
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Welcome to the Node.js Tutorial');
});

// Listen on port 3000

server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});

It will start a server, and when you visit http://localhost:3000, it will

display
Welcome to the Node.js Tutorial

11
 CHAPTER – 3
INTRODUCTION TO PROJECT

3.1 Authentication Module

Handles user registration, login, and secure authentication using technologies like
JWT (JSON Web Tokens).

Password encryption is implemented using robust hashing algorithms like bcrypt

to enhance security.

const hashPassword=await bcryptjs.hash(password,10)

const createdUser=new User({
fullname: fullname,
email: email,
password:hashPassword,
});

Features include account recovery, user session management through secure

cookies or token-based systems, preventing unauthorized access.

// Token validation endpoint

router.post("/user/validate-token", (req, res) => {
const token = req.header("Authorization")?.split(" ")[1]; // Extract token
if (!token) {
return res.status(401).json({ message: "No token provided." });
}

try {
const decoded = verify(token, process.env.JWT_SECRET); // Verify token
res.status(200).json({ user: decoded });
} catch (err) {
res.status(401).json({ message: "Invalid or expired token." });
}
});

12
Code for authentication in this code I used browser’s local storage to store the
token for session management.

await axios
.post("http://localhost:4001/user/signup", userInfo)
.then((res) => {
console.log(res.data);
if (res.data) {
localStorage.setItem("token", res.data.token); // Save the token
toast.success("Signup Successfully");
navigate(from, { replace: true });
}
localStorage.setItem("Users", JSON.stringify(res.data.user));
})

13
3.2 Database Module
Manages data storage and retrieval using MongoDB.

Database schema is designed with Mongoose to define relationships and

constraints between collections.

const userSchema=mongoose.Schema({
fullname:{
type:String,
required:true
},
email:{
type:String,
required:true,
unique:true
},
password:{
type:String,
required:true
}
})

Indexing strategies are implemented to improve query performance, especially

for large datasets.

Data validation is performed at both the schema and application levels to ensure
data integrity.

_id: ObjectId('6723bf38d9a5577168bf4ea8')
fullname: "Ankush"
email: "[email protected]"
password: "123456"
__v: 0

_id: ObjectId('6723c0b5b805e7423151fb00')
fullname: "Anurag"
email: "[email protected]"
password: "$2a$10$FwI6mdsVkytpOqYvoUO5nuR2PuBVIVygtD55Ryq65e8
X2mAWyhZNy"
__v: 0

_id: ObjectId('6723cbbacc4cf804ada1b3ec')
fullname: "Abhay"
14
email: "[email protected]"
password: "$2a$10$W6O0C2N7p34ymYXoCkO6juu0qrYibxCHvc/T8LwYG3
xdmFJ/aY3n6"

Provides support for backup and recovery mechanisms to prevent data loss.

//connect to mongoDB

try {
mongoose.connect(URI, {

});
console.log("Connected to mongoDB");
} catch (error) {
console.log("Error: ",error)
}

15
3.3 Backend API Module
Built with Express.js to create RESTful APIs for seamless communication
between the frontend and backend.

Middleware is utilized for tasks such as input validation using libraries like Joi or
express-validator, ensuring data consistency.

app.use(express.json());

Implements robust error-handling mechanisms to capture and log errors for

debugging.

Includes security measures such as rate limiting, Cross-Origin Resource Sharing

(CORS) configuration, and input sanitization to prevent attacks like SQL
injection and XSS.

app.use(cors());

API endpoints are documented using tool like Postman for ease of use during
development and testing.

Express.JS VS Other Frameworks

Feature Express.js Django Ruby on Rails

Language JavaScript Python Ruby

High Moderate Low (Highly

Flexibility
(Unopinionated) (Opinionated) Opinionated)

Performance High Moderate Moderate

Middleware
Extensive Limited Limited
Support

Full-stack Full-stack
Use Case APIs, Web Apps
Development Development

Fig.7

16
3.4 Frontend Module
Developed using React.js to create a dynamic and responsive user interface.

UI components are modular and reusable, enhancing maintainability and

scalability.

Incorporates state management tool like Context API to handle application-wide

state efficiently.

Features include client-side form validation, dynamic routing with React Router,
and seamless integration with APIs.

//Email validation Code-

<input
type="email"
placeholder="Enter your email"
className="w-80 px-3 py-1 border rounded-md outline-none"
{...register("email", {
required: "Email is required",
pattern: {
value: /^[a-zA-Z0-9._%+-]+@gmail\.com$/,
message: "Please enter a valid Email address",
},
})}
/>

//defining routes
app.use("/book",bookRoute);
app.use("/user",userRoute);

Implements design frameworks like Material-UI or Bootstrap to ensure a visually

appealing and consistent user experience.

17
 CHAPTER – 4
SNAPSHOTS OF PROJECT

18
19
20
21
 CHAPTER – 5
CONCLUSION

The journey of building a full-stack application using the MERN stack has been
an insightful and rewarding experience. By leveraging MongoDB, Express.js,
React.js, and Node.js, this project showcases the power and versatility of modern
web development technologies. Each component of the MERN stack has its
unique strengths, and their integration creates a cohesive and efficient
development ecosystem.

The Authentication Module not only provides a secure foundation for user
access but also incorporates advanced features like password encryption and
token-based authentication to enhance security. The implementation of two-
factor authentication and role-based access control demonstrates a commitment
to safeguarding user data and ensuring an optimal user experience.

In the Database Module, MongoDB’s schema-less design offered the flexibility

needed to handle dynamic data requirements. The use of Mongoose for schema
management and validation ensured data integrity while maintaining
performance. The inclusion of indexing and backup mechanisms prepared the
application for scalability and reliability in production environments.

The Backend API Module, built with Express.js, serves as the backbone of the
application, facilitating seamless communication between the frontend and
backend. The incorporation of middleware for validation and security, along with
detailed API documentation, made the development process more organized and
streamlined. The module’s robust error-handling and security measures highlight
the importance of creating a dependable and resilient backend.

The Frontend Module, developed using React.js, offers a dynamic and user-
friendly interface. The adoption of modular components and state management
tools like Redux ensured a maintainable and scalable codebase. Features such as
dynamic routing and responsive design contributed to an engaging user
experience, aligning with modern web standards.

In conclusion, the MERN stack’s comprehensive capabilities have made it a

preferred choice for full-stack development. This project not only demonstrates
the technical prowess of the stack but also reflects the importance of meticulous
planning, execution, and testing in software development. As web technologies
continue to evolve, the MERN stack remains a reliable and powerful framework
for building innovative and impactful applications.

22
 REFERENCES

[1.]MongoDB, “MongoDB Documentation,” MongoDB Inc. Available at:

MongoDB Official Site.
[2.] React.js, “React Documentation,” Facebook Inc. Available at: React.js
Official Documentation.
[3.]Express.js, “Express.js API Documentation,” StrongLoop Inc. Available at:
Express.js Documentation.
[4.]Node.js, “Node.js Guide,” OpenJS Foundation. Available at: Node.js
Documentation.
[5.]Material-UI, “React UI Framework Documentation,” MUI. Available at:
Material-UI Docs.

23