AN INDUSTRIAL TRAINING REPORT

Project Report Submitted in Partial Fulfilment of the Requirements for the Degree of

Bachelor of Engineering
in
Information Technology

Session 2023-24

Summer Training
On The Topic

Full Stack Web Development Using MERN

from
DRDO

Submitted to:- Submitted by:-

Mr. Nishan Mr. Aayush kumar
Scientist 'B' JIET College
DL, Jodhpur JODHPUR
 ACKNOWLEDGEMENT

It gives me immense pleasure in presenting our training report on the topic

“Full Stack Web Development Using MERN”. I would like to take this
opportunity to express my deepest gratitude to the people, who have
contributed their valuable time for helping me to successfully complete this
training.

I record my sincere thanks to Director Sh. R.V. Hara Prasad, Defence

Laboratory Jodhpur, Defence Research and Development Organisation
(DRDO) for providing me an excellent opportunity to undergo training in
his esteemed organisation through which I could gain in exposure in the
research and development environment and getting acquainted in
software Development in field of defence technologies.

I would sincerely like to thanks Dr. Prashant Vasishta, Scientist ‘G’,

Head, CDST division for permitting me to work in his division and making
me aware of recent defence technologies.

I wish to express my deep sense of gratitude and obligation to Sh. Nishan

, Scientist ‘B’, my guide, for his valuable guidance and support through
this entire training.

This training is a result of the contribution of many. They have enriched my

knowledge by making suggestions based on their experience. Finally, I
would like to thank to Defence Research and Development Organization,
Jodhpur for conducting such kind of training, my college staff and all the
people who were directly and indirectly involved in the activity.

I would like to express my special thanks to Training and Placement Cell -

jodhpur institute of engineering and technology, Jodhpur for their efforts in
providing us this amazing opportunity in this esteemed Organisation.
 PREFACE

This report has been prepared as part of my training, with the view to
include all the details regarding the project that I carried out.

The purpose of this report is to assemble all the body of knowledge about
mern full stack web development and develop a project management web
application..

In this project report, I describe project management web application using

mern stack . For this purpose, I combine a set of technologies including
Javascript , React.js, Node.js. express.js, Jwt, scss to deploy this application
in a real-life production environment.

I begin by setting up React.js environment using create-react-app command

then installing package of react and scss. I make use of different javascript
package for different task. After that, I describe components of project
management application which is evaluated for crud operation.

After that backend server is created using express.js along with Node.js ,
mongoDB that allows the user to create , delete ,update, add data to
database.
DEFENCE LABORATORY, JODHPUR (DRDO)

Certificate

This is to certify that Mr. Aayush kumar, Student of B.tech AI

& ML(CSE), 2 nd Year, from Jodhpur institute of design and
technology, Jodhpur has undergone practical training on “full
stack web development ” from 26 may 2023 to 14th July
2023.

Training was conducted at Defence Laboratory, DRDO,

Jodhpur under accurate supervision and guidance.

Date: July 2023

Place: Jodhpur
sh.Nishan
Scientist 'B' , CDST division, Jodhpur
 TABLE OF CONTENTS

1. Introduction

i. Background and context of the project

ii. Objectives of the web application
iii. Overview of the MERN stack and its components

2. Project Overview

i. Description of the web application and its core features

ii. User requirements and target audience
iii. Scope and limitations of the project

3. Architecture and Technologies

i. Database schema design and structure

ii. Server-side architecture and API endpoints
iii. Client-side architecture and component hierarchy

4. Development Process

i. Tools and frameworks used in the development process (e.g., Git, npm)
ii. Challenges faced during development and their resolutions
5. Features and Functionality

i. Detailed description of the core features of the web application

ii. User authentication and authorization mechanisms
iii. Handling of data input, storage, and retrieval
iv. User interface design and user experience considerations

6. Conclusion

i. Summary of the project and its achievements

ii. Lessons learned during the development process

7. References
i. List of resources, documentation, and tutorials referenced during the project
 INTRODUCTION

Background and context of the project

Existing project management processes in drdo are manual,

