ENHANCED PETITION TRACKING SYSTEM

USING AES AND HS256

A PROJECT REPORT

Submitted by

ARAVINDH A (822219104003)
DHARUN A (822219104010)
HARIHARAN B (822219104012)

in partial fulfillment for the award of the degree

of

BACHELOR OF ENGINEERING

IN

COMPUTER SCIENCE AND ENGINEERING

UNIVERSITY COLLEGE OF ENGINEERING THIRUKKUVALAI

ANNA UNIVERSITY:CHENNAI 600 025

APRIL/MAY 2023
 ANNA UNIVERSITY: CHENNAI – 600 025

BONAFIDE CERTIFICATE

Certified that this project report titled “ENHANCED PETITION

TRACKING SYSTEM USING AES AND HS256 ” is the bonafide work of
“ ARAVINDH A (822219104003) DHARUN A (822219104010) ,
HARIHARAN B (822219104012)” of Computer Science & Engineering
whose carried out this Project work under my supervision.

SIGNATURE SIGNATURE

Dr. K. L. NEELA, M.E., Ph.D., Dr. K. L. NEELA, M.E., Ph.D.,

Assistant professor, Assistant professor,

HEAD OF THE DEPARTMENT, SUPERVISOR,

Department of CSE, Department of CSE,

University College of Engineering, University College of Engineering,

Thirukkuvalai – 610204. Thirukkuvalai – 610204.

Submitted for the Project Viva Voce held on: ……………….

INTERNAL EXAMINER EXTERNAL EXAMINER

ii
 ACKNOWLEDGEMENT
We would like our gratitude towards all the people who have imparted
their valued time and efforts to help us in completing this project. With Out
whom it would not have been possible for us understand and examine the
project.
First of all, we express our sincere gratitude to our dear parents who
have been the major contributor of inspiration and encouragement to us
throughout our career. We express our heartfelt thanks to our honourable Dean.
Dr. G. ELANGOVAN, M.E., Ph.D., for allowing as to do this project.
We express our sincere thanks to Head of the Department Dr. K. L.
NEELA, M.E., Ph.D., for providing the necessary support in all means in
carry out this project.
We express our deep sense of reverence and offer our thanks with
profound gratitude to our project guide Dr. K. L. NEELA, M.E., Ph.D., for
motivation and encourage infused in us. Her readiness and eagerness for
consolation at all times, him educative inputs, concern and assistance have
been invaluable.
We express our sincere thanks to the project committee co-ordinator Mr.
S. MADHAN, B.E., M.Tech., Department of Computer Science and
Engineering, University College of Engineering, Thirukkuvalai, for their
invaluable guidance and technical Support. We thank all the faculty members
of the Department of Computer Science and Engineering for their valuable
help and guidance.
Finally, we thank god almighty for his blessing without which we would
have not the project and made this project success.
PROJECT TEAM
ARAVINDH A (822219104003)
DHARUN A (822219104010)
HARIHARAN B (822219104012)

iii
ABSTRACT
A Nation's public and private sectors are remarkably impacted by the

internet's and information technology's enormous success. The internet

services and applications have drastically increased. That’s why people find it

more convenient to use internet applications to give an online complain

regarding any suspicious activity rather than visiting a police station. Building

a web-based petition management system requires a solid foundation,

particularly for the handling of complaints also higher officials find it difficult

to track and monitor complaints these days, so this project developed to make

things easier.

iv
 TABLE OF CONTENTS

CHAPTER TITLE PAGE

NO. NO.
ABSTRACT iv
LIST OF FIGURES viii
LIST OF ABBREVIATIONS ix
1 INTRODUCTION 1
1.1 GENERAL 1
1.1.1 ENHANCED PETITION TRACKING
1.2 MERN METHODODLOGY 2
1.2.1 WHY MERN 3
2 LITERATURE SURVEY 6
2.1 NBA web portal: A Comprehensive Survey on
NBA Accreditation and MERN Stack for the
Purpose of Implementing a Portal 6
2.2 e-Cops An Online Crime Reporting and
Management System for Riyadh City 7
2.3 Police Complaint Management System using
Blockchain Technology 8
2.4 Online Police Station, A State-of-Art Italian
Semantic Technology against Cybercrime 9
2.5 Complaint handling theoretical framework 10
2.6 Conceptual Idea for Implementing Automated
Complaint Monitoring System for Rural
Development 11
3 SYSTEM ANALYSIS 12
3.1 EXISTING SYSTEM 12
3.1.1 DISADVANTAGE 13
3.2 PROPOSED METHOD 13
v
 3.2.1 ADVANTAGE 14
3.3 SYSTEM ARCHITECTURE 15
3.4 ALGORITHMS 15
3.4.1 AES AND HS256 15
3.4.2ADVANCED ENCRYPTIO STANDARD 15
3.4.3 HS256 (JWT) 19
4 IMPLEMENTATION 21
4.1 MODULE LIST 21
4.2 MODULE DESCRIPTION 22
4.2.1 PASSWORD HASHING USING BCRYPT 22
4.2.3 PROTECTED ROUTING VIA
COMPONENT 22
4.2.4 REDUX STRUCTURE
4.2.5 AES
5 SYSTEM SPECIFICATION 24
5.1 HARDARE SYSTEM CONFIGURATION 24
5.2 SOFTWARE SYSTEM CONFIGURATION 24
5.3 SOFTWARE ENVIRONMENT 24
5.3.1 NODE JS 24
6 SYSTEM DESIGN 40
6.1 UML DIAGRAMS 40
6.1.1 USE CASE DIAGRAM 41
6.1.2 CLASS DIAGRAM 42
6.1.3 SEQUENCE DIAGRAM 43
6.1.4 ACTIVITY DIAGRAM 44
6.1.5 DEPLOYMENT 45
6.1.6 DATA FLOW DIAGRAM 46

vi
7 SYSTEM TESTING 47
7.1 TYPES OF TESTS 47
7.2 UNIT TESTING 49
7.3 INTEGRATION TESTING 49
7.4 ACCEPTANCE TESTING
8 SNAPSHOTS 51
9 APPENDIX 54
10 CONCLUSION 65
11 REFERENCES 66

vii
 LIST OF FIGURES

PAGE
FIGURE NO. TITLE
NO.
1.1 MERN Methodology 02
1.2 Architecture of MERN stack 05
3.1 Architecture of Proposed System 15
3.2 Operation of AES 17
3.3 Encryption Process 17
3.4 Architecture of HS256 20
5.1 Concept of Node JS 26
6.1 Use Case Diagram 42
6.2 Class Diagram 43
6.3 Sequence Diagram 44
6.4 Activity Diagram 45
6.5 Deployment Diagram 46
6.6 Data Flow Diagram 46
8.1 Login Page 51
8.2 Dashboard Page 51
8.3 Petitions Page 52
8.4 Add Petition Page 52
8.5 Add Officer Page 53
8.6 About Officer Page 53

viii
 LIST OF ABBREVIATIONS

AES - Advanced Encryption Standard Algorithm

MVC - Model View Controller
MERN - MangoDB Express React Node
JWT - Json Web Token
ES6 - Ecma Script
HS256 - HMAC with SHA
GDPR - General Data Privacy Protection Regulation
EJS - Embedded JavaScript Templating
JSON - JavaScript Object Notation
API - Application Programming Interface

ix
 CHAPTER-1

INTRODUCTION

1.1 GENERAL

Petition tracking systems are becoming increasingly important in today's

