Jenish Poudel

LIBRARY MANAGEMENT SYSTEM WITH REACT.JS

Thesis
CENTRIA UNIVERSITY OF APPLIED SCIENCES
Degree Programme
June 2023
ABSTRACT

Centria University Date Author

of Applied Sciences June 2023 Jenish Poudel

Degree programme
Bachelor of Engineering, Information Technology
Name of thesis
LIBRARY MANAGEMENT SYSTEM WITH REACT.JS
Centria supervisor Pages
Jari Isohanni 36
Instructor representing commissioning institution
Jari Isohanni

The main purpose of the thesis was to research and study the concept of React Js and to design and
build a website for library purpose “Library Management System” using React.Js.

The theoretical part of the thesis explains the concept and the theory of React Js and its components
that are useful to design a website. The web application was built using React Js along with Bootstrap
CSS as a front-end tool and Node Js as a back-end tool.

The progress of the project involved major steps. To begin with, the requirement of the project was
analysed and based on the requirements the project was designed using Virtual Studio code, a popular
software development tool. As a result, the project was developed fulfilling all the requirement and a
website design Library Management System was build which provides a simple interface for library
purposes.

Key words
Components, DOM, Front-End, HTML, JSX, Javascript, ReactJs, Redux, Virtual
LIST OF ABBREVIATIONS

CSS Cascading Style Sheet

DOM Document Object Model
ERD Entity Relationship Diagram
HTML Hyper Text Markup Language
JSX JavaScript XML
LMS Library Management System
SEO Search Engine Optimization
UI User interface
ABSTRACT
LIST OF ABBREVIATIONS
CONTENTS

1 INTRODUCTION................................................................................................................................1

2 REACT AND ITS CONCEPT ............................................................................................................3

2.1 History of ReactJS..........................................................................................................................3
2.2 React Virtual DOM ........................................................................................................................3
2.3 React Component ...........................................................................................................................5
2.4 JSX – JavaScript XML ..................................................................................................................6
2.5 Props in React .................................................................................................................................7
2.6 State in React ..................................................................................................................................7
2.7 Advantages of ReactJS over other frameworks ..........................................................................9
2.7.1 Code stability .........................................................................................................................9
2.7.2 Suitable for every purpose ...................................................................................................9
2.7.3 SEO-friendly platform .......................................................................................................10
2.7.4 Simple to learn. ...................................................................................................................10
2.7.5 Better Development Experience ........................................................................................11

3 PROJECT ANALYSIS ......................................................................................................................12

3.1 Requirement Analysis ..................................................................................................................12
3.1.1 Functional Requirement.....................................................................................................12
3.1.2 Non-Functional Requirement ............................................................................................13
3.1.3 Use case diagram .................................................................................................................14
3.2 Feasibility Analysis.......................................................................................................................15
3.2.1 Technical Feasibility ...........................................................................................................16
3.2.2 Economical Feasibility ........................................................................................................16
3.2.3 Operational Feasibility .......................................................................................................16
3.2.4 Schedule Feasibility ............................................................................................................17
3.3 ER Diagram ..................................................................................................................................18
3.4 Data Flow Diagram ......................................................................................................................19
3.5 System Design/Framework Plan .................................................................................................20
3.5.1 Database Schema ................................................................................................................20
3.5.2 Flow Chart ...........................................................................................................................21
4 PROJECT IMPLIMENTATION (LIBRARY MANAGEMENT SYSTEM) ..............................24
4.1 Implementation Tools ..................................................................................................................24
4.2 Front End Tools............................................................................................................................24
4.2.1 React (JSX) .........................................................................................................................25
4.2.2 CSS .......................................................................................................................................25
4.2.3 Bootstrap..............................................................................................................................25
4.3 Backend Tools...............................................................................................................................26
4.3.1 Node.js ..................................................................................................................................26
4.3.2 MySql ...................................................................................................................................26

5 WEBSITE AND ITS STRUCTURE ................................................................................................27

5.1 Project structure in Visual Studio Code ....................................................................................27
5.2 Website ..........................................................................................................................................28
5.2.1 Login page ...........................................................................................................................29
5.2.2 Navbar..................................................................................................................................29
5.2.3 Subscriber Search ...............................................................................................................30
5.2.4 Add Books ............................................................................................................................31
5.2.5 Student List .........................................................................................................................31
5.2.6 Teacher List .........................................................................................................................32
5.2.7 Notice page...........................................................................................................................33
5.2.8 Slide Image ..........................................................................................................................33
5.2.9 Footer ...................................................................................................................................34

6 CONCLUSION ..................................................................................................................................35

REFERENCES ......................................................................................................................................36
FIGURES
FIGURE 1. The HTML DOM Tree of Objects ........................................................................................4
FIGURE 2. Virtual DOM reduce rendering..............................................................................................5
FIGURE 3. Valid functional component in React ....................................................................................6
FIGURE 4. Valid class-based component in React ..................................................................................6
FIGURE 5. Example of JSX .....................................................................................................................6
FIGURE 6. Example of data being passed using Prop .............................................................................7
FIGURE 7. State variable in the rendered component..............................................................................8
FIGURE 8. Case diagram .......................................................................................................................15
FIGURE 9. ER diagram 1 .......................................................................................................................18
FIGURE 10. ER Diagram 2 ....................................................................................................................19
FIGURE 11. Data flow diagram .............................................................................................................19
FIGURE 12. Flow chart diagram for book subscription .........................................................................23
FIGURE 13. Library management system visual studio code ................................................................28
FIGURE 14. Login page .........................................................................................................................29
FIGURE 15. Navbar ...............................................................................................................................30
FIGURE 16. Subscriber search ...............................................................................................................30
FIGURE 17. Add book page ...................................................................................................................31
FIGURE 18. Student list page.................................................................................................................32
FIGURE 19. Teacher list page ................................................................................................................32
FIGURE 20. Notice information page ....................................................................................................33
FIGURE 21. Slide image page ................................................................................................................34
FIGURE 22. Footer of the website .........................................................................................................34

TABLES
TABLE 1. Difference between Props and State .......................................................................................8
TABLE 2. Usage of React across the globe............................................................................................10
TABLE 3. Non-Functional Requirement of the LMS ............................................................................14
TABLE 4. Gantt chart .............................................................................................................................17
TABLE 5. Examples of tables created on SQL. .....................................................................................21
 1

1 INTRODUCTION