time-consuming, and prone to errors.
Lack of centralized information and communication leads to
miscommunication, delays, and difficulties in tracking project
progress by project head.
Inadequate coordination among Scientist and project head as a
result slows down project execution.
Managing project timelines, resources, budgets, and
deliverables across various tasks and sub-projects is
challenging.
With the growing size and complexity of projects, traditional
project management methods struggle to keep pace and deliver
efficient results in DRDO.
Team members often face difficulties in accessing project-
related information, leading to delays and misalignment.
Organizations require accurate, up-to-date data and insights to
make informed project management decisions.
Without a centralized system, gathering and analyzing project
data becomes cumbersome and time-consuming.
The absence of data-driven decision-making negatively impacts
project success and hinders continuous improvement.
Organizations require a flexible and adaptable project
management solution that can accommodate evolving
requirements and support growth.

Addressing these challenges at drdo that necessitates the

implementation of a project management software solution that
streamlines processes, enhances collaboration, provides real-time
insights, and enables data-driven decision-making. By leveraging
technology and
Marketing automation, project
Strategist management software
Marketing Analyst Marketing Analyst can

offer significant benefits and overcome the limitations of traditional

project management approaches.
Objectives of the project management application

Provide a centralized platform to manage all project-related

information, tasks, documents, and resources at DRDO jodhpur.
Facilitate efficient communication and collaboration among
Scientist ,project head and director of DRDO.
Facilitate Scientist of DRDO sharing of project-related
information, updates, and documents among team members
and project head.
Provide real-time visibility into project progress, milestones, and
deadlines.
Generate automated reports and dashboards to track project
performance, resource utilization, and budget

The overall objective of a project management web application is to

improve project efficiency, collaboration, and success by providing
a comprehensive and user-friendly platform for managing projects
from start to finish.
Overview of the MERN stack:

The MERN stack is a popular and powerful technology stack

used for building web applications.

MongoDB: MongoDB is a NoSQL database that allows for flexible

and scalable data storage. It is designed to handle large volumes of
data. MongoDB's document-based structure allows for easy
retrieval and manipulation of data.

Express.js: Express.js is a minimalistic and flexible web application

framework based on Node.js. It provides a set of tools and features
for building robust and efficient server-side APIs. With Express.js,
you can handle HTTP requests, define routes, implement
middleware, and integrate with the MongoDB database. It serves
as the backend component of the MERN stack, handling data
retrieval, manipulation, and authentication.

React.js: React.js is a powerful JavaScript library for building user

interfaces. It enables the development of dynamic and interactive
frontend components that can seamlessly update and render in
response to user actions or data changes.

Node.js: Node.js is a server-side JavaScript runtime environment

that enables the execution of JavaScript code on the server. It
provides a scalable and event-driven architecture, allowing for
high-performance and concurrent handling of multiple requests.
Node.js integrates with Express.js and MongoDB, making it an
integral part of the MERN stack.

Marketing Analyst
 PROJECT OVERVIEW

Description of the web application and its core

features

The project management software developed for DRDO (Defense

Research and Development Organization) Jodhpur which
primarily consists of scientists.

Authentication:

User Registration: New users can easily create an account by providing necessary
information and registering their credentials securely.
Login: Users can access the application by logging in with their unique credentials,
ensuring authorized access to project data.
Password Reset: In case users forget their passwords, a password reset functionality
allows them to regain access to their accounts.

Project Management:

Add New Project: Users can create new projects by entering project details such as
title, description, deadlines, and assigning team members. The information is stored
securely in the MongoDB database for easy retrieval and management.
Search Project: An intuitive search feature allows users to find specific projects
based on criteria such as project title, keywords, or assigned team members.
Delete Project: Users have the ability to remove projects from the database, ensuring
efficient project organization and data management.
Edit Project Information: Users can update project details, such as title, description,
deadlines, and team member assignments, ensuring accurate and up-to-date project
information.
View Project: Users can access project details, including title, description, deadlines,
team members, and other relevant information, providing a comprehensive overview
of each project.

Collaboration and Communication:

File Attachments: Users can attach relevant files, documents, or resources to project
tasks or discussions, promoting better information sharing and organization.

Marketing Strategist Marketing Analyst Marketing Analyst

User requirements and target audience

this project management software is a comprehensive solution

designed to streamline project management processes and
enhance collaboration within teams. It leverages the MERN
stack, providing a user-friendly interface and robust functionality
for efficient project planning, tracking, and execution. With a
focus on user authentication, project management, and data
management, our application offers the following core features:

User Requirements:

1. Centralized Project Management: The software should provide a

centralized platform to manage and organize project information,
including project details, timelines, milestones, and deliverables.
2. Efficient Task and Resource Management: The software track progress
to ensure efficient project execution.
3. Document and File Management: The software should support document
and file storage, allowing scientists to store, organize, and access project-
related documents and resources.
4. Collaboration and Communication: The software should facilitate
collaboration and communication among scientists and project teams,
enabling seamless information sharing, discussions, and updates.
5. User-Friendly Interface: The software should have an intuitive and user-
friendly interface, making it easy for scientists to navigate, input data,
and retrieve project information.
6. Data Security and Confidentiality: The software should adhere to strict
security measures to protect sensitive project data and maintain
confidentiality.

Marketing Strategist Marketing Analyst Marketing Analyst

Target Audience:

The target audience for this project management software is scientists

working with in DRDO Jodhpur. Scientists from various disciplines,
researchers, project managers, and other scientific personnel involved
in project planning, execution, and management would benefit from
using the software. They are currently using Microsoft Excel for
managing project information, and the new software aims to provide
them with a more efficient and tailored solution for their project
management needs.

By addressing these user requirements and catering to the specific

needs of scientists within DRDO Jodhpur, the project management
software seeks to enhance project efficiency, collaboration, and data
management. It aims to replace the reliance on Excel spreadsheets and
provide a comprehensive and streamlined solution for managing
scientific projects within DRDO Jodhpur.

Marketing Strategist Marketing Analyst

Scope and limitations of the project

scope of the project management software encompasses the

development and implementation of a comprehensive web
application tailored to the specific requirements of DRDO Jodhpur
scientists.

1. User Authentication: Implementing a secure authentication system to

ensure authorized access to the software, allowing scientists to create
individual accounts and safeguard project information.
2. Project Creation and Management: Enabling scientists to create new
projects within the software, including project details, milestones,
deadlines, and assigned team members. The software will provide
features to view, edit, and delete project information as needed.
3. Document and File Management: Providing a centralized platform for
scientists to upload, store, organize, and access project-related
documents, files, and resources. This feature will ensure easy
collaboration and seamless information sharing among team members.
4. Reporting and Analytics: Generating comprehensive reports and
analytics to track project performance, key metrics, and progress.
Scientists will be able to gather insights from the data, facilitating
informed decision-making and timely adjustments to project strategies.

Limitations of the Project Management Software:

While the project management software aims to address the specific

needs of DRDO Jodhpur scientists, it has certain limitations to
consider:

Customization and Scalability: The software will be developed based on

the identified requirements, but extensive customization beyond the initial
scope may require additional development efforts. Additionally, scalability
features may need to be considered to accommodate future growth and
increased project complexity.
Training and Adoption: Scientists transitioning from existing systems,
such as Microsoft Excel, may require training and support to familiarize
themselves with the new software. Adequate user training and a user-
friendly interface will be essential to ensure successful adoption.

Security Considerations: The software will incorporate security

measures to protect sensitive project data. However, regular updates
and ongoing monitoring will be necessary to address potential security
vulnerabilities and ensure data integrity.

Maintenance and Support: Ongoing maintenance and support will be

essential to address any technical issues, provide bug fixes, and
accommodate future enhancements based on user feedback and
evolving needs.

By understanding the scope and limitations of the project

management software, DRDO Jodhpur scientists can effectively utilize
the software to streamline project management processes, enhance
collaboration, and achieve their project goals efficiently.

Marketing Strategist Marketing Analyst Marketing Analyst

 ARCHITECTURE AND TECHNOLOGIES

Database schema design and structure:

The application involves three main entities: User, Project, and

Token. The following sections provide an explanation of each
schema and its purpose within the application.

1. User Schema: The User schema represents the users of the

project management application. Here is an explanation of the
User schema:

Fields:

userId: A unique identifier for each user, using the

mongoose.Schema.Types.ObjectId type.
name: The name of the user, stored as a string.
email: The email address of the user, stored as a string. It has a
unique constraint to ensure each user has a unique email.
password: The hashed password of the user, stored as a string.
It is encrypted using a hashing algorithm (e.g., bcrypt) before
being saved to the database.
photo: The photo URL of the user, stored as a string. It has a
default value for displaying a placeholder photo if not provided.
phone: The phone number of the user, stored as a string. It has
a default value to handle cases where the phone number is not
provided.
bio: A brief biography or description of the user, stored as a
string. It has a maximum character limit to ensure the bio does
not exceed a specific length.