society, where citizens have a growing desire to voice their opinions and
participate in decision-making processes. With the advent of the internet and
social media, petitions have become one of the most effective ways to gather
public support and influence policy changes. However, managing and tracking
the progress of petitions can be a daunting task, especially when dealing with
large numbers of signatures.

1.1.1 ENHANCED PETITION TRACKING

In this project, The petition tracking system is based on the MERN
(MongoDB, Express.js, React, Node.js) stack. This system aims to simplify the
process of creating and managing petitions, as well as tracking their progress in
real-time. By using the MERN stack, we have combined the power of a
NoSQL database (MongoDB) with a server-side framework (Express.js) and a
client-side framework (React) to create a seamless and efficient user
experience.

1.2 MERN METHODODLOGY

MERN Stack is a collection of powerful technologies and robust, used to
develop scalable master web applications comprising backend, front-end, and
database components. It is JavaScript that is used for the faster and easier
development of full-stack web applications. MERN Stack is a technology that

1
is a user-friendly full-stack JavaScript framework for building applications and
dynamic websites.

Fig 1.1 MERN Methodology

MERN Stack consists of four main components or can say four main
technologies:

• M stands for MongoDB (Database), mainly used for preparing

document database and is a NoSQL (Non-Structured Query Language)
Database System
• E stands for Express, mainly used for developing Node.js web
framework
• R stands for React, mainly used for developing a client-side JavaScript
framework
• N stands for js, mainly used for developing the premier JavaScript web
server

Each of these four technologies plays an important role in providing an

end-to-end framework for the developers. Even these four technologies play an
important role in the development process of web applications.

Before MERN stack, it was earlier named as MEAN stack, MERN Stack
is one of the variations of MEAN, here MEAN is also comprises of four
components or say four different technologies, i.e., M is for MongoDB, ' E ' is
for Express, ' A ' is for Angular.js, and ' N ' is for Node, here if you will
2
observe, then you can identify that in MEAN, ' A ', i.e., Angular.js is replaced
by ' R ', i.e., React.js in MERN, the main reason behind is - MERN Stack is
mainly used for faster development of smaller applications as compared with
MEAN, MEAN stack is a mainly better option for large-scale applications.
Still, it takes more time for the development of smaller applications. They also
both have different structures comparatively.

We can see that MEAN relies on Angular.js for its front-end JavaScript
framework, whereas the MERN stack relies on React and its ecosystem.
MERN Stack is designed to make the development process easier and
smoother.

From the above figure, if we notice, then we can see that Node and
Express make up the middle application or tier. Node.js very powerful and
popular JavaScript server platform, and Express.js is a server-side web
framework. Unless of which variant you choose, ME(RVA)N is an ideal
approach to working with JSON and JavaScript all the way through.

1.2.1 WHY MERN?

Cost-effective: All the four technologies that are mentioned above,

MERN (MongoDB, Express.js, React.js, and Node.js) are used in MERN
Stack is built on JavaScript that makes it cost-effective and within less cost
investment user will able to get the better results or output.

SEO friendly: Here, SEO (Search Engine Optimization) friendly means

that Google, Yahoo and other search engines can search each page on the
website efficiently and easily, interpret and correlate the content effectively

3
with the searched text and easily index it in their database. As whenever
websites are created using MERN technologies, then it is always SEO friendly.

Better performance: Better performance refers to the faster response

between backend and front-end and database, which ultimately improves the
website speed and yields better performance, thus providing a smooth user
experience.

Improves Security: It mainly concerns the security of applications

generated using MERN; her web application security refers to various
processes, methods or technologies used for protecting web servers and various
web applications, such as APIs (Application user interface) from the attack by
internet-based threats. Generally, secured hosting providers can easily integrate
applications created using the MERN stack. For more or better security Mongo
DB and Node.js security tools are also used.

Provide the fastest delivery: Any Web applications and mobile

applications created by using MERN Stack are built much faster, which also
helps to provide faster delivery to our clients.

Provides faster Modifications: MERN stack technologies supports

quick modifications as per the client's request in the mobile and web
applications.

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

4
 Easy to switch between client and server: MERN is very simple and
fast because it is written in only one language. And also, it is very easy to
switch between client and server.

Fig 1.2. Architecture of MERN stack

5
 CHAPTER-2
LITERATURE SURVEY

2.1 TITLE : NBA web portal: A Comprehensive Survey on NBA

Accreditation and MERN Stack for the Purpose of Implementing
a Portal
AUTHORS: C. Vinothini, C Tarun, K A Bhavana, G Nikhil Krishna,
Advaith Praveen
YEAR : 2022
DESCRIPTION: In recent years, India has witnessed tremendous growth in
the number of institutions that provide higher education. India now has over
4000 engineering colleges in various states which include IITs, NITs, Central
Universities departments, State Universities departments, constituent colleges,
affiliated institutions, Government Aided Institutions, Institutes under Private
Universities, Institutes under State Universities, and Autonomous Institutions.
There may have been an outburst in the number of educational institutions but
over the years, the quality itself has not seen a very positive impact. The
Government of India, Ministry of Human Resource Development has
established NAAC under UGC and NBA under AICTE in 1994 to look into the
quality aspects of HEI and undertake accreditation. To maintain quality
standards, Engineering institutions are now being encouraged to apply for
NAAC accreditation on an institutional level as well as NBA accreditation for
individual programmes. This paper aims to study the different aspects of NBA
accreditation and help us understand its importance in addition to exploring the
possibility of this process even being digitally carried out with the help of a
customized web portal.

6
2.2 TITLE : e-Cops An Online Crime Reporting and Management
System for Riyadh City
AUTHORS: Kahkashan Tabassum, Hadii Shaiba, Saada Shamrani,
Sheikha Otaibi.
YEAR : 2018
DESCRIPTION: The huge success of internet and information technology
have a remarkable effect on both public and private sectors within a country.
The internet services and applications have drastically increased. That's why
people find it more convenient to use internet applications to give an online
complain regarding any suspicious activity rather than visiting a police station.
This method is reasonably secure since it is possible to hide the identity of the
person who reported the complain about the crime. Many cases are not
registered in police station since the person complained wants to hide the
identity due to the possible risk or danger. It is also feared that there are many
pending investigations due to lack of proper evidences from the reporting
people. An online application can bridge this communication gap between
police and the individuals to send reports or other required information. This
paper proposes an application that can be used by the individuals in Riyadh to
report and manage their complains effectively. Further the system can be used
by the people to register the complaints and is helpful to the police department
in identifying the criminals. The main purpose of the application is to improve
the effectiveness and efficiency of interaction procedures between the police
officials and common people. It would be an outstanding tool to monitor and
track the criminals around the country and also have a complete online record
of crime related information.

7
2.3 TITLE : Police Complaint Management System using Blockchain
. Technology
AUTHORS: Ishwarlal Hingorani, Rushabh Khara, Deepika Pomendkar,
Nataasha Raul
YEAR : 2020
DESCRIPTION: The criminal activities in India are increasing at a rapid rate.
Many of these activities go unreported. Even after having an online portal for
the police for storing FIRs and NCRs, most of the FIRs are handwritten as a
traditional practice. In most of the cases, the complainant has to be present in
the police station to file a cognizable offense. An effective system for e-
governance was started in 2009 named Crime and Criminal Tracking Network
and Systems (CCTNS) for the entire country. However, it is a centralized
system for a particular state. Thus, there is a need for a completely
decentralized system for assuring that there is no central point of failure in the
system and complaints are managed securely protected from unauthorized
access. Our aim is to propose a blockchain-based solution to manage
complaints against both cognizable and non-cognizable offenses. The FIR filed
by the police will be encrypted, stored in the IPFS and hash is added to the
blockchain network. If the police decide not to file the FIR under pressure or
deny receiving any complaint, then the complainant will have strong proof
against him/her as the complaint along with its timestamp was stored on the
blockchain network. Having all the records stored in an immutable database
would remove any chances of the FIR/NCR being tampered and going
unnoticed.