In this modern world full of modern technologies, where all the information sharing and transaction
are done with the help of various applications and web services, it is necessary for the upcoming
younger generations to have the knowledge of computer and its applications which are provided along
with it. Over the years, the rapid improvement of hardware and software technologies made computer
devices, mobiles, laptops, and other digital technologies more user friendly and affordable. Since data,
information and connectivity are rapidly increasing day by day, websites are challenged with durabil-
ity, performance, security, and maintenance. Therefore, many technologies, new web applications ar-
chitectures, and tools have been created to support these objectives specifically.

According to Herbert (2022), React provides state-of-the-art user interfaces and improves the effi-
ciency of JavaScript-driven pages. React.js is a tool that helps developers build websites and applica-
tions that users can interact with. It was created by Facebook and is like a set of building blocks that
make it easier to create these websites and applications. Instead of writing a lot of complicated code
from scratch, React Js lets developers reuse small pieces of code called "components." These compo-
nents are like separate parts of a puzzle that can be put together to make the whole website or applica-
tion. By using React, developers can build things faster and with less code than if they were just using
basic JavaScript. ReactJS library helps to create a quick response and high-performance website, build
productivity rather than other frameworks in the same area and reduces the cost for maintenance in the
system.

The main objective of this thesis was to learn and represent how ReactJS is used to design Library
Management System. React JS is one of the popular open-source JavaScript front-end library which is
used for building user interface. Nowadays, it is used by wide range of developers. The aim of this
project is the use of the application for library purpose which helps with better library management
system. Library Management System is a library management software used for various aspects like
monitoring and controlling the transaction of a library system. The project focuses on operations in li-
braries like adding books, searches, adding members, searching for availability. MS is a web-based ap-
plication suitable for every browser.

The main aim of the thesis “Library Management System” is to learn and represent React Js and the
implementation tools used to design website design Library Management System. The focused studies
 2

and practices for the project are to present the detailed information of the topic Library Management
System. Also, to give a detailed information of React JS and its core concept. To analyse the require-
ment and feasibility to build the project LMS. To build a website design for the project using different
implementation tools and software development tools and to use the application for better monitoring
and controlling for library purposes.

This thesis is structured in six different chapters. It starts with an introduction of React Js and concept
of the project on the first chapter which is followed by the brief explanation and introduction of React
Js and its concept in chapter two. Project analysis for requirements and feasibility analysis are dis-
cussed in chapter three. In chapter four, the implementation tools that are required to build the website
design are discussed. Library Management System, website and its overall structure of the project are
discussed in chapter five. Finally, chapter six of the thesis concludes the project Library Management
System built for Library purposes.
 3

2 REACT AND ITS CONCEPT

ReactJS is a highly popular JavaScript library that enables developers to efficiently build user inter-
faces. It is widely adopted by major companies such as Instagram, Facebook, Netflix, and Airbnb. Re-
actJS is commonly used to develop single-page applications and mobile applications. For instance,
YouTube, the widely accessed video platform, was built using ReactJS. By utilizing ReactJS, develop-
ers can seamlessly integrate user interfaces into their JavaScript code. A ReactJS website consists of
various components, each defining a distinct view of the web structure. The key advantage of this ap-
proach is the ability to reuse code lines for similar views, as each component functions independently.
This reusability significantly enhances development productivity. Moreover, businesses employing ap-
plications built with ReactJS can experience various advantages and improved intercommunication,
leading to enhanced benefits for the enterprise. (Oracleappshelp, 2021.)

2.1 History of ReactJS

ReactJS is an open-source JavaScript library which can be called React or React.js. It is popular for
SPA (Single Page Application) the manages the view or the cover of web and mobile applications
from which non-functional user interface “UI” are created. Jordan Walke, a software engineer at Face-
book developed React and it was featured in Facebook news feed and Instagram.com in 2012. ReactJS
came into use when the developers implemented it on Facebook’s news feed and later Instagram
picked it to use it in their system. The data’s in React can be changed staying on the same page without
a page reload. The accuracy, speed, and advantage of React framework has made it popular among
other popular framework. (Pandit, 2021.)

2.2 React Virtual DOM

DOM stands for ’Document Object Model’. DOM is a programming interface for HTML and XML
documents. The most important part of web application development is DOM manipulation. DOM
helps manipulate data in an object-oriented model because the element of the DOM defines structure
into objects, process, or properties to be easily accessible. Therefore, they are taken as nodes and rep-
resented as DOM Tree which is also represented as UI of a specific website. The DOM Tree changes
 4

itself according to the change appeared in a website. There is a challenge in updating the DOM tree
when changes occur, which majorly affects the speed or performance of a website. (Anthony, A., Na-
thaniel, M., & Lerner, A. 2017, 134-140.)

The DOM tree in Figure 1 represents as a tree of data structure, making it easy to detect the change in-
side the DOM tree by searching for each level of the tree. The complexity appears when any changes
occur with any elements on the upper levels of the DOM tree, which is nested by many descendent ele-
ment’s complex children. However, activating a DOM element properly without affecting the perfor-
mance of the website was on a very high demand. To solve this problem and to improve its perfor-
mance more React library introduced Virtual DOM as an alternative update strategy which is located
inside the React DOM package. (Document Object Model (ODM), 2023.)

FIGURE 1. The HTML DOM Tree of Objects (Document Object Model (ODM), 2023)

A virtual DOM object is the representation of a DOM object and although it does not have real effi-
ciency as a real DOM, Virtual DOM manipulation helps ReactJS to skip the real DOM manipulation
and boost the process in a much faster speed. Virtual DOM has the same properties as a real DOM, but
it lacks power to directly change what is on the screen. To understand it more clearly, in place of creat-
ing a direct change to the browser DOM model, ReactJS creates change on a Virtual DOM model. It
then calculates the difference between the two DOM models, and only updates difference for the
browser DOM. (Smith, 2020.)
 5

FIGURE 2. Virtual DOM reduce rendering (Smith, 2020).

2.3 React Component

A component is one of the core building blocks of ReactJS. In other words, every application devel-
oped in ReactJS are made up of small pieces called component. Component makes the process of
building UI efficient. Components are independent and reusable bits of code. Components are of two
types, and they are Functional component and Class components. These two components are catego-
rized based on the way they are created. Function components uses plain JavaScript functions whereas
Class components uses ES6 class. The core difference between function and class components is that
Function components are very basic in nature. The only requirement of Function component is to re-
turn a React element. (Agarwal, 2022.)

FIGURE 3 & 4 below are comparable and provide the basic difference between a Functional compo-
nent and Class component. Functional components are only used when the component does not require
interacting and when the component processes independently. These components do not require data
from another component; however, multiple functional components can be built under a single func-
tional component. Class-based components can also be used for this purpose but using class-based
components without the need can make the application ineffective. (Tutorialspoint.)
 6