The User schema provides a structure to store user information,

including their credentials and additional details. It is essential for
user authentication and managing user-related data in the
application.
Marketing Analyst
user schema:

Marketing Analyst
Project Schema:

The Project schema represents the projects within the project

management application. Here is an explanation of the Project
schema:

Fields:

projectId: A unique identifier for each project, using the

mongoose.Schema.Types.ObjectId type.
name: The name of the project, stored as a string.
description: A description of the project, stored as a string.
price: A total cost of the project, stored as a number.
image: image of the project, stored as a object.
startDate: The start date of the project, stored as a Date object.
endDate: The end date of the project, stored as a Date object.
status: The status of the project, stored as a string.
user: A reference to the User schema, using the
mongoose.Schema.Types.ObjectId type. It establishes a
relationship between the project and the user who created it.

The Project schema allows the application to store and manage

project-related information, including project details, dates,
status, and the associated user. It facilitates organization,
retrieval, and manipulation of project data within the application.

Marketing Analyst
Project Schema:

Marketing Analyst
Token Schema:

The Token schema represents the tokens used for various

functionalities within the application, such as user
authentication. Here is an explanation of the Token schema:

Fields:

userId: A reference to the User schema, using the

mongoose.Schema.Types.ObjectId type. It establishes a
relationship between the token and the user it belongs to.
token: The value of the token, stored as a string.
createdAt: The creation date of the token, stored as a Date
object.
expiresAt: The expiration date of the token, stored as a Date
object.

The Token schema provides a structure to store tokens

associated with user authentication or other functionalities in the
application. It links tokens to their respective users, stores the
token value, and tracks the creation and expiration dates.

By using these three schemas, the project management

application can effectively store and manage user information,
project details, and tokens for authentication or other purposes.

Marketing Analyst
Server-side architecture and API endpoints

The server-side architecture of the MERN project management

software follows a typical MERN stack setup, utilizing MongoDB,
Express.js, React, and Node.js. Here's an overview of the server-
side architecture:

Server Infrastructure: The software is deployed on a cloud-based

platform like AWS, Azure, or Google Cloud. A virtual machine or
containerized environment is set up to host the server.

Programming Language: Node.js is used as the server-side

runtime environment, providing a JavaScript-based platform for
server-side development.

Frameworks and Libraries:

Express.js: Express.js is utilized as the backend framework to

handle routing, middleware, and API development. It simplifies
the process of building robust and scalable APIs.

Mongoose: Mongoose is employed as an Object-Data Modeling

(ODM) library for MongoDB. It enables structured data
modeling, validation, and interaction with the MongoDB
database.

Passport.js: Passport.js is implemented for authentication and

user management. It supports various authentication
strategies, such as JWT (JSON Web Tokens) or OAuth.

Database: MongoDB is used as the NoSQL database for storing

project and user data. Its flexible schema allows easy adaptation
to changing requirements.

Authentication: User authentication is implemented using JWT

(JSON Web Tokens) or session-based authentication.Marketing
Middleware
Analyst

is utilized to handle authentication and authorization processes.

API Endpoints:

The MERN project management software provides various API

endpoints to manage projects, tasks, and users. Here are some example
API endpoints:

User Endpoints:
Register a new user: POST /api/users/register
User login: POST /api/users/login
Get user details: GET /api/users/me
Update user profile: PUT /api/users/me
forgot password: PUT/api/forgot
Change user password: PUT /api/users/me/password

Project Endpoints:
Create a new project: POST /api/projects
Get all projects: GET /api/projects
Get project details: GET /api/projects/:projectId
Update project details: PUT /api/projects/:projectId
Delete a project: DELETE /api/projects/:projectId

Task Endpoints:
Create a new task: POST /api/projects/:projectId/tasks
Get all tasks for a project: GET /api/projects/:projectId/tasks
Get task details: GET /api/projects/:projectId/tasks/:taskId
Update task details: PUT /api/projects/:projectId/tasks/:taskId
Delete a task: DELETE /api/projects/:projectId/tasks/:taskId