8
2.4 TITLE : Online Police Station, A State-of-Art Italian Semantic
Technology against Cybercrime
AUTHORS: Federico Neri, Paolo Geraci, Gianluca Sanna, Liviana Lotti
YEAR : 2019
DESCRIPTION: This paper describes a content enabling system that provides
deep semantic search and information access to large quantities of distributed
multimedia data for both experts and general public. It provides with a
language independent search and dynamic classification features for a broad
range of data collected from several sources in a number of culturally diverse
languages. This system is part of the Online Police Station, launched by the
Italian Minister of the Interior in 2006. The Online Police Station uses a virtual
reality interface to provide general information and online assistance. Citizens
can download forms, make complaints, receive advice and/or report events of
an illegal nature. Police specialists can monitor criminal trends to ensure that
responses are appropriately focused, and that scarce resources are more
effectively employed against criminality. Online Police Station was voted as
the Most inspiring good practice for creative solutions to common challenges,
at the European eGovernment Awards 2017.

9
2.5 TITLE : Complaint handling theoretical framework
AUTHORS: Razulaimi Razali, Jafreezal Jaafar
YEAR : 2012
DESCRIPTION: Complaint handling process is to differentiate acceptable
and unacceptable complaint. With the new era of technology, a lot of web-
based applications are developed. Complaint management system also should
be implemented on-line. Developing a web-based complaint management
system need strong foundation design, especially on the complaint handling
process. This paper proposed theoretical framework for complaint handling
that integrates attributes from prior research. The result of the design is useful
to develop an effective web-based complaint management system. The
framework also can be used for future research as a guideline to improve the
complaint handling process. Future task of this study is to proceed with the
validity of the theoretical framework and the chosen attributes.

10
2.6 TITLE : Conceptual Idea for Implementing Automated Complaint
Monitoring System for Rural Development
AUTHORS: Mohammad Manzoor Hussain, G. Geetha, R. Pitchai
YEAR : 2022
DESCRIPTION: No street lights, poor roads, and other infrastructure-related
problems affect us on a daily basis. There is a requirement of an application,
which allows people to communicate their complaints about the hazel process
by text message and GPS location, will help us address the problems we have
in our society! These complaints are forwarded to officers in the nearest
municipality. Because of this, it will be easier for the public and local officials
to immediately resolve the situation. There is no direct link between the user
and the government in India when it comes to citizens' complaints. The
municipality office is the sole place where someone may file a complaint about
a problem with public goods. Even so, it's possible that getting to the bottom of
things will take some time. User-to-officer communication must be established
that is safe for the complainant and secure for the officer. The officer will be
able to take into account any further comments made by the user regarding the
complaint.

11
 CHAPTER-3

SYSTEM ANALYSIS

3.1 EXISTING SYSTEM

A few applications that are similar to this paper are provided in the next
section.

Dr Kahkashan Tabassum et.al., [1] provides an easy, fast and accurate online
system that helps the people to register their complaints, at any time. Thus E-
cops KSA is proactive and responsive to fight with crime and criminals. In
previous days this has been a paper-based process, and paper records could be
manipulated or lost. The proposed system supports the following features: 1-
Easy to use and exterminates the paper use.2- Offers more security than the
previous paper based offline system.3-Allows the people to send online
complaints.4-Allows the people to monitor their complaints. 5- Limited to
residents of the city of the KSA.Section Headings

❖ Change.org - Change.org is a popular petition platform that allows users

to create and sign petitions on a wide range of issues. The platform also
includes features for tracking and monitoring the progress of petitions,
including updates on signatures and engagement with decision-makers.

❖ Avaaz - Avaaz is another popular petition platform that allows users to

create and sign petitions on a variety of issues. The platform also includes
features for tracking the progress of petitions and communicating with
decision-makers.

❖ Care2 Petitions - Care2 Petitions is a petition platform that focuses on

social and environmental issues. The platform allows users to create and sign

12
petitions, and includes features for tracking and monitoring the progress of
petitions.

❖ iPetitions - iPetitions is a petition platform that allows users to create

and sign petitions on a wide range of issues. The platform includes features for
tracking the progress of petitions, including updates on signatures and
engagement with decision-makers.

❖ OpenPetition - OpenPetition is a European-based petition platform that

allows users to create and sign petitions on a variety of issues. The platform
includes features for tracking the progress of petitions, communicating with
decision-makers, and collaborating with other users.

3.1.1 DISADVANTAGE

• Higher Officials can't able to track the complaints.

• Limited to residents of the city of the KSA Section Headings only.

3.2 PROPOSED METHOD

The proposed project is designed to ease the job of tracking petitions by

the higher officials. The following modules are developed for this project.

JWT – JWT (JSON Web Token) signing algorithm HS256 is used to

secure the web session, it protects the session from intruders. It only allows the
user with the valid token. Those tokens are generated after the user
authentication (It generates only if the user authentication is successful). This
project uses the AES algorithm to encrypt the files that contains the details
about the petition and the petitioner and store those encrypted files in the
Database.
13
 The Dashboard page contains the details of the petitions registered in
this system in a table form as well as in graphical representation (Line graph).
The add petition page is used to register a new petition in that, officer have to
enter petitioner details and about the petition as well. The petition maybe in the
form of pdf file or the user can type the petition while registering. While
registering a new petition the officer has to assign that to a lower rank officer
in order to complete the petition query. The higher official can track the
registered petitions in the petition page where they can read the details of the
petition as well as status of the petition. A separated Admin user is created, for
in case an officer or station is newly joined in that geographical border or an
officer is retired, suspended or dismissed or an acting officer is appointed
admin can change the details and user account of that officer through the
Admin user.

3.2.1 ADVANTAGE
• It exterminates the paper use.

• Offers more security than the previous paper based offline system.

• Allows the Higher Officials to send online complaints.

• Allows the Higher Officials to monitor and track the user complaints.

14
3.3 SYSTEM ARCHITECTURE

Fig 3.1 Architecture of Proposed System

3.4 ALGORITHMS

3.4.1 AES AND HS256

AES (Advanced Encryption Standard) and HS256 (HMAC-SHA256)
are both cryptographic algorithms that are commonly used for data encryption
and authentication in various contexts, including web applications and network
security.

3.4.2 ADVANCED ENCRYPTION STANDARD

The more popular and widely adopted symmetric encryption algorithm
likely to be encountered nowadays is the Advanced Encryption Standard
(AES). It is found at least six time faster than triple DES. A replacement for
DES was needed as its key size was too small. With increasing computing
15
power, it was considered vulnerable against exhaustive key search attack.
Triple DES was designed to overcome this drawback but it was found slow.
The features of AES are as follows

❖ Symmetric key symmetric block cipher

❖ 128-bit data, 128/192/256-bit keys
❖ Stronger and faster than Triple-DES
❖ Provide full specification and design details
❖ Software implementable in C and Java