FIGURE 3. Valid functional component in React. (Tutorialspoint).

FIGURE 4. Valid class-based component in React using ES6 components. (Tutorialspoint).

2.4 JSX – JavaScript XML

JSX stands for JavaScript XML. JSX allows the user to write HTML in react and it is a syntax exten-
sion to JavaScript. It helps to make it easier to write and add HTML in React. JSX produces React”
element”. JSX provides a systematic way to replace the statement React.createElement() in React. The
codes written in JSX convert into JavaScript so that the browser understands the implemented code.
JSX has a syntax that looks both like HTML and JavaScript. The difference with normal JavaScript is
that it is fast and performs optimization while translating to regular JavaScript. React does not require
using JSX, but most users find it helpful as a visual aid when working with UI inside JavaScript code.
It allows reactJs to show errors and threat messages. It is an extension of JavaScript language based on
ES6. As you can see in the example FIGURE 5, JSX allows to write HTML code directly within the
JavaScript code. (Reactjs.org, 2019.)

FIGURE 5. Example of JSX (W3schools, 2023).

 7

2.5 Props in React

Props is a short form for properties. In ReactJS, Props are data that is passed to a component from the
parent component. Props are used to configure the component and pass data into the component from
the parent component. This is important because it allows users to re-use the component again. For ex-
ample FIGURE 6, there is a component that displays a list of products. The component can be used
multiple times, and it passes in different props to configure it while using the component which allows
users to reuse the same component with different data each time with accuracy. (Eygi, 2020.)

FIGURE 6. Example of data being passed using Prop. (Eygi, 2020)

2.6 State in React

State is an updatable structure used to contain data and information about the component. The state in
a component can change and the change in state over time can occur as a response to user action or
system program. A component with the state is known as stateful component. The main core of the re-
act component determines the behavior of the component and how it presents. It is also responsible for
making a component dynamic and interactive. The react state should be kept as simple as possible. It
can be set using the setState() method and calling setState() method triggers UI updates. It can be only
accessed inside the components or modified by the components directly. To set an initial state, getIni-
tialState() method should be used as shown in Figure 7. (Javatpoint, 2021.)
 8

FIGURE 7. State variable in the rendered component. (W3school, 2023).

In React, components can utilize two key concepts: props and state. The difference between Props and
State are given on below TABLE 1 which is further explained. Props are read-only and allow the pass-
ing of data from one component to another as arguments. They are immutable, meaning they cannot be
modified directly. Props enable components to be reusable, as they can be accessed and utilized by
child components. On the other hand, state holds information about a component and is mutable. State
changes can occur asynchronously, allowing components to update and rerender based on certain trig-
gers or events. Stateless components can accept props, but they cannot have their own internal state. In
contrast, stateful components can have their own state, which can be changed by the component itself,
but not by the parent component. Understanding the distinction between props and state is crucial for
effectively managing data and creating reusable components in React. (Javatpoint, 2021.)

TABLE 1. Difference between Props and State. (Javatpoint, 2021.)

No. Props State

1. They are read only State changes can be nonsynchronous
2. Props are immutable State is mutable
3. Props allows to pass data from one compo- State holds information about the components.
nent to other component as argument.
4. State less components can have props. State less components cannot have State.
5. Props can be accessed by child components. State cannot be accessed by child components.
6. Props makes components reusable. State cannot make components reusable.
 9

7. It can be changed by parent component. It cannot be changed by parent component.

2.7 Advantages of ReactJS over other frameworks

React is an efficient JavaScript framework to build interactive user interface in a very easy and in effi-
cient manner. ReactJs is a very flexible language used in front-end development. It helps in designing
simple views for different state in an application and easy to update and interpret the right components
efficiently when the data changes and provides users with better experience. The biggest advantage of
using it is that any components can be changed at any point without affecting the other components
which results in wide support among both clients and service providers. (Borusiuk, 2022.)
The advantages of React over other frameworks are given in the subheadings below.

2.7.1 Code stability

Using only downward data flow, ReactJS ensures more stable code. As the parent structure is not af-
fected by any changes made in child structure, developers only need to modify their state, make cor-
rections for specific components, and change an object. When components are organized and struc-
tured, it leads to more stable code. It also provides a UI which is unaffected because of the component
creation aspect. It follows a well-defined and stable API, due to which codebase is likely to remain sta-
ble and maintainable over time. This allows developers to efficiently conduct unit testing to avoid sys-
tem crashes. The overall stability of a codebase also depends on factors such as code organization, ar-
chitectural decisions, and the skill and discipline of the development team. (Borusiuk, 2022.)

2.7.2 Suitable for every purpose

Using React can reduce the time and cost of web development process. Major companies like Face-
book, Netflix, and Yahoo as well as lot of other start-up companies are using this technology because
of its various benefits and compatibility globally. If the application requires complex UI interactions,
such as real time updates, drag and drop functionality, or complex forms, ReactJs components-based
architecture and usability make it suitable to use for various purposes. The ability to break down UI
into smaller, reusable components helps to maintain code organization, maintainability, and code
 10

stability. It also provides tools like React Profiler and code splitting to optimize performance. (Bo-
rusiuk, 2022.) The TABLE 2 shows the usage of ReactJs across the globe below.

TABLE 2. Usage of React across the globe. (SimilarTech, 2023.)

2.7.3 SEO-friendly platform

SEO, also known as Search Engine Optimization, is the process, technique, and guideline used to in-
crease a website ranking on the search engine results page. Learning ReactJS gives a better search en-
gine experience that helps in increasing the flow of viewers to the website. ReactJS library deals with
search engine failure in a better way which creates an SEO-friendly environment. React is great at re-
ducing page load time through faster rendering and adapts quickly in real time performance according
to user’s demand. Therefore, most of the other frameworks cannot handle the features as smoothly as
ReactJs. So, we can say ReactJS to be SEO-friendy platform for the developers. (Borusiuk, 2022.)

2.7.4 Simple to learn.

ReactJS is an easier framework to learn for JavaScript than any other frameworks. As it is one of the
difficult jobs for companies to complete a project when technology itself is very difficult to learn be-
cause of which business companies mostly prefer to use technologies which are user friendly for the
 11