contact us:
Contact us a : POST /api/contactus

These API endpoints allow users to perform essential actions such as

user registration, login, and profile updates. They also facilitate project
management operations like creating, retrieving, updating, and deleting
Marketing Analyst

projects and tasks.

Client-side architecture and component hierarchy

Client-side Architecture:

1. UI Library: Utilize React as the frontend JavaScript library for

building user interfaces efficiently.
2. State Management: Use React's built-in state management
capabilities and consider additional libraries like Redux or MobX for
managing global application state.
3. Routing: Utilize a routing library like React Router to handle client-
side routing and navigation within the application.
4. Styling: Choose a CSS-in-JS solution like styled-components or CSS
modules for styling components.

Component Hierarchy:

The component hierarchy defines the structure and organization of the

React components within the project management software. Here's an
example of a possible component hierarchy:

- BrowserRouter
- ToastContainer
- Routes
- Route path="/" element={<Home />}
- Route path="/login" element={<Login />}
- Route path="/register" element={<Register />}
- Route path="/forgot" element={<Forgot />}
- Route path="/resetpassword/:resetToken" element={<Reset />}
- Route
- path="/dashboard"
- element=
<Sidebar>
<Layout>
<Dashboard />
</Layout>
</Sidebar>
-Route
- path="/add-product" Marketing Analyst

- element=
<Sidebar>
<Layout>
<AddProduct />
</Layout>
</Sidebar>
 - path="/add-product"
- element=
<Sidebar>
<Layout>
<AddProduct />
</Layout>
</Sidebar>
- Route
- path="/add-demand"
- element=
<Sidebar>
<Layout>
<Formss />
</Layout>
</Sidebar>
- Route
- path="/add-supplyorder"
- element=
<Sidebar>
<Layout>
<Formsss />
</Layout>
</Sidebar>
- Route
- path="/product-detail/:id"
- element=
<Sidebar>
<Layout>
<ProductDetail />
</Layout>
</Sidebar>
- Route
- path="/edit-product/:id"
- element=
<Sidebar>
<Layout>
<EditProduct />
</Layout>
</Sidebar>
- Route
- path="/profile"
- element=
<Sidebar>
<Layout>
<Profile />
</Layout>
</Sidebar>
- Route
- path="/edit-profile"
- element=
<Sidebar>
<Layout>
<EditProfile />
</Layout>
</Sidebar>
- Route
- path="/contact-us"
- element=
<Sidebar> Marketing Analyst
<Layout>
<Contact />
</Layout>
</Sidebar>

In this component hierarchy:

 The application utilizes the <BrowserRouter> component from
React Router to enable client-side routing.
The <ToastContainer> component is used to display toast
notifications in the application.
The <Routes> component is used to define the routes and their
corresponding components.
Each <Route> component represents a specific path and is
associated with a corresponding component.
The components are rendered based on the path matched in the
URL.

Here's a breakdown of the main routes and their corresponding

components:

The root path ("/") renders the <Home> component.

The "/login" path renders the <Login> component.
The "/register" path renders the <Register> component.
The "/forgot" path renders the <Forgot> component.
The "/resetpassword/:resetToken" path renders the <Reset>
component.
The "/dashboard" path renders the <Dashboard> component
within a <Sidebar> and <Layout> component.
The "/add-product" path renders the <AddProduct> component
within a <Sidebar> and <Layout> component.
The "/add-demand" path renders the <Formss> component within
a <Sidebar> and <Layout> component.
The "/add-supplyorder" path renders the <Formsss> component
within a <Sidebar> and <Layout> component.
The "/product-detail/:id" path renders the <ProductDetail>
component within a <Sidebar> and <Layout> component.
The "/edit-product/:id" path renders the <EditProduct> component
within a <Sidebar> and <Layout> component.
The "/profile" path renders the <Profile> component within a
<Sidebar> and <Layout> component.
The "/edit-profile" path renders the <EditProfile> component
within a <Sidebar> and <Layout> component.
The "/contact-us" path renders the <Contact> component within a
Marketing Analyst

<Sidebar> and <Layout> component.

The <Sidebar> and <Layout> components are used to provide a
consistent layout and structure to the rendered components.
 DEVELOPMENT PROCESS