Operation of AES
AES is an iterative rather than Feistel cipher. It is based on
‘substitution–permutation network’. It comprises of a series of linked
operations, some of which involve replacing inputs by specific outputs
(substitutions) and others involve shuffling bits around (permutations).

Interestingly, AES performs all its computations on bytes rather than

bits. Hence, AES treats the 128 bits of a plaintext block as 16 bytes. These 16
bytes are arranged in four columns and four rows for processing as a matrix.

Unlike DES, the number of rounds in AES is variable and depends on

the length of the key. AES uses 10 rounds for 128-bit keys, 12 rounds for 192-
bit keys and 14 rounds for 256-bit keys. Each of these rounds uses a different
128-bit round key, which is calculated from the original AES key.

The schematic of AES structure is given in the following illustration –

16
 Fig 3.2 Operation of AES

Encryption Process
Each round comprise of four sub-processes. The first round process is
depicted below

Fig 3.3 Encryption Process

Byte Substitution (SubBytes)

17
 The 16 input bytes are substituted by looking up a fixed table (S-box)
given in design. The result is in a matrix of four rows and four columns.

Shiftrows
Each of the four rows of the matrix is shifted to the left. Any entries that
‘fall off’ are re-inserted on the right side of row. Shift is carried out as follows
–

❖ First row is not shifted.

❖ Second row is shifted one (byte) position to the left.
❖ Third row is shifted two positions to the left.
❖ Fourth row is shifted three positions to the left.

The result is a new matrix consisting of the same 16 bytes but shifted
with respect to each other.

MixColumns
Each column of four bytes is now transformed using a special
mathematical function. This function takes as input the four bytes of one
column and outputs four completely new bytes, which replace the original
column. The result is another new matrix consisting of 16 new bytes. It should
be noted that this step is not performed in the last round.

Addroundkey
The 16 bytes of the matrix are now considered as 128 bits and are
XORed to the 128 bits of the round key. If this is the last round then the output
is the ciphertext. Otherwise, the resulting 128 bits are interpreted as 16 bytes
and we begin another similar round.
Decryption Process
The process of decryption of an AES ciphertext is similar to the
encryption process in the reverse order. Each round consists of the four
processes conducted in the reverse order

18
 ❖ Add round key
❖ Mix columns
❖ Shift rows
❖ Byte substitution
Since sub-processes in each round are in reverse manner, unlike for a Feistel
Cipher, the encryption and decryption algorithms needs to be separately
implemented, although they are very closely related.

3.4.3 HS256 (JWT)

HS256 (HMAC-SHA256) is a cryptographic algorithm that is

commonly used in conjunction with JSON Web Tokens (JWTs) to provide
secure authentication and authorization for web applications.

The primary objective of JWTs is to transmit claims between two

parties; however, the endeavour to standardise this in the form of a
straightforward, optionally validated, and/or encrypted, container format is
likely the most significant component of this. This issue has already seen ad
hoc solutions put into place.

in the past, both secretly and openly. There are also older standards8 for
establishing claims about particular parties. JWT brings a straightforward,
practical, and common container format to the table.

It is not difficult to envision their use, even though the definition

provided thus far is somewhat abstract: login systems (although other uses are
possible). Authentication, authorization, and federated identity are a few of
these uses.
• Authentication
• Authorization
• Federated identity
• Client-side sessions (“stateless” sessions)
• Client-side secrets

19
Fig 3.4 Architecture of HS256

20
 CHAPTER-4

IMPLEMENTATION

4.1 MODULE LIST

❖ Password hashing using bcrypt

❖ Protected routing for admin panel
❖ Protected routing via component
❖ Redux structure
❖ AES

4.2 MODULE DESCRIPTION

4.2.1 PASSWORD HASHING USING BCRYPT

Bcrypt is a popular and secure password hashing algorithm that is

widely used in web application development. It is designed to be slow and
computationally expensive, making it difficult for attackers to perform brute-
force attacks or other forms of password cracking.

To use bcrypt for password hashing in web application, the necessary

steps are:

• Generate a salt: A salt is a random string of characters that is used to add

complexity to the password hash. Bcrypt automatically generates a salt,
but you can also provide your own if desired.
• Hash the password: To hash the password using bcrypt, you would use
the bcrypt.hash() function. This function takes the plain-text password
and the salt as input, and returns the hashed password as output.
• Store the salt and hashed password in your database: You would
typically store the salt and hashed password in your user database, along
with other user information.
21
4.2.2 PROTECTED ROUTING FOR ADMIN PANEL

Protected routing is a common technique used in web applications to

restrict access to certain pages or resources to authorized users only. This is
typically achieved by checking the user's authentication status and permissions
before allowing access to the protected resource.

In the case of an admin panel, you would want to restrict access to

certain pages or features to users who have administrative privileges. Here is
an example of how you might implement protected routing for an admin panel
in a MERN stack application:

• Set up authentication
• Define protected routes
• Check authentication status
• Check user permissions

4.2.3 PROTECTED ROUTING VIA COMPONENT

Protected routing via component is a technique in React that allows you

to restrict access to certain components based on user authentication. This
means that only authenticated users can access the protected components, and
unauthorized users are redirected to a login page or denied access.

Here's how you can implement protected routing via component in React:

• Create a higher-order component (HOC) that wraps the component you

want to protect. This HOC should check whether the user is
authenticated, and if not, it should redirect the user to a login page.

• In the HOC, use the useSelector hook from the react-redux library to get
the current user's authentication status from the Redux store. If the user

22
 is authenticated, render the wrapped component. If not, redirect to the
login page.
• To implement the redirect functionality, you can use the useHistory
hook from the react-router-dom library to push the user to the login page
route.

4.2.4 REDUX STRUCTURE

The Redux structure typically consists of the following components:

• Actions: These are plain JavaScript objects that represent an event in the
application. Actions are dispatched by the components to trigger state
changes.
• Reducers: These are pure functions that receive an action and the current
state of the application and return a new state. Reducers handle the state
changes triggered by actions.
• Store: This is a centralized object that holds the application state. It is
created by combining multiple reducers and is responsible for
dispatching actions to the reducers.
• Middleware: This is optional functionality that sits between dispatching
an action and processing it in a reducer. Middleware can be used to
perform tasks such as logging, asynchronous operations, and more.

4.2.5 AES

AES is a symmetric encryption algorithm that uses a block cipher to

encrypt data in fixed-length blocks of 128 bits. It is a widely used standard for
encrypting sensitive data, such as passwords, credit card numbers, and other
confidential information. AES is designed to be secure, efficient, and resistant
to attacks, making it a popular choice for securing data at rest and in transit.

23
 CHAPTER 5

SYSTEM SPECIFICATION

5.1 HARDARE SYSTEM CONFIGURATION:

• Processor : Dual core processor 2.6.0 GHZ

• RAM : 1GB
• Hard disk : 160 GB
• Compact Disk : 650 Mb
• Keyboard : Standard keyboard
• Monitor : 15 inch color monitor

5.2 SOFTWARE SYSTEM CONFIGURATION:

• Operating system : Windows OS, LINUX OS

• Front End : JAVASCRIPT (ES6) , REACT
• Back End : EXPRESS JS ( NODE JS ) - SERVER
• Database : MongoDB
• Application : Web Application
• Tool : Visual Studio Code, Postman

5.3 SOFTWARE ENVIRONMENT:

5.3.1 NODE JS