developing team. It is used by many companies and businesses as it is simple to learn, and the applica-
tion is very easy and cost friendly. With the help of Virtual DOM, ReactJS takes care of updating the
UI effectively, resulting in simple and cleaner code. Also, familiarity with JavaScript, HTML and CSS
is beneficial for working with ReactJs effectively and in general considered to be relatively simple to
learn amongst other frameworks. (Borusiuk, 2022.)

2.7.5 Better Development Experience

React is growing popular day by day as a front-end development application. Thousands of websites
have been built using this framework, providing very resourceful performance, work experience and
advanced web application development features. Companies continue to use React as it is designed to
create rich and attractive applications with very little code. React developers will be in demand for
long term, as react is used in multiple industries. Overall, the combination of component reusability,
efficient rendering, hot reloading, developers tool, community support and developer friendly syntax
contributes to better development experiences with ReactJS. These factors help in better development
workflow, improves productivity, and enhances the overall skills experiences of developers using Re-
actJs. (Borusiuk, 2022.)
 12

3 PROJECT ANALYSIS

This thesis is divided into two parts: understanding React.js and designing a Library Management Sys-
tem using React.js and Node.js. React.js is a popular JavaScript library for building user interfaces,
known for its efficiency and flexibility. The first part focuses on exploring the concepts and features of
React.js. The second part involves practical application through the development of a Library Manage-
ment System, showcasing the power of React.js and Node.js. Analyzing web page requirements is cru-
cial for successful development, involving understanding the purpose, target audience, and desired
functionalities. By conducting thorough analysis, developers can design web pages that meet specific
user needs. In summary, this thesis covers the theoretical and practical aspects of React.js, demonstrat-
ing its capabilities and emphasizing the importance of requirements analysis in web development.

3.1 Requirement Analysis

To analyse the requirement for Library Management System there are functional requirement and non-
functional requirement. Functional requirements entail specific actions and features that the system
must possess. These requirements play a crucial role in determining the system's functionality and user
experience. In the context of the Library Management System, the functional requirements are ex-
plained, and the Nonfunctional requirements are explained below.

3.1.1 Functional Requirement

In the context of the Library Management System, the functional requirements of the system are Login
credentials, Add and Edit Resources, Add and edit resource publication, Add and edit resource author,
Add and edit resource subscriber, Resource issue, Resource Return, Add/Remove users, Issue Notice,
View Profile. Firstly, the system should provide a secure login mechanism, allowing users to access
the system using unique credentials such as usernames and passwords. This ensures that only author-
ized individuals can interact with the system. Administrators should have the capability to add new re-
sources to the library database, including books, journals, and other materials. They should also be
able to edit existing resource information, such as titles, descriptions, and availability status. In addi-
tion, the system should enable administrators to manage resource publication details, such as the
 13

publisher's name, publication date, and ISBN. This information helps in categorizing and organizing
resources effectively. Administrators should also be able to add and update author information associ-
ated with library resources. This includes the author's name, biographical details, and other relevant
metadata, facilitating efficient searching and filtering of resources.

Furthermore, the system should allow administrators to add new subscribers to the library and manage
their information. This includes subscriber names, contact details, and subscription status. It ensures
accurate record-keeping and communication with library patrons. To facilitate the borrowing process,
the system should provide functionality for librarians to issue resources to subscribers. This involves
assigning borrowed resources to specific individuals, updating the resource status to "borrowed," and
maintaining a record of issued resources for tracking purposes. Subscribers should also be able to re-
turn borrowed resources to the library. The system should facilitate the return process, update the re-
source status to "available," and handle any associated fines or penalties if applicable. Moreover, ad-
ministrators should have the authority to add new users to the system, such as librarians and staff
members, as well as remove users who no longer require system access. This ensures proper user man-
agement and security. The system should also provide a mechanism for administrators to issue notices
or reminders to subscribers. These notices can include due date reminders, overdue notices, reservation
notifications, or any other relevant information to keep subscribers informed and engaged. Lastly, both
administrators and subscribers should have access to their profile information. This includes personal
details, borrowing history, preferences, and any additional user-specific settings. The ability to view
and manage profiles enhances user engagement and customization. By clearly defining and addressing
these functional requirements, the Library Management System can be developed and implemented
with the necessary features and actions required to effectively manage library resources and provide a
seamless user experience.

3.1.2 Non-Functional Requirement

In addition to the functional requirements, the Library Management System also requires the consider-
ation of non-functional requirements. These requirements focus on the characteristics and qualities of
the system that contribute to its overall performance, usability, security, reliability, and maintainabil-
ity. Analyzing and addressing these non-functional requirements are crucial for ensuring an optimal
user experience and efficient system operation. Analyzing the Non-functional requirements of the
 14

website Library Management System, the TABLE 3 shows the elements requirements that must be im-
plemented on the project:

TABLE 3. Non-Functional Requirement of the LMS

No. Requirements Features

1 Security Users will be able to access the system using authorized username and pass-
word. Only authorized user can have access to change their profile content or
password,
2 Usability The system should be user friendly and easy to use and understand.
3 Performance Every feature presented by the system has quick response time.
4 Reliability Users will be able to get the information about the activities of the organiza-
tion.
5 Maintainabil- System needs to be maintained for high performance. Updating database,
ity monitoring and error handling should be carried out daily.

3.1.3 Use case diagram

During the implementation of the project, a case diagram was created to visualize the relationships and
interactions within the application. Figure 8 represents this case diagram, which serves as a visual rep-
resentation of the system's functionality and the actors involved. The diagram depicts the primary ac-
tors, such as administrators, librarians, and subscribers, who interact with the system to perform vari-
ous tasks and activities. The use cases illustrated in the diagram represent the specific functionalities
available to the actors within the system. These use cases include actions like logging in, managing re-
sources, handling user profiles, issuing and returning resources, and sending notices. The case diagram
provides a clear overview of the system's architecture, showcasing the flow of information and actions
between different components. By utilizing this diagram, developers and stakeholders can gain a better
understanding of the system's structure and functionality, facilitating the successful implementation of
the Library Management System. (Hammad, 2020.)
 15

FIGURE 8. Case diagram

3.2 Feasibility Analysis

Feasibility Analysis, also referred to as a Feasibility study, is a comprehensive evaluation of key fac-
tors related to a project. It encompasses economic, technological, and operational aspects, as well as
 16

the project's time frame, to determine its potential for success. By conducting a feasibility analysis,
project stakeholders can assess the viability and practicality of the project, considering factors such as
financial resources, technical capabilities, and operational requirements. This analysis aids in making
informed decisions regarding the project's feasibility, allowing for effective resource allocation and
risk mitigation. (Osarome, 2011.)

3.2.1 Technical Feasibility