Tools and frameworks used in the development process
(e.g., Git, npm)

During the development process of a MERN project management

software, several tools and frameworks are commonly used to
enhance productivity, manage dependencies, and streamline
collaboration. Here are some examples of tools and frameworks that
can be utilized:

Git: Git is a distributed version control system used for tracking

changes in the source code. It allows for efficient collaboration,
branching, merging, and reverting code changes.

npm (Node Package Manager): npm is the default package manager

for Node.js. It helps manage project dependencies, install packages,
and run scripts defined in the package.json file.

React: React is a JavaScript library used for building user interfaces.

It provides a component-based approach for reusable UI
components and efficient rendering.

Express.js: Express.js is a popular backend framework for Node.js. It

simplifies the development of web applications by providing a
minimalistic and flexible structure for routing, middleware, and API
development.

MongoDB: MongoDB is a NoSQL database used for storing project

and user data in a MERN project management software. It offers
flexibility, scalability, and fast query response times.

Mongoose: Mongoose is an Object-Data Modeling (ODM) library for

MongoDB in Node.js. It provides a higher-level abstraction
Marketing Analyst for

interacting with the MongoDB database, simplifying data modeling

and validation.
React Router: React Router is a routing library for React
applications. It enables client-side routing, allowing for navigation
and rendering of different components based on URL changes.

Styled-components: Styled-components is a CSS-in-JS library that

allows developers to write CSS styles directly within their React
components. It provides scoped styles and enhances component
reusability.

Webpack: Webpack is a module bundler that bundles JavaScript,

CSS, and other assets for deployment. It enables features like code
splitting, asset optimization, and hot module replacement.

Babel: Babel is a JavaScript compiler that converts modern

JavaScript code into backward-compatible versions. It allows
developers to use the latest JavaScript features while ensuring
cross-browser compatibility.

ESLint: ESLint is a popular JavaScript linter that helps enforce

coding standards, identify potential errors, and maintain code
quality. It provides configurable rules and integrates with code
editors.

Postman: Postman is an API development and testing tool. It

enables developers to test API endpoints, debug requests, and
automate API workflows during development.

These tools and frameworks play crucial roles in the development

process of a MERN project management software, providing
efficient development, collaboration, dependency management,
code quality assurance, and testing capabilities.

Marketing Analyst
Challenges faced during development and their
resolutions
1. Complex State Management: Managing complex state within the application,
including user authentication, project details, and task updates, can be
challenging. Resolutions include:
Using a state management library Redux to centralize and manage the
application state.
Breaking down the state into smaller, more manageable pieces using reducers
and actions.
Utilizing React context for sharing state across components when appropriate.
2. Authentication and Authorization: Implementing a secure and reliable
authentication and authorization system can be challenging. Resolutions
include:
Using well-established authentication strategies like JWT (JSON Web Tokens) or
session-based authentication.
Implementing server-side validation and securely storing passwords using
hashing algorithms like bcrypt.
Implementing role-based access control (RBAC) to manage user permissions and
restrict access to certain resources.
3. Handling Concurrent Updates: Managing concurrent updates to projects and
tasks can lead to conflicts and data inconsistencies. Resolutions include:
Implementing optimistic UI updates by assuming the request will succeed
and updating the UI immediately.
Implementing a conflict resolution strategy to handle situations where concurrent
updates result in conflicts, such as using timestamps or versioning.
4. Performance Optimization: Ensuring the application performs well,
particularly when handling a large number of projects and tasks, can be
challenging. Resolutions include:
Optimizing database queries by creating appropriate indexes and using
aggregation pipelines for complex queries.
Implementing caching mechanisms at various levels (client-side, server-side, or
database) to reduce the number of unnecessary requests.
Implementing pagination and lazy loading to load data in chunks, reducing the
initial load time.
5. Error Handling and Logging: Properly handling errors and logging them for
debugging and monitoring purposes is crucial. Resolutions include:
Implementing centralized error handling middleware to capture and handle errors
consistently.
Logging errors to a centralized logging system for easy monitoring and
debugging.
Using appropriate error codes and messages to provide meaningful feedback to
users.

Marketing Analyst
 FEATURES AND FUNCTIONALITY
Detailed description of the core features of the web
application

1. Authentication, Login, and Logout:

Users can register an account and log in to the application using their
credentials.
The authentication process ensures secure access to the application's features
and data.
Users can log out of their accounts to terminate their session and protect their
privacy.
2. Password Reset:
In case a user forgets their password, a password reset feature allows them to
reset it securely.
Users can request a password reset email containing a unique token.
By clicking the link in the email, users can reset their password to regain access
to their account.
3. Contact Us:
The "Contact Us" feature enables users to communicate with the support team
or administrators.
Users can fill out a contact form or send an email to a designated support email
address.
This feature ensures effective communication and assists users in resolving
any issues or queries.
4. List of Projects and Search:
The application provides a list of projects, displaying essential information for
each project.
Users can search for projects based on keywords, project names, or other
relevant criteria.
The search functionality allows users to quickly find specific projects based on
their requirements.
5. Delete Project from Database:
Authorized users can delete projects from the database if they have the
necessary permissions.
Deleting a project permanently removes it from the system and ensures data
integrity.
6. Add New Project:
Authorized users can create new projects by providing relevant details such as
project name, description, start and end dates, and other project-specific
information.
Upon creation, the new project is stored in the database and becomes available
Marketing Analyst
for management and tracking.
 7.Edit Project and Provide More Information:

Users with the appropriate permissions can edit project details to update
information or add additional details.
This feature allows users to modify project names, descriptions, dates, or any
other relevant project information.
By providing more information, users can enhance project documentation and
improve project management efficiency.

These core features ensure that users can securely authenticate themselves, manage
projects effectively, and communicate with the support team when needed. The ability
to search, delete, add, and edit projects provides users with comprehensive project
management capabilities, empowering them to track and update project information
as required by DRDO's specific requirements.

Marketing Analyst

2
Marketing Analyst
User authentication and authorization mechanisms

User authentication and authorization are crucial aspects of the

MERN project management software. JWT (JSON Web Tokens) is a
widely used technology for implementing secure authentication and
authorization mechanisms. Here's a detailed explanation of how
JWT is utilized in the software:
User Registration:
Users can register by providing their name, email, and password.
The password is securely hashed and stored in the database.
Upon successful registration, a unique JWT is generated and
returned to the user.
User Login:
Users can log in by providing their registered email and password.
The entered password is hashed and compared with the stored
hashed password in the database.
If the credentials match, a JWT is generated and returned to the
user.
JSON Web Tokens (JWT):
Upon successful registration or login, a JWT is generated and
issued to the user.
The JWT contains claims, such as the user's ID, name, and email.
The JWT is digitally signed by the server using a secret key to
ensure its authenticity.
Token Storage:
The generated JWT is typically stored on the client-side, usually in
local storage or a cookie.
The token is sent along with each subsequent request from the
client to the server.
Authentication Middleware:
Server-side middleware verifies the JWT on incoming requests to
protected endpoints.
The server validates the token's signature, expiration, and other
necessary checks.
If the token is valid, the user is considered authenticated and can
access protected resources.
Marketing Analyst
Authorization and Access Control:
Once authenticated, the server checks the user's authorization
level for accessing specific resources.
User roles or permissions are stored in the database and
associated with the user's profile.
Based on the user's authorization level, access is granted or
denied to certain endpoints or resources.
Token Expiration and Refresh:
JWTs have an expiration time to enhance security.
When a token is about to expire, the client can request a new
token using a refresh token mechanism.
The refresh token, if valid, is used to obtain a new JWT without
requiring the user to re-enter their credentials.
Using JWT for authentication and authorization in the MERN
project management software provides a secure and efficient
mechanism for verifying user identities and managing access to
protected resources. It ensures that only authenticated and
authorized users can perform specific actions and access relevant
project management features.
Authorization and Access Control:
Once authenticated, the server checks the user's authorization
level for accessing specific resources.
User roles or permissions are stored in the database and
associated with the user's profile.
Based on the user's authorization level, access is granted or
denied to certain endpoints or resources.
Token Expiration and Refresh:
JWTs have an expiration time to enhance security.
When a token is about to expire, the client can request a new
token using a refresh token mechanism.
The refresh token, if valid, is used to obtain a new JWT without
requiring the user to re-enter their credentials.
Using JWT for authentication and authorization in the MERN
project management software provides a secure and efficient
mechanism for verifying user identities and managing access to
protected resources. It ensures that only authenticated and
authorized users can perform specific actions and access relevant
Marketing Analyst
project management features.
Handling of data input, storage, and retrieval