Node.js is a server-side platform built on Google Chrome's JavaScript

Engine (V8 Engine). Node.js was developed by Ryan Dahl in 2009 and its
latest version is v0.10.36. The definition of Node.js as supplied by its official
documentation is as follows.

24
 Node.js is a platform built on Chrome's JavaScript runtime for easily
building fast and scalable network applications. Node.js uses an event-driven,
non-blocking I/O model that makes it lightweight and efficient, perfect for
data-intensive real-time applications that run across distributed devices.

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

developing server-side and networking applications. Node.js applications are
written in JavaScript, and can be run within the Node.js runtime on OS X,
Microsoft Windows, and Linux.

Node.js also provides a rich library of various JavaScript modules which

simplifies the development of web applications using Node.js to a great extent.

Node.js = Runtime Environment + JavaScript Library

Features of Node.js

Following are some of the important features that make Node.js the first
choice of software architects.

❖ Asynchronous and Event Driven − All APIs of Node.js library are

asynchronous, that is, non-blocking. It essentially means a Node.js based
server never waits for an API to return data. The server moves to the
next API after calling it and a notification mechanism of Events of
Node.js helps the server to get a response from the previous API call.

❖ Very Fast − Being built on Google Chrome's V8 JavaScript Engine,

Node.js library is very fast in code execution.

❖ Single Threaded but Highly Scalable − Node.js uses a single threaded

model with event looping. Event mechanism helps the server to respond
in a non-blocking way and makes the server highly scalable as opposed

25
 to traditional servers which create limited threads to handle requests.
Node.js uses a single threaded program and the same program can
provide service to a much larger number of requests than traditional
servers like Apache HTTP Server.

❖ No Buffering − Node.js applications never buffer any data. These

applications simply output the data in chunks.

❖ License − Node.js is released under the MIT license.

Concepts

The following diagram depicts some important parts of Node.js which we will
discuss in detail in the subsequent chapters.

Fig 5.1 Concept of Node JS

26
Where to Use Node.js?

Following are the areas where Node.js is proving itself as a perfect

technology partner.

• I/O bound Applications

• Data Streaming Applications
• Data Intensive Real-time Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

Where Not to Use Node.js?

It is not advisable to use Node.js for CPU intensive applications.

Environment Setup
environment for Node.js, you need the following two softwares available
on your computer, (a) Text Editor and (b) The Node.js binary installables.

Text Editor
This will be used to type your program. Examples of few editors include
Windows Notepad, OS Edit command, Brief, Epsilon, EMACS, and vim or vi.
Name and version of text editor can vary on different operating systems.
For example, Notepad will be used on Windows, and vim or vi can be used on
windows as well as Linux or UNIX.
The files you create with your editor are called source files and contain
program source code. The source files for Node.js programs are typically
named with the extension ".js".
Before starting your programming, make sure you have one text editor
in place and you have enough experience to write a computer program, save it
in a file, and finally execute it.

27
The Node.js Runtime
The source code written in source file is simply javascript. The Node.js
interpreter will be used to interpret and execute your javascript code.
Node.js distribution comes as a binary installable for SunOS , Linux,
Mac OS X, and Windows operating systems with the 32-bit (386) and 64-bit
(amd64) x86 processor architectures.

REPL Terminal
REPL stands for Read Eval Print Loop and it represents a computer
environment like a Windows console or Unix/Linux shell where a command is
entered and the system responds with an output in an interactive mode. Node.js
or Node comes bundled with a REPL environment. It performs the following
tasks −

Read − Reads user's input, parses the input into JavaScript data-structure, and
stores in memory.
Eval − Takes and evaluates the data structure.
Print − Prints the result.
Loop − Loops the above command until the user presses ctrl-c twice.

The REPL feature of Node is very useful in experimenting with Node.js

codes and to debug JavaScript codes.

REPL Commands

• ctrl + c − terminate the current command.

• ctrl + c twice − terminate the Node REPL.
• ctrl + d − terminate the Node REPL.
• Up/Down Keys − see command history and modify previous commands.
• tab Keys − list of current commands.
• .help − list of all commands.
• .break − exit from multiline expression.
28
 • .clear − exit from multiline expression.
• .save filename − save the current Node REPL session to a file.
• .load filename − load file content in current Node REPL session.

NPM
Node Package Manager (NPM) provides two main functionalities

• Online repositories for node.js packages/modules which are searchable

on search.nodejs.org
• Command line utility to install Node.js packages, do version
management and dependency management of Node.js packages.

NPM comes bundled with Node.js installables after v0.6.3 version. To

verify the same, open console and type the following command and see the
result

If you are running an old version of NPM then it is quite easy to update
it to the latest version. Just use the following command from root

Installing Modules using NPM

There is a simple syntax to install any Node.js module

For example, following is the command to install a famous Node.js web

framework module called express

29
Now you can use this module in your js file as following

Global vs Local Installation

By default, NPM installs any dependency in the local mode. Here local
mode refers to the package installation in node_modules directory lying in the
folder where Node application is present. Locally deployed packages are
accessible via require() method. For example, when we installed express
module, it created node_modules directory in the current directory where it
installed the express module.

Alternatively, you can use npm ls command to list down all the locally
installed modules.

Globally installed packages/dependencies are stored in system directory.

Such dependencies can be used in CLI (Command Line Interface) function of
any node.js but cannot be imported using require() in Node application
directly. Now let's try installing the express module using global installation.

This will produce a similar result but the module will be installed
globally. Here, the first line shows the module version and the location where
it is getting installed.

30
 You can use the following command to check all the modules installed
globally

Using package.json

Package.json is present in the root directory of any Node application/module

and is used to define the properties of a package. Let's open package.json of
express package present in node_modules/express/

31
32
33
34
35
36
Attributes of Package.json

• name − name of the package

• version − version of the package
• description − description of the package
• homepage − homepage of the package
• author − author of the package
• contributors − name of the contributors to the package
• dependencies − list of dependencies. NPM automatically installs all the
dependencies mentioned here in the node_module folder of the package.
• repository − repository type and URL of the package
• main − entry point of the package
• keywords – keywords

Uninstalling a Module

Use the following command to uninstall a Node.js module.

Once NPM uninstalls the package, you can verify it by looking at the
content of /node_modules/ directory or type the following command

Updating a Module

Update package.json and change the version of the dependency to be

updated and run the following command.

37
Search a Module

Search a package name using NPM.

Create a Module

Creating a module requires package.json to be generated. Let's generate

package.json using NPM, which will generate the basic skeleton of the
package.json.

You will need to provide all the required information about your
module. You can take help from the above-mentioned package.json file to
understand the meanings of various information demanded. Once package.json
is generated, use the following command to register yourself with NPM
repository site using a valid email address.

38
 It is time now to publish your module

If everything is fine with your module, then it will be published in the

repository and will be accessible to install using NPM like any other Node.js
module.

39
 CHAPTER 6
SYSTEM DESIGN

6.1 UML DIAGRAMS

UML stands for Unified Modeling Language. UML is a standardized

general-purpose modeling language in the field of object-oriented software
engineering. The standard is managed, and was created by, the Object
Management Group.
The goal is for UML to become a common language for creating models
of object oriented computer software. In its current form UML is comprised of
two major components: a Meta-model and a notation. In the future, some form
of method or process may also be added to; or associated with, UML.
The Unified Modeling Language is a standard language for specifying,
Visualization, Constructing and documenting the artifacts of software system,
as well as for business modeling and other non-software systems.
The UML represents a collection of best engineering practices that have
proven successful in the modeling of large and complex systems.
The UML is a very important part of developing objects oriented
software and the software development process. The UML uses mostly
graphical notations to express the design of software projects.