Technical feasibility study assesses the viability of a system from a technical perspective. It examines
whether the developed system is technically feasible and capable of meeting the required standards of
reliability, accuracy, and security. This evaluation considers the system's architecture, infrastructure,
compatibility with existing technologies, and the availability of necessary resources. The goal is to en-
sure that the proposed system can be implemented effectively and will operate efficiently within the
desired technical framework. By conducting a technical feasibility study, project stakeholders can de-
termine the system's technical feasibility and make informed decisions regarding its development and
implementation. (Osarome, 2011.)

3.2.2 Economical Feasibility

The Economical Feasibility study assesses whether a system is economically viable. In the case of this
system, it utilizes existing resources and technologies without the need for additional hardware or soft-
ware interfaces. Moreover, the software used is freely available, further reducing costs. Based on these
factors, it can be concluded that the project is economically feasible. The absence of significant finan-
cial investments and the utilization of cost-effective solutions contribute to the project's viability. By
conducting an Economical Feasibility study, stakeholders can make informed decisions regarding the
project's financial feasibility and ensure that it aligns with the available resources and budget.

3.2.3 Operational Feasibility

The operational feasibility of the Library Management System is supported by user-friendly interfaces
like HTML and CSS, which create an intuitive environment for both technical and non-technical users.
 17

These interfaces enable users to access the LMS from any web browser, ensuring ease of use and ac-
cessibility. Additionally, the system exhibits quick response times, enhancing its operational feasibil-
ity. These factors contribute to the overall efficiency and usability of the system, making it operation-
ally feasible. By considering operational feasibility, project stakeholders can ensure that the system
meets user expectations and can be effectively utilized in real-world scenarios. (Osarome, 2011.)

3.2.4 Schedule Feasibility

In the Gantt chart below, there is data of different tasks performed and their schedules while working
on the project. The requirement analysis was conducted for two week’s time. Requirement specifica-
tion and user interface was done in three weeks time. Database design, coding, testing and documenta-
tion respectively took nine weeks timeframe in total. Also, the time taken to create and complete the
overall project is also shown in Table 4 below.

TABLE 4. Gantt chart

 18

3.3 ER Diagram

ER diagram also known as Entity Relationship Diagram, is a type of structural diagram for using the
database design. ERD consists of different symbols and connectors that visualise the major entities
within the system scope and the inter-relationship among these entities. ER diagrams are mostly devel-
oped to design relational databases, database design, database debugging, database creation and patch-
ing, and aid in requirements gatherings. Figure 9 and 10 represents the ER diagram for Library Man-
agement System. (Visual Paradigm, 2019.)

FIGURE 9. ER diagram 1
 19

FIGURE 10. ER Diagram 2

3.4 Data Flow Diagram

In the implementation phase of the project, a data flow diagram was created to depict the flow and
transformation of data within the system. Figure 11 represents this data flow diagram, providing a vis-
ual representation of how data moves through different processes, inputs, and outputs. The data flow
diagram showcases the various components and entities involved in the system and illustrates the rela-
tionships and interactions between them. It demonstrates the flow of data between different processes,
highlighting how information is received, processed, and distributed within the system. (Chi, 2021.)
The FIGURE 11 shows the data flow diagram of library management system.

FIGURE 11. Data flow diagram

 20

3.5 System Design/Framework Plan

System design also known as framework plan is the method of characterising the components of a
framework such as the design, modules and components, the distinctive interfacing of those compo-
nents and the information that goes through that framework. System design is implied to fulfil needs
and prerequisites of a commerce or organisation through the designing of a coherent and well-running
framework. Framework plan suggests an orderly approach to the plan of a framework. It may take a
bottom-up or top-down approach, but either way the method is systematic wherein it takes into consid-
eration all related factors of the system that must be created-from the engineering to the desired equip-
ment and program, right down to the information and how it voyages and changes all through its travel
through the framework. System Designs plan at that point covers framework analysis, systems design-
ing and framework architecture. The framework's plan approach to begin with showed up right around
the time of World War II when engineers were attempting to illuminate complex control and commu-
nications issues. (Didacus, 2018.)

3.5.1 Database Schema

The essential part of a database is to store and show overhauled data to an application. Database appli-
cations are utilised to look, sort, channel and show data based upon web demands and can moreover
contain code to perform scientific and factual calculations. Databases allow and constrain information
based upon criteria and implement information keenness by guaranteeing that information is collected
and displayed employing a steady format. The 9 different names of the table 5 are for different pur-
poses in order to smoothly run the application created on SQL (Structure Query Language) and to con-
nect/communicate the application to the database NodeJs has been implemented. Some created tables
for working our application are mentioned below in TABLE 5 while example of all the tables created
are displayed the website section. (ThoughtSpot, 2023.)
 21

TABLE 5. Examples of tables created on SQL.

3.5.2 Flow Chart

A flow chart uses simple shapes and symbols to show how the program operates. Process flow dia-
grams allow us to specifically define the workings and fundamental building blocks of the program.
Flowcharts will have all the information from input to output locations, as well as how the data is han-
dled, depending on the sorts of flowchart. A flow chart diagram FIGURE 12 shows the diagrammatic
representation of algorithms for book subscription.
 22

Contd.
 23

FIGURE 12. Flow chart diagram for book subscription

 24

4 PROJECT IMPLIMENTATION (LIBRARY MANAGEMENT SYSTEM)

In countries where providing education to the people is still a major problem, a good library where stu-
dents and readers can pass quality time reading and studying is a good step to encourage education to
people. For that requires a good library where modern technologies like computers, internet, e-books,
and a good library system is available to store information and data of books and customers which
helps provide better service. Therefore, as the digitalization world has taken over our human lifestyle
and for more costumer friendly environment the idea of Library Management System approached. The
aim of this project is the use of an application for library purposes which will help with a better Li-
brary Management System. (MyEdu, 2019.)

4.1 Implementation Tools

During the implementation of the system, a combination of front-end and back-end development tools
were utilized. The front-end development tools encompassed technologies such as HTML, CSS, and
JavaScript, which were employed to create the user interface and design elements of the system. These
tools allowed for the creation of visually appealing and interactive components that enhance user expe-
rience. On the back end, programming languages and frameworks like React.js and Node.js were uti-
lized. React.js facilitated the development of dynamic and responsive user interfaces, while Node.js
provided a server-side runtime environment for executing server-side logic and handling requests.

4.2 Front End Tools