The MERN project management web application handles data input,

storage, and retrieval through a structured process involving
frontend components, backend APIs, and a database. Here's an
overview of how data is managed in the application:
1. Data Input:
User interfaces and forms are designed in the frontend to capture
data from users.
Users input data through various form fields, such as project names,
descriptions, task details, etc.
Data input is validated on the client-side to ensure accuracy and
completeness.
2. Data Transmission:
Upon submitting the form or triggering an action, the frontend sends
a request to the backend API.
Data is transmitted from the client to the server using HTTP protocols,
typically using RESTful API endpoints.
3. Backend API Handling:
The backend API receives the request and validates the incoming
data for consistency and security.
Data validation checks for required fields, data types, and any custom
business rules.
If the data passes validation, it is processed further; otherwise, an
error response is sent back to the client.
4. Data Storage:
The validated data is stored in a database, such as MongoDB, through
an Object-Data Modeling (ODM) library like Mongoose.
The data is transformed into a suitable format and saved in the
corresponding collections or tables.
The database schema ensures the integrity and structure of the
stored data.
5. Data Retrieval:
When users request to view or retrieve data, the frontend sends a
request to the backend API.
The backend API queries the database based on the requested
criteria, such as project IDs, user IDs, or search keywords.
Marketing Analyst

The retrieved data is transformed into a suitable format and sent back
to the frontend as a response.
6. Authentication and Authorization:

User authentication and authorization mechanisms are applied to

restrict access to certain data and actions.
Users can only access data and perform actions based on their roles,
permissions, and ownership.

The MERN project management web application follows this

process to handle data input, ensure its validity and security, store it
in a database, and retrieve it when requested. This approach
provides a structured and controlled system for managing project-
related data and allows users to interact with and retrieve the stored
information as required.

Marketing Analyst
 CONCLUSION

The MERN project management web application developed for DRDO

scientists is a comprehensive solution designed to streamline project
management and enhance collaboration within the organization. Built
using the MERN stack (MongoDB, Express.js, React, and Node.js), the
application offers a range of features specifically tailored to meet the
requirements of DRDO scientists.

Key features of the application include user authentication and

authorization mechanisms, allowing scientists to securely access and
manage their projects. The application provides functionalities such as
project creation, editing, and deletion, allowing scientists to track project
details, timelines, and milestones. Additionally, tasks can be added,
assigned, and tracked within projects, ensuring efficient task
management.

Lessons learned during the development process

During the development process of the MERN project management web

application, several valuable lessons were learned. The following lessons
have significantly contributed to the success of the project:

React Hooks for Enhanced Functionality: The adoption of React Hooks, such as
useState and useEffect, proved beneficial in simplifying component logic and
improving code readability. Hooks allowed for easier state management and
lifecycle handling within functional components.

Efficient State Management with Redux: Utilizing Redux as a state

management library enabled centralized and predictable state management
throughout the application. By maintaining a single source of truth, Redux
facilitated data flow and provided a consistent user experience.

Modular and Maintainable Styling with SCSS: Employing SCSS (Sass) for
styling offered enhanced flexibility and organization. The use of variables,
mixins, and nesting helped create reusable and maintainable CSS code,
ensuring consistent styling across the application.
7
Express.js for Backend Development: Choosing Express.js as the backend
framework proved advantageous due to its simplicity, flexibility, and
robust ecosystem. Express.js enabled efficient routing, middleware
implementation, and seamless integration with the frontend.

Secure Authentication with JWT: Implementing JSON Web Tokens (JWT)

for authentication provided a secure and stateless solution. JWTs allowed
for user verification and authorization, enhancing application security and
user privacy.

Effective Code Organization and File Structure: Maintaining a well-

organized codebase and establishing a consistent file structure
significantly improved code readability and maintainability. It facilitated
collaboration among team members and streamlined development
workflows.

By learning from these experiences with React Hooks, state

management, SCSS, Express.js, and JWT implementation, the
development team gained valuable insights into efficient MERN stack
development practices. These lessons will undoubtedly contribute to
future projects by enabling the creation of robust, scalable, and user-
friendly applications.
DRDO

Thank
You