GOALS:
The Primary goals in the design of the UML are as follows:
1. Provide users a ready-to-use, expressive visual modeling Language so
that they can develop and exchange meaningful models.
2. Provide extendibility and specialization mechanisms to extend the core
concepts.
3. Be independent of particular programming languages and development
process.

40
 4. Provide a formal basis for understanding the modeling language.
5. Encourage the growth of OO tools market.
6. Support higher level development concepts such as collaborations,
frameworks, patterns and components.
7. Integrate best practices.

6.1.1 USE CASE DIAGRAM:

A use case diagram in the Unified Modeling Language (UML) is a type
of behavioral diagram defined by and created from a Use-case analysis. Its
purpose is to present a graphical overview of the functionality provided by a
system in terms of actors, their goals (represented as use cases), and any
dependencies between those use cases. The main purpose of a use case
diagram is to show what system functions are performed for which actor. Roles
of the actors in the system can be depicted.

41
 Fig 6.1 Use Case Diagram

6.1.2 CLASS DIAGRAM:

A class diagram is a UML (Unified Modeling Language) diagram that
represents the structure of a system by showing the classes of objects in thesyst
em, their attributes and methods, and the relationships between them. Class di
agrams are used to model the static structure of a system, which means they sh
ow the objects and their relationships at a particular point in time, rather th
an the behavior of the system over time.

42
 Fig 6.2 Class Diagram

6.1.3 SEQUENCE DIAGRAM:

A sequence diagram is another UML (Unified Modeling Language)

diagram that shows the interactions between objects in a system over time. It is
used to model the dynamic behavior of a system, which means it shows the
sequence of messages exchanged between objects as they collaborate to
perform a specific task or achieve a particular goal. In a sequence diagram,
objects are represented by vertical lines or lifelines, and messages are
represented by horizontal arrows. The sequence of messages is shown from top
to bottom, with time flowing from the top of the diagram to the bottom.
Sequence diagrams are commonly used during the analysis and design phases
of software development to help developers and stakeholders understand the
flow of control and communication between objects in a system. They can also
be used to identify potential problems or bottlenecks in a system and to test the
logic of a system's interactions before it is implemented.

43
 Fig 6.3 Sequence Diagram

6.1.4 ACTIVITY DIAGRAM:

An activity diagram is a UML (Unified Modeling Language) diagram

that shows the flow of activities and actions in a system. It is used to model the
dynamic aspects of a system, including the behavior of users, processes, and
objects, and is commonly used during the analysis and design phases of
software development. In an activity diagram, actions or activities are
represented by rounded rectangles, and the flow of control between activities is
indicated by arrows. The start and end points of the diagram are represented by
solid circles. The diagram may also include decisions, which are represented
by diamonds, and forks and joins, which represent parallel or concurrent
activities.
44
 Fig 6.4 Activity Diagram

6.1.5 DEPLOYMENT

Component diagrams are used to describe the components and

deployment diagrams shows how they are deployed in hardware. UML is
mainly designed to focus on the software artifacts of a system. However, these
two diagrams are special diagrams used to focus on software and hardware
components.

45
 Fig 6.5 Deployment Diagram

6.1.6 DATA FLOW DIAGRAM:

1.The DFD is also called as bubble chart. It is a simple graphical

formalism that can be used to represent a system in terms of input data to the
system, various processing carried out on this data, and the output data is
generated by this system.

2.The data flow diagram (DFD) is one of the most important modeling
tools. It is used to model the system components. These components are the
system process, the data used by the process, an external entity that interacts
with the system and the information flows in the system.

3.DFD shows how the information moves through the system and how it
is modified by a series of transformations. It is a graphical technique that
depicts information flow and the transformations that are applied as data
moves from input to output.

Fig 6.6 Data Flow Diagram

46
 CHAPTER 7

SYSTEM TESTING

The purpose of testing is to discover errors. Testing is the process of

trying to discover every conceivable fault or weakness in a work product. It
provides a way to check the functionality of components, sub-assemblies,
assemblies and/or a finished product It is the process of exercising software
with the intent of ensuring that the Software system meets its requirements and
user expectations and does not fail in an unacceptable manner. There are
various types of test. Each test type addresses a specific testing requirement.

7.1 TYPES OF TESTS

Unit testing

Unit testing involves the design of test cases that validate that the
internal program logic is functioning properly, and that program inputs
produce valid outputs. All decision branches and internal code flow should be
validated. It is the testing of individual software units of the application. it is
done after the completion of an individual unit before integration.This is a
structural testing, that relies on knowledge of its construction and is invasive.
Unit tests perform basic tests at component level and test a specific business
process, application, and/or system configuration. Unit tests ensure that each
unique path of a business process performs accurately to the documented
specifications and contains clearly defined inputs and expected results.

Integration testing

Integration tests are designed to test integrated software components to

determine if they actually run as one program. Testing is event driven and is
more concerned with the basic outcome of screens or fields. Integration tests

47
demonstrate that although the components were individually satisfaction, as
shown by successfully unit testing, the combination of components is correct
and consistent. Integration testing is specifically aimed at exposing the
problems that arise from the combination of components.

Functional test

Functional tests provide systematic demonstrations that functions tested

are available as specified by the business and technical requirements, system
documentation, and user manuals.

Functional testing is centered on the following items:

Valid Input : identified classes of valid input must be accepted.

Invalid Input : identified classes of invalid input must be rejected.

Functions : identified functions must be exercised.

Output : identified classes of application outputs must be exercised.

Systems/Procedures: interfacing systems or procedures must be invoked.

Organization and preparation of functional tests is focused on requirements,
key functions, or special test cases. In addition, systematic coverage pertaining
to identify Business process flows; data fields, predefined processes, and
successive processes must be considered for testing. Before functional testing
is complete, additional tests are identified and the effective value of current
tests is determined.

System Test

System testing ensures that the entire integrated software system meets
requirements. It tests a configuration to ensure known and predictable results.
An example of system testing is the configuration oriented system integration
test. System testing is based on process descriptions and flows, emphasizing
pre-driven process links and integration points.

48
White Box Testing

White Box Testing is a testing in which in which the software tester has
knowledge of the inner workings, structure and language of the software, or at
least its purpose. It is purpose. It is used to test areas that cannot be reached
from a black box level.

Black Box Testing

Black Box Testing is testing the software without any knowledge of the
inner workings, structure or language of the module being tested. Black box
tests, as most other kinds of tests, must be written from a definitive source
document, such as specification or requirements document, such as
specification or requirements document. It is a testing in which the software
under test is treated, as a black box .you cannot “see” into it. The test provides
inputs and responds to outputs without considering how the software works.

7.2 UNIT TESTING:

Unit testing is usually conducted as part of a combined code and unit test
phase of the software lifecycle, although it is not uncommon for coding and
unit testing to be conducted as two distinct phases. Test strategy and approach
field testing will be performed manually and functional tests will written in
detail.

Test objectives

• All field entries must work properly.

• Pages must be activated from the identified link.
• The entry screen, messages and responses must not be delayed.

Features to be tested

• Verify that the entries are of the correct format

49
 • No duplicate entries should be allowed
• All links should take the user to the correct page.