Front End Technologies are the set of technologies that are used to create the UI (User Interface) of
web applications and web pages. With the aid of front-end technologies, developers can create the de-
sign, structure, animation, and everything that you see on the screen while visiting a website, webpage,
web application, or mobile app. It plays an important part in attracting users and getting them to take
action. A seamless front-end will make users adore and recommend the application. Employing front-
end tools and technologies to increase user interaction, efficiency, interactivity, and visual design of
the application is critical for establishing user loyalty. To accomplish this, mobile and web developers
 25

need to be more efficient and precise. The use of React (JSX), CSS and Bootstrap front end technolo-
gies are implemented on the system. (Levai, 2022.)

4.2.1 React (JSX)

The render function of React components plays a crucial role in generating HTML for the user inter-
face. By utilizing JavaScript extensions like JSX, developers can create HTML-like code using JavaS-
cript syntax. JSX is an HTML-like syntax that is supported by ECMAScript, allowing it to coexist with
JavaScript and React code seamlessly. Preprocessors utilize this syntax to convert the HTML-like code
into standard JavaScript data that can be consumed by a JavaScript engine. React JSX is utilized in
building the front end of the system, enabling developers to create dynamic and interactive user inter-
faces. (Norton, 2021.)

4.2.2 CSS

CSS, or Cascading Style Sheets, is a simple design language intended to make web pages presentable
by simplifying the look and feel process. It handles the visual aspects of a webpage. Using CSS, con-
trol of the color of the text, the design of the fonts, the spacing between paragraphs, the way columns
are sized and positioned, and a variety of other things. CSS is used to control the appearance of an
HTML document and may be combined with HTML or XHTML to create the majority of the web ap-
plication. The styling of the project has been done with CSS. (Norton, 2021.)

4.2.3 Bootstrap

Bootstrap is a free and open-source web development framework which offers a variety of syntax for
template designs to make the web development process simpler and more responsive, mobile-first
websites. Bootstrap's major goal is to produce mobile-first websites. It supplies navigation bars, grid
schemes, image carousels, and buttons as example interface elements. As a result, web developers can
produce websites more rapidly without needing to handle the fundamental issues. It includes HTML,
CSS, and JS code for a variety of web design-related functions and components. Bootstrap is used in
the project to add functionality and to make it system responsive and contains CSS and JS-based de-
sign templates which makes it easier to build the webpage. (Norton, 2021.)
 26

4.3 Backend Tools

The backend application of the Library Management System was developed using specific tools for
effective implementation. In the implementation of the Library Management System, specific backend
tools were utilized for effective development and implementation. One of the key tools used was
Node.js, which served as a communication interface between the application and the database. Another
important tool utilized was MySQL, a relational database management system. MySQL operated based
on the Structured Query Language (SQL), a standardized language for managing database data. (Levai,
2022.)

4.3.1 Node.js

Node.js played a pivotal role as a communication interface between the application and the database
in the project. It facilitated the smooth exchange of data from the database to the frontend, enabling
seamless integration and transmission of information across different components of the application
(Shahid, 2021). By leveraging the power of Node.js, the project achieved efficient data flow and effec-
tive communication between various parts of the application. This played a crucial role in enhancing
the overall performance and functionality of the system, ensuring a seamless user experience.

4.3.2 MySql

For data management and organization, the project utilized MySQL, a powerful relational database
management system. MySQL operates using the widely adopted Structured Query Language (SQL),
which provides a standardized approach to managing database data. Leveraging the capabilities of
SQL, the system performed various essential operations such as data insertion, deletion, and modifica-
tion. With MySQL at the backend, the system ensured secure and efficient storage and manipulation of
data, playing a vital role in the development of a robust Library Management System. By leveraging
the features and reliability of MySQL, the project achieved effective data management, enhancing the
overall functionality and performance of the system. (Shahid, 2021.)
 27

5 WEBSITE AND ITS STRUCTURE

When starting to build a program, choosing the right code editor is important. It should support good
code quality, have the latest features, make programming easier, and be free to use. Visual Studio
Code, Atom, and Sublime Text are popular options. Visual Studio Code was selected as the preferable
code editor for creating the application because it is great for JavaScript and has useful extensions.
There are a number of useful extensions and add-ons that have been implemented into Visual Studio
Code to improve the programming process. Snippets for ES7 React, Redux, GraphQL, and React-Na-
tive, Node.js Modules and Prettier - Code Formatter are a few of them. These extensions add helpful
tools for working with React, Node.js, and formatting code neatly. Overall, Visual Studio Code helps
us write better code and work more efficiently.

5.1 Project structure in Visual Studio Code

The library management system project is structured in Visual Studio, as illustrated in Figure 13. It en-
compasses various folders and components that play crucial roles in the project's implementation.
Within the project, the package.json file serves as a manifest that lists the dependencies required for
the Node.js project. These dependencies consist of external packages or libraries necessary for the
proper functioning of the project. The SRC folder, located under the client directory, serves as the core
of the project. It contains subfolders, components, content, and elements that constitute the website's
structure and functionality. The Views folder contains the after-login and login subfolders. The after-
login folder encompasses the code for the admin page, teacher page, and student page, each with their
respective CSS files stored in the static subfolder within each main folder. The login folder, on the
other hand, includes the code specifically related to the login page. The sign-up folder is responsible
for handling the code related to the sign-up page.

Under the components folder within the SRC directory, the navbar.js and footer.js components are pre-
sent. These components play a crucial role in rendering the respective pages and ensuring a consistent
layout and structure. Finally, the App.js file acts as the main component, known as the App Compo-
nent, in the React application. It serves as a container for all other components, providing a centralized
structure and organization for the project. This well-structured project architecture enhances the devel-
opment process, promotes code organization, and ensures efficient implementation of the library
 28

management system. As shown in the FIGURE 13 the project was structured in different folders and
components for each page. The respective CSS was written under the static folder. Different folders
named student, teacher, admin, login, signup was created to ease the project.

FIGURE 13. Library management system visual studio code.

5.2 Website

The designed single page application offers a user-friendly experience, enabling easy usage for both
teachers and students. Teachers have the capability to effortlessly add files to the designated category,
while students will encounter no difficulties accessing the library's online server. The student and
teacher can view the available books and facilitate their book selection and subscription process. The
application also simplifies tasks such as book renewal and deletion, further enhancing its user-friendly
nature. The result of the website is further explained and shown below.
 29

5.2.1 Login page