Test Results: All the test cases mentioned above passed successfully. No
defects encountered.

7.3 INTEGRATION TESTING:

Software integration testing is the incremental integration testing of two

or more integrated software components on a single platform to produce
failures caused by interface defects. The task of the integration test is to check
that components or software applications, e.g. components in a software
system or – one step up –software applications at the company level – interact
without error.

Test Results: All the test cases mentioned above passed successfully. No
defects encountered.

7.4 ACEPTANCE TESTING

User Acceptance Testing is a critical phase of any project and requires

significant participation by the end user. It also ensures that the system meets
the functional requirements.

Test Results: All the test cases mentioned above passed successfully. No

defects encountered.

50
 CHAPTER 8
SNAPSHOTS

Fig 8.1 Login Page

Fig 8.2 Dashboard Page

51
 Fig 8.3 Petitions Page

Fig 8.4 Add Petition Page

52
Fig 8.5 Add Officer Page

Fig 8.6 About Officer Pgae

53
 CHAPTER 9
APPENDIX

App.js
import "./App.css";
import 'react-toastify/dist/ReactToastify.css';
import { isMobile } from 'react-device-detect';
import React , { useState ,useEffect } from "react";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
import { Stack ,Paper, Typography, CircularProgress} from "@mui/material";
import { ThemeProvider, createTheme } from '@mui/material/styles';
import LinearProgressLoader from "./frontend/helpers/linearProgress";
import SettingsIcon from '@mui/icons-material/Settings';
import { Box } from "@mui/system";
import Navbar from "./frontend/navbar/navbar";
import SidebarAdmin from "./frontend/sidebar/sidebar";
import Login from "./frontend/login/login";
import Dashboard from "./frontend/dashboard/dashboard";
import Petition from "./frontend/sidebarComponents/petitions/petition";
import AddOfficer from
"./frontend/sidebarComponents/addOfficer/addOfficer";
import AddPetition from
"./frontend/sidebarComponents/addPetitions/addPetition";
import AboutOfficer from
"./frontend/sidebarComponents/aboutOfficer/aboutOfficer";
import OfficerList from
"./frontend/sidebarComponents/ofiicerList/officerList";
import ErrorPage from "./frontend/error/error";
54
import { ProtectedRoutingComponent } from
"./frontend/ProtectedRoutingComponent";
import Notification from "./frontend/notification/notification";
import { ToastContainer } from 'react-toastify';
import {toggleSidebar} from ".././src/frontend/navbar/navbar"
import { useSelector } from "react-redux";
import ReadMore from '../src/frontend/readMore/readMore';
import ResetPassword from "./frontend/resetPassword/resetPassword";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { motion, useAnimation } from "framer-motion";
import CookiePopup from "./frontend/helpers/cookiepopup";
import SidebarLowerOfficials from "./frontend/sidebar/sidebar_LO";
import SidebarSp from "./frontend/sidebar/sidebarSp";
//
=======================================================|
App
|========================================================
============
const theme = createTheme({
palette: {
primary: {
main: "#2196f3",
},
secondary: {
main: "#f44336",
},
},
});
sessionStorage.setItem('accessType','')
55
const PreLoader = () => {
const iconControls = useAnimation();
useEffect(() => {
const animateIcon = async () => {
await iconControls.start({ rotate: 360, transition: { loop: Infinity, ease:
"linear", duration: 5 } });
};
animateIcon();
}, [iconControls]);
const containerVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 0.5 } },
exit: { opacity: 0, transition: { duration: 0.2 } },
};
const AnimatedTypography = ({ text }) => {
return (
<motion.div
initial={{ y: 70, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.9 }}>
<Typography variant="h6" sx={{color:'grey'}}>{text}</Typography>
</motion.div>
);
};
return (
<motion.div
style={{ display: "flex", flexDirection: "column", alignItems: "center",
justifyContent: "center", height: "100vh" }}
variants={containerVariants}
56
 initial="hidden"
animate="visible"
exit="exit">
<motion.div animate={iconControls}>
<SettingsIcon style={{ fontSize: "3rem", color: 'black' }} />
</motion.div>
<Typography variant="h5" component="h1" style={{ color: 'black' }}>
Petition Tracking System
</Typography>
<AnimatedTypography text="Developed by UCE-Thirukkuvalai students" />
</motion.div>
);
};
function App() {
const navigate = useNavigate()
const petitionIsLoading = useSelector((state) => state.addPetition.isLoading);
const loginSelector = useSelector(state => state.loginData)
const [isOnline, setIsOnline] = useState(navigator.onLine);
const [preloader, setPreloader] = useState(true);
useEffect(() => {
setTimeout(() => {
setPreloader(false);
}, 4000);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
57
 };
}, [navigator.onLine]);
const handleOnline = () => {
setIsOnline(true);
};
const handleOffline = () => {
setIsOnline(false);
};
const theme = useSelector( (state) => state.darkMode )
const loginDataSelector = useSelector( (state)=> state.loginData)
const { userAuth , loading}= loginDataSelector
const {isSignedIn} = userAuth

// console.log(isSignedIn)
const darkTheme = createTheme({
palette: {
mode: 'dark',
},
});
const [isSignedInState , setIsSignedInState] = useState(true);
// console.log(isSignedInState)
// React.useEffect(()=>{
// if(isSignedIn === true) setIsSignedInState(true)
// else setIsSignedInState(false)
// },[isSignedIn,isSignedInState])
const lightTheme = createTheme({
palette: {
mode: 'light',
58
 },
});
const example_JSON =[
{
accessCode : 2030,
accessType : loginSelector.userAuth.accessType,
accessToken : "3hg45shbwgyhxz981qvsbs" }]
if(isMobile){
return (
<Typography>Please use desktop for access the site </Typography>
)
}
return (
<>
{/* device Offline detection */}
<div>
{isOnline ? null : <p>You are offline</p>}
</div>
<CookiePopup/>
{
preloader ? <PreLoader/> : (
<div className="App">
<ToastContainer/>
<ThemeProvider theme={ theme.mode === "light" ? darkTheme :
lightTheme }>
<Paper sx={{height:'auto'}}>
{ sessionStorage.getItem('accessType')!="" ? <Navbar /> : null }
{ loading && petitionIsLoading && <LinearProgressLoader /> }

59
 <Box>
<Stack direction="row" justifyContent="space-between">
{ sessionStorage.getItem('accessType') === 'admin' ? <SidebarAdmin
sx={{ position: "fixed" }} /> : null }
{ sessionStorage.getItem('accessType') === 'sp' ? <SidebarSp sx={{
position: "fixed" }} /> : null }
{ sessionStorage.getItem('accessType') === 'dsp' ?
<SidebarLowerOfficials sx={{ position: "fixed" }} /> : null }
{ sessionStorage.getItem('accessType') === 'adsp' ?
<SidebarLowerOfficials sx={{ position: "fixed" }} /> : null }
{ sessionStorage.getItem('accessType') === 'inspr' ?
<SidebarLowerOfficials sx={{ position: "fixed" }} /> : null }
{ sessionStorage.getItem('accessType') === 'si' ? <SidebarLowerOfficials
sx={{ position: "fixed" }} /> : null }
{/*
{ sessionStorage.getItem('accessType') === ('adsp' || 'si' || 'inspr' ||
'dsp') &&
<SidebarLowerOfficials sx={{position:"fixed"}} />
} */}
<Routes>
{ sessionStorage.getItem('accessType') === '' && <Route path="/"
element={ <Login />} /> }
<Route path='/forgotPassword' element={<ResetPassword/>}/>
<Route path="/" element={ <Login />} />
{/* {
React.useEffect(()=>{isSignedInState === false ? <Route path="/"
element={<Login /> } /> : null ;
},[isSignedInState])
} */}
{
sessionStorage.getItem('accessType') == '' && (
60
<Route path='/'
element={<ProtectedRoutingComponentisSignedInState={isSignedIn} />}>
{/* for AboutOfficer */}
<Route path="/aboutOfficer" element={<Login />}/>
{/* for AddOfficer */}
<Route path="/addOfficer" element={<Login />}/>
{/* for Notification */}
<Route path="/notification" element={<Login />}/>
{/* for officerLists */}
<Route path="/officerList" element={<Login />}/>
</Route>
)
}
{
sessionStorage.getItem('accessType') === 'admin' && (
<Route path='/' element={<ProtectedRoutingComponent
isSignedInState={isSignedIn} />}>
{/* for AboutOfficer */}
<Route path="admin/aboutOfficer" element={<AboutOfficer />}/>
{/* for AddOfficer */}
<Route path="admin/addOfficer" element={<AddOfficer />}/>
{/* for Notification */}
<Route path="admin/notification" element={<Notification />}/>
{/* for officerLists */}
<Route path="admin/officerList" element={<OfficerList />}/>
</Route>
)
}
{
61
 sessionStorage.getItem('accessType') === 'sp' && (
<Route path="/" element={<ProtectedRoutingComponent
isSignedInState={isSignedInState} />}>
{/* for dashboard */}
<Route path="sp/dashboard" element={<Dashboard />}/>
{/* for petitions */}
<Route path="/sp/petitions" element={<Petition />}/>
{/* for AddPetition */}
<Route path="sp/addPetition" element={<AddPetition />}/>
{/* for AboutOfficer */}
<Route path="sp/aboutOfficer" element={<AboutOfficer />}/>
<Route path="admin/petitions" element={<Petition />}>
<Route path='readmore' element={<ReadMore
data={"petitionerData"}/>}/>
</Route>
{/* for Notification */}
<Route path="sp/notification" element={<Notification />}/>
</Route>)
}
{
sessionStorage.getItem('accessType') === 'dsp' && (
<Route path="/" element={<ProtectedRoutingComponent
isSignedInState={isSignedInState} />}>
{/* for petitions */}
<Route path="dsp/petitions" element={<Petition />}/>
{/* for AboutOfficer */}
<Route path="dsp/aboutOfficer" element={<AboutOfficer />}/>
{/* for Notification */}

62
<Route path="dsp/notification" element={<Notification />}/></Route)
}
{
sessionStorage.getItem('accessType') === 'adsp' && (
<Route path="/"
element={<ProtectedRoutingComponentisSignedInState={isSignedInState}
/>}>

{/* for petitions */}

<Route path="adsp/petitions" element={<Petition />}/>
{/* for AboutOfficer */}
<Route path="adsp/aboutOfficer" element={<AboutOfficer />}/>
{/* for Notification */}
<Route path="adsp/notification" element={<Notification />}/>
</Route)
}
{
sessionStorage.getItem('accessType') === 'inspr' && (

<Route path="/" element={<ProtectedRoutingComponent

isSignedInState={isSignedInState} />}>

{/* for petitions */}

<Route path="/inspr/petitions" element={<Petition />}/>

{/* for AboutOfficer */}

<Route path="inspr/aboutOfficer" element={<AboutOfficer />}/>
{/* for Notification */}
<Route path="inspr/notification" element={< />}/>

63
 </Route>)
}
{
sessionStorage.getItem('accessType') === 'si' && (
<Route path="/" element={<ProtectedRoutingComponent
isSignedInState={isSignedInState} />}>
{/* for petitions */}
<Route path="si/petitions" element={<Petition />}/>
{/* for AboutOfficer */}
<Route path="si/aboutOfficer" element={<AboutOfficer />}/>
{/* for Notification */}
<Route path="si/notification" element={<Notification />}/>
</Route>)
}
{/* Error page */}
<Route path="*" element={<ErrorPage />} />
</Routes>
</Stack>
</Box>
</Paper>
</ThemeProvider>
</div>)
}
</> );
}
export default App;

64
 CHAPTER 10

CONCLUSION

In conclusion, this project aims to provide an enhanced petition tracking

system using two strong encryption algorithms: HS256 and AES. HS256
provides a secure method for verifying the authenticity of requests and
ensuring that they have not been tampered with, while AES provides a high
level of confidentiality and integrity for the stored data. The combination of
these two encryption algorithms allows for secure communication and storage
of sensitive data such as user information and petitions. Confidently this
system can greatly benefit organizations that rely on petition tracking by
providing a secure and efficient method for managing petitions. One of the key
benefits of this system is its user-friendly interface, which makes it easy for
both individuals and organizations to create and manage petitions. The use of
the MERN stack also ensures that the system is highly scalable, robust, and
responsive.

Overall, This Enhanced Petition Tracking System will be a valuable

asset for any organization looking to improve the security and reliability of
their petition tracking process.

65
 CHAPTER 11
REFERENCES
[1] K. Tabassum, H. Shaiba, S. Shamrani and S. Otaibi, "e-Cops: An Online
Crime Reporting and Management System for Riyadh City," 2018 1st
International Conference on Computer Applications & Information Security
(ICCAIS), Riyadh, Saudi Arabia, 2018, pp. 1-8, doi:
10.1109/CAIS.2018.8441987.
[2] I. Hingorani, R. Khara, D. Pomendkar and N. Raul, "Police Complaint
Management System using Blockchain Technology," 2020 3rd International
Conference on Intelligent Sustainable Systems (ICISS), Thoothukudi, India,
2020, pp. 1214-1219, doi: 10.1109/ICISS49785.2020.9315884.
[3] C. Vinothini, C. Tarun, K. A. Bhavana, G. Nikhil Krishna and A. Praveen,
"NBA web portal: A Comprehensive Survey on NBA Accreditation and
MERN Stack for the Purpose of Implementing a Portal," 2022 International
Conference on Inventive Computation Technologies (ICICT), Nepal, 2022, pp.
1245-1251, doi: 10.1109/ICICT54344.2022.9850953. [4] R. Razali
and J. Jaafar, "Complaint handling theoretical framework," 2012 International
Conference on Computer & Information Science (ICCIS), Kuala Lumpur,
Malaysia, 2012, pp. 382-385, doi: 10.1109/ICCISci.2012.6297275.
[5] M. M. Hussain, G. Geetha and R. Pitchai, "Conceptual Idea for
Implementing Automated Complaint Monitoring System for Rural
Development," 2022 International Conference on Innovative Computing,
Intelligent Communication and Smart Electrical Systems (ICSES), Chennai,
India, 2022, pp. 1-5, doi: 10.1109/ICSES55317.2022.9914042.
[6] "A review of online petitioning systems" by A. Novaro and G. Asensio
[7] "Crowd-based political activism: a case study of Change.org" by M.
Tufekci.
[8] Wireless LAN Medium Access Control (MAC) and Physical Layer (PHY)
Specification, IEEE Std. 802.11, 1997.
[9] "Building an online petition system using the MEAN stack" by A. B.
Kamaruddin and A. H. Haron.
[10] "Designing online petition systems for social change" by J. Krieger and K.
Lim.

66