Figure 14 illustrates the login functionality of the system, showcasing the user interface where author-
ized users can enter their username and password. This visual representation aids in understanding the
login process and the interface design. The system validates the provided credentials against the prede-
fined records, ensuring the authentication of the user. Once successfully logged in, users are redirected
to the dashboard, granting them access to the system's features and resources. The login functionality
serves as a pivotal security measure, safeguarding the system from unauthorized access and protecting
sensitive information. Through the implementation of Figure 14's depicted login process, the system
ensures a seamless and secure user experience, promoting the efficient usage of the library manage-
ment system.

FIGURE 14. Login page

5.2.2 Navbar

Figure 15 showcases the navbar of the project, which is positioned on the left side of the screen and is
accessed by clicking the burger menu. The navbar serves as a crucial navigation menu, providing users
with easy access to various sections and functionalities of the application. By clicking on the burger
menu, users can expand the navbar and view the available options for navigation. This intuitive design
ensures that users can quickly and conveniently navigate through different areas of the application.
The navbar enhances the user experience by providing a clear and organized menu structure, allowing
users to effortlessly explore and utilize the features and functionalities of the project.
 30

FIGURE 15. Navbar

5.2.3 Subscriber Search

Within the described navbar, users can find several buttons that offer quick access to different features
and information. One such button is the search button, as depicted in Figure 16. By clicking on this
button, users can initiate a search for subscribers or students within the system. The search functionality
enables users to locate specific individuals or access relevant information by inputting search criteria.
This feature enhances the usability and efficiency of the system by facilitating easy retrieval of desired
data. Figure 16 visually represents the search button and its associated functionality, providing users
with a clear understanding of how to utilize this feature. With the search button in the navbar, users can
efficiently navigate the system and access the necessary information they require.

FIGURE 16. Subscriber search

 31

5.2.4 Add Books

The "Add Books" functionality, represented by Figure 17, plays a vital role in the library management
system. By clicking on this button, users with appropriate privileges, such as teachers or administra-
tors, can access a dedicated form to input the details of new books. This form allows for the efficient
and accurate recording of essential book information, such as the title, author, publication, and other
relevant data. The "Add Books" feature ensures the systematic and organized addition of new books to
the system's library, contributing to the expansion and management of the collection. Figure 17 visu-
ally illustrates the form interface, providing users with a clear understanding of how to input the re-
quired book details. Through the "Add Books" functionality, users can streamline the process of updat-
ing the library's inventory and ensure the availability of accurate and up-to-date information for users.

FIGURE 17. Add book page

5.2.5 Student List

The "Student List" feature, represented by Figure 18, grants users the ability to access a comprehensive
list containing information about all the students registered within the system. By clicking on this but-
ton, users can conveniently view student profiles, associated books, renewal dates, and other relevant
details. This functionality facilitates efficient student management, allowing users to track student ac-
tivities, loaned books, and other relevant actions. Figure 18 visually represents the interface where the
student list is displayed, providing users with a clear overview of the available information. With the
"Student List" feature, users can effectively monitor and manage student-related activities within the
library management system, ensuring smooth operations and efficient student engagement.
 32

FIGURE 18. Student list page

5.2.6 Teacher List

The "Teacher List" feature, illustrated in Figure 19, provides users with access to a comprehensive list
containing information about teachers registered within the system. By clicking on this button, users
can conveniently view teacher profiles, contact information, book issues, book additions, renewal
dates, and other relevant details. This functionality facilitates effective management of teachers within
the library management system, allowing users to monitor teacher activities, track issued books, and
perform necessary actions. Figure 19 visually represents the interface where the teacher list is dis-
played, presenting users with a clear overview of the available information. With the "Teacher List"
feature, users can efficiently manage teacher-related activities, establish effective communication, and
ensure smooth operations within the library management system.

FIGURE 19. Teacher list page

 33

5.2.7 Notice page

The "Notice Page" feature, as illustrated in Figure 20, grants users access to a dedicated section within
the system for system-wide notices or announcements. By clicking on this button, users can conven-
iently view important messages, updates, and notifications that are relevant to both students and teach-
ers. The "Notice Page" serves as a centralized platform for disseminating critical information to the
system's users, ensuring effective communication and timely awareness of important matters. Figure
20 visually represents the interface where notices or announcements are displayed, providing users
with a clear understanding of how to access and view the relevant information. With the "Notice Page"
feature, users can stay informed about system-wide updates and important notifications, fostering ef-
fective communication and engagement within the library management system.

FIGURE 20. Notice information page

5.2.8 Slide Image

The button represented by Figure 21 introduces a slideshow feature within the system. By clicking on
this button, users are directed to a dedicated page that presents a collection of images or visual content.
The slideshow functionality allows users to manually or automatically scroll through the images,
providing an engaging and visually appealing experience. Users can enjoy the visual content presented
in the slideshow, which may include images relevant to the library, events, promotions, or other visu-
ally captivating elements. Figure 21 visually represents the interface where the slideshow is displayed,
offering users a glimpse into the immersive visual experience provided by this feature. With the
 34

slideshow functionality, users can enjoy a dynamic and visually stimulating presentation of images
within the library management system.

FIGURE 21. Slide image page

5.2.9 Footer

The footer section, as shown in Figure 22, is an essential component of the library management system
website. It includes a "Connect with Name" section with logos of popular social media platforms like
Instagram, Facebook, Twitter, and YouTube, allowing users to engage and stay updated by accessing
the library's social media profiles. The footer also provides a "Locate Us" section, displaying the li-
brary's contact information such as address, phone number, and email address. This enables users to
easily find and contact the library for inquiries or assistance. The footer section enhances the user ex-
perience by providing convenient access to the library's social media presence and contact details, pro-
moting effective engagement, and facilitating communication.’

FIGURE 22. Footer of the website

 35

6 CONCLUSION

The project's primary motivation was driven by a desire to enhance skills and gain valuable experience
by venturing outside the comfort zone. Although my initial knowledge of React.js was limited, I took
on the challenge and embarked on a journey of expanding my skill set and exploring unfamiliar tech-
nologies. This project served as a platform for me to learn and acquire new skills, which I believe will
significantly benefit me in future endeavors. By pushing myself beyond what I was familiar with, I
have gained valuable insights and experiences that have broadened my horizons and allowed me to
grow both personally and professionally. I am confident that the skills and knowledge acquired
through this project will serve as a solid foundation for my future endeavors in the field.

The project is primarily divided into two parts. Acquiring the knowledge and concept of React Js
framework was the first goal of the project. Another part was to put the theory into practice and build a
simple website design Library Management System with React Js. With these sets of goals, the thesis
began with the theoretical subjects about React Js and its concepts. To understand the knowledge and
concept of React Js various research was done with the help of the technologies available on the Inter-
net. In the final part of the project, the goal was to build a website design. After some study of several
web services technologies, the development framework was executed. This system offers an organized
platform to the users. It overcomes the limitations of old library management and provides a platform
for teachers, students, and administrators with effective library management resonating with the mod-
ern generations. Even though the project Library Management System (LMS) still is an ongoing pro-
ject website design, it has met the requirements to complete the thesis and to provide all the require-
ments to accomplish the objectives of the thesis. In summary, the objectives of the thesis were ac-
quired when comparing the two parts of the thesis with the result. Additionally, opportunity to learn
the variety of web development matters, and experience was also gained while completing the thesis.
 36

REFERENCES

Agarwal, H. 2022. ReactJS Components. GeeksforGeeks. Available at: https://www.geeksfor-

geeks.org/reactjs-components/. Accessed 17 December 2022.

Anthony, A., Nathaniel, M., & Lerner, A. 2017. Fullstack React: The Complete Guide to ReactJS and
Friends. Fullstack.IO.

Borusiuk, Y. 2022. Top 10 Benefits of React.js for Application Development. Online. NCube. Availa-
ble at: https://ncube.com/blog/top-10-benefits-of-react-js-for-application-development. Accessed 03
March 2022.

Chi, C. 2021. “A Beginner’s Guide to Data Flow Diagrams”. Blog. Hubspot. Available at:
https://blog.hubspot.com/marketing/data-flow-diagram. Accessed June 10, 2023.

Didacus O. 2018. System Design in Software Development. Online. Medium. Available at: https://me-
dium.com/the-andela-way/system-design-in-software-development-f360ce6fcbb9. Accessed 21 March
2023.

Document Object Model (ODM), 2023. Tips and Tricks. Meklit. Available at:
http://www.meklit.com/index.php/document-object-model-odm. Accessed 05 December 2022.

Eygi, C. 2020. React.js for Beginners — Props and State Explained. Online. freeCodeCamp.org.
Available at: https://www.freecodecamp.org/news/react-js-for-beginners-props-state-explained/. Ac-
cessed 29 January 2023.

Hammad, M. 2020. “Use Case Diagram for Library Management System”. Preprint. GeeksforGeeks.
Available at: https://www.geeksforgeeks.org/use-case-diagram-for-library-management-system/. Ac-
cessed June 13, 2023.

Herbert, D. 2022. React provides state-of-the-art user interfaces. Blog post. HubSpot. Available at:
https://blog.hubspot.com/website/react-js#:~:text=React%20pro-
vides%20state%2Dof%2Dthe,time%20with%20JavaScript%2Ddriven%20pages. Accessed 22 No-
vember 2022.

Javapoint. 2021. ReactJS State Vs Props. Online. Javatpoint. Available at: https://www.ja-
vatpoint.com/react-state-vs-props. Accessed 10 February 2023.

Javatpoint. 2021. ReactJS State - Javatpoint. Online. www.javatpoint.com. Available at:

https://www.javatpoint.com/react-state. Accessed 03 February 2023.

Levai, D. 2022. Front-end-vs-back-end-development-the-ultimate-2022-guide. Online. Screamingbox.

Available at: https://screamingbox.com/front-end-vs-back-end-development-the-ultimate-2022-guide/.
Accessed June 13, 2023.
 37

MyEdu. 2019. “Importance of Library Management System for Education Institutes,”. Preprint.
MyEdu. Available at: https://www.myeducomm.com/blog/importance-of-library-management-sys-
tem/. Accessed June 13, 2023.

Norton, S. 2021. Getting Started with Bootstrap 5, React, and Sass. Online. Designmodo. Available at:
https://designmodo.com/bootstrap-react-sass/. Accessed 27 March 2023.

Oracleappshelp. 2021. React JS programming tutorial for Beginners. Available at: http://ora-
cleappshelp.com/react-js-programming-tutorial-for-beginners/. Accessed: 25 November 2022.

Osarome, O. 2011. “1. Technical feasibility 2. Operational feasibility 3. Economic feasibility”. Blog.
Osarome. Available at: https://osarome.blogspot.com/2011/10/1-technical-feasibility-2-opera-
tional.html. Accessed: June 13, 2023.

Pandit, N. 2021. What and Why ReactJS. Online. C# Corner. Available at: https://www.c-sharp-
corner.com/article/what-and-why-reactjs/. Accessed: 29 November 2022.

Reactjs.org. 2019. Introducing JSX. Online. React. Available at: https://legacy.reactjs.org/docs/intro-

ducing-jsx.html. Accessed 12 January 2023.

Shahid. 2021. Node.js and MySQL Complete Tutorial | CodeForGeek. Online. Codeforgeek. Available
at: https://codeforgeek.com/nodejs-mysql-tutorial/. Accessed 31 March 2023.

Sheldon, R. and Denman, J. 2022. “Node.js. Node,”. Preprint. WhatIs.com. Available at:
https://www.techtarget.com/whatis/definition/Nodejs#:~:text=js%20(Node)%3F-
,Node.,to%20learn%20an%20additional%20language. Accessed June 08, 2023.

SimilarTech. 2023. React JS Market Share and Web Usage Statistics. Online. SimilarTech. Available
at: https://www.similartech.com/technologies/react-js. Accessed 09 March 2023.

Smith, A. 2020. Why You Should Know About the Virtual DOM. Blog post. Available at:
https://dev.to/aaronsm46722627/why-you-should-know-about-the-virtual-dom-48bc. Accessed 09 De-
cember 2022.
ThoughtSpot, T. 2023. “What is a database schema and why does it matter?”. Preprint. ThoughtSpot.
Available at: https://www.thoughtspot.com/data-trends/data-modeling/database-schema. Accessed
June 07, 2023.

Tutorialspoint. ReactJS - Components. Online. Tutorialspoint. Available at: https://www.tutori-

alspoint.com/reactjs/reactjs_components.htm. Accessed 04 January 2023.

Visual Paradigm. 2019. What is Entity Relationship Diagram (ERD)? Online. Visual-paradigm.com.
Available at: https://www.visual-paradigm.com/guide/data-modeling/what-is-entity-relationship-dia-
gram/. Accessed 16 March 2023.

W3school. 2023. React useState Hook. Online. www.w3schools.com. Available at:

https://www.w3schools.com/react/react_usestate.asp. Accessed 10 February 2023.

W3schools. 2023. React JSX. Online. www.w3schools.com. Available at:

https://www.w3schools.com/react/react_jsx.asp. Accessed 23 January 2023.