Demo Projectreport

Management Information System (MIS) Software for IMOs
A REPORT SUBMITTED IN PARTIAL FULFILLMENT

FOR AWARD OF DIPLOMA
IN
INFORMATION TECHNOLOGY & ENGINEERING
Session: 2019-2020
SUBMITTED TO:
GAURAV PALIWAL HEMANT MENARIA

(H.O.D) (PROJECT INCHARGE)
SUBMITTED BY:
VARSHANG SHRIMALI BHARAT SHROTRIYA

(IT20170028/018) (IT20170006/018)
MUKUL MEHRA AJAY SHARMA
(IT20170020/018) (IT20170004/018)
KHUSHI GUPTA SHOBHA SARASWAT

(IT20170015/018) (IT20170025/018)
Department of Information Technology & Engineering

Vidya Bhawan Polytechnic College, Udaipur
Approved by A.I.C.T.E., New Delhi & Affiliated by Board of Technical Education
Rajasthan, Jodhpur
“Best Polytechnic” Awarded by NITTTR Govt. of India
Estd.1956
Certificate
This is to certify that the Report entitled “Management Information System (MIS)
Software for IMOs” has been undertaken and written under my supervision and it
describes the original project work carried out by Mr. Varshang Shrimali , in
Department of Information technology Engineering, Vidya Bhawan Polytechnic College,
Udaipur.
HEMANT MENARIA
(Project Incharge)
Forwarded by:
GAURAV PALIWAL DR. ANIL MEHTA

(HOD) (Principal)
Date: Date:
Rajasthan, Jodhpur
Estd.1956
Certificate
describes the original project work carried out by Mrs. Khushi Gupta , in Department of
Information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.
HEMANT MENARIA
(Project Incharge)
Forwarded by:

(HOD) (Principal)
Date: Date:
Rajasthan, Jodhpur
Estd.1956
Certificate
describes the original project work carried out by Mr. Mukul Mehra , in Department of
HEMANT MENARIA
(Project Incharge)
Forwarded by:

(HOD) (Principal)
Date: Date:
Rajasthan, Jodhpur
Estd.1956
Certificate
describes the original project work carried out by Mr. Bharat Shrotriya, in Department
of information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.
HEMANT MENARIA
(Project Incharge)
Forwarded by:

(HOD) (Principal)
Date: Date:
Rajasthan, Jodhpur
Estd.1956
Certificate
describes the original project work carried out by Mr. Ajay Sharma, in Department of
HEMANT MENARIA
(Project Incharge)
Forwarded by:

(HOD) (Principal)
Date: Date:
Rajasthan, Jodhpur
Estd.1956
Certificate
describes the original project work carried out by Mrs. Shobha Saraswat, in Department
of Information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.
HEMANT MENARIA
(Project Incharge)
Forwarded by:

(HOD) (Principal)
Date: Date:
ACKNOWLEDGEMENT
The satisfaction accompanies that the successful completion of any task would be incomplete
without the mention of people whom case less cooperation made it possible whom constant
guidance and encouragement crown all efforts with success.
So I am fortunate to find opportunity to express my deep sense of gratitude and sincere thanks
to all those people who helped me with their guidance and assistance their contribution has
been invaluable.
First of all I am thankful to “Vidya Bhawan Polytechnic College” for keeping this Industrial
Project in curriculum which provide real world experience before degree.
My first sincere obligation to Dr. Anil Mehta sir for providing project at “Vidya Bhawan
Polytechnic College” Udaipur and gives me the constant support and motivation during my
project.
I would like to give heartless thanks to Hemant Menaria (Project Incharge) sir Gaurav
Paliwal (H.O.D) sir for giving their precious time consistent cooperation support and solving
out the queries whenever I have.
I would also like to thank all my friends of Vidya Bhawan Polytechnic College Udaipur for
their hard work and support provided by them during the duration of I.T Diploma their
guidance was always faithful.
ABSTRACT
Rashtriya Mahila Kosh (RMK), established in 1993 is a national level organization under the
aegis of the Ministry of Women and Child Development. It is as an autonomous registered
society with the objectives of providing and promoting credit for poor women. It broadly aims
at the socio-economic empowerment of women particularly in the informal and non-
institutionalized sector through microfinance. Poor women and women headed households
were dependent upon informal credit sources for both production and consumption purposes
as Banks have not been able to provide credit services to the required degree, and as such these
poor women were often exploited with high interest rates and other undesirable forms, keeping
them in perpetual state of indebtedness. It was in this context that Rashtriya Mahila Kosh was
formed. The operating model currently followed by RMK is a group model with RMK as a
facilitating agency wherein RMK provides loan products to Non - Governmental Organization
(NGO)/ Intermediary Micro-financing Organization (IMO) / Voluntary Organization (VO)
which on-lend to Women Groups like SHG, JLG etc.
The key aspects of the loan management system include reduced processing time and
turnaround, ability to improve the performance throughout and inquire in a much lesser time,
tracking of status on line and better document management, minimization of errors, details
required and unwanted information requirements and better customer satisfaction with new
product offerings and thus, impacting the minds of the customers. The financial sector is
growing and grooming as each day passes and thus, introducing efficient new technologies in
this sector will surely result in development of agencies and customers. With appropriate steps
and efficient technologies, the customers and the agencies can bond together and the financial
sector can gain more foothold.
LIST OF FIGURES
FIGURE
FIGURE PAGE NO.
NO.
3.2. Flowchart of Project 78
3.3 E-R diagram 81
3.4 Use Case Diagram 89
3.5 0 — Level DFD 91
3.5 1- Level DFD 92
4.1 Sign Up 93
4.2 Sign In 94
4.3 Home Section 94
4.4 Apply Loan 98
4.5 Re-Payment Tracking/Tracking Status 104
4.6 Dashboard 110
4.7 Contact Us 113
4.8 Blog 114
4.9 Database Detail 116

TABLE OF CONTENTS
TITLE PAGE NO
CHAPTER -1......................................................................................................................1-7
INTRODUCTION................................................................................................................... 1
1.1 About project ..................................................................................................................... 1
1.2 Objective of project................................................................................................…..……2
1.3 need of project...................................................................................................................... 3
1.4 Scope of Project................................................................................................................... 3
1.5 Facilities given by your project……………………………………………………….…...4
1.6 Advantages and Disadvantages……………………………………………………………4
1.7 Limitations of Project……………………………………………………………………...5
1.8 Literature review…………………………………………………………………………..6
CHAPTER -2 ....................................................................................................................8-76
METHODOLOGY AND TECHNOLOGY........................................................................8
2.1 Technical Platform (languages, tools, database).............................................................. 8

2.2 Software and Hardware Requirement ...............................................................................26
2.3 Installation of Tools...........................................................................................................33
2.4 Basic Introduction of Front End Languages .....................................................................39
2.5 Introduction of backend and Database Tools……...........................................................58
CHAPTER-3…..................................................................................................................77-92
DESIGN AND ARCHITECTURE.................................................................................... 77
3.1 Introduction about all types of entity or parties of project............................................. 77
3.2 Flowchart of Project......................................................................................................... 78
3.3 ER diagram ................................................................................................................... 81

3.4 Use case diagram ............................................................................................................. 89
3.5 Data flow diagram ..........................................................................................................90
CHAPTER -4 ................................................................................................................93-118
SCREENSHOOT…………………................................................................................... 93
CHAPTER -5 ................................................................................................................119
RESULT AND DISCUSSION…………............................................................................119
CHAPTER -6 ......................................................................................................................120
SUMMARY ……………………………………………………………………………….120
CHAPTER -7 .....................................................................................................................121
CONCLUSION ……………………………………………………………………………121
CHAPTER -8 .....................................................................................................................122
REFERENCES…………………………………………………………………………….122
Chapter 1
INTRODUCTION
1.1 ABOUT PROJECT:-
Rashtriya Mahila Kosh (RMK) establishes as an autonomous body under the aegis of the
ministry of Women and Child Development. RMK provides loans to NGO-MFIs termed as
Intermediary Organisation (IMOs) which on-lend to Self Help Groups (SHGs) of women .This
Organisation was introduced in MARCH 1997.Our Software Model System is based on E-loan
Information Management System in which RMK and Women of self-help groups can feed the
Information/ data to the web model which are going to make and this model keep the track of
Loan which is taken by the women micro-entrepreneurs and self-help groups of Women. In
our model women can directly apply for loan using our web model and this web model will be
connected to RMK database model, which is currently being used by the RMK. Information
management system software will capture information related to women beneficiaries (i.e.
women micro-entrepreneurs) such as loan account information, repayment track record,
economic activity, personal information (Aadhar Card, Bank Account Details, Age etc.),
Income level, Savings, Demographic details (no. of family members, caste, religion, literacy
level etc.). As per the name is Information management system that means that
information/data of women is very useful, so we have to make it secure in terms of attacks.
Using above mechanisms, the attacker can’t get the data and we will use authentication
mechanism of Firebase Auth that will also help our model to identify the user. In this we will
also focusing on REPAYMENT TRACKING means women has taken the loan how much she
has repay or how much payment is left of the loan record. RMK, NGO’s and women can see
the tracking using Application Id and Mobile Number. Here, there is an Approval panel in this
panel women can see his loan is approved, pending, rejected using his loan Application
Number and Name of Loan Holder (who will take the Loan). Payment Panel is used to pay the
monthly EMI using payment Gateways. So, from this women can apply EMI online without
going to NGO office and RMK’s Office. Here comes the Main/Important point is that Women
can be belong to urban and rural but is rural area’s women can access the website and Pay the
EMI. For the Above problem we have find the one solution is that we will give the access to e-
1
mitra’s because the e-mitra is a secure system and women can go to their shops and can Pay
the EMI’s.
1. In this we have an Admin Panel s

2. Add new user.
3. Update the content on the website
4. Retrive the old data
5. Can activate the web site
6. Can deactivate the web site
7. Can give the instruction of form filling
8. Delete the existing user
In this project we will use the following Technologies –
1. React JS
2. Firebase Database
3. Npm Packages
4. Html 5
5. CSS3
6. ES6 Javascript
7. Bootstrap
This Project is field of Ministry of women & child development.

1.2 Objective of project:-
The main objective of building this product is to develop a lightweight, user-friendly, flexible
and efficient loan management system. The goal is to develop a system that helps loans to get
processed and service from the very beginning to the end. This creates a workflow that an
employee or a business needs to manage. To make a good impression on the customers, they
must be provided with an easy and understanding lending experience. Then, they get
encouraged to use your organization for other loan opportunities. Since, it is a configuration-
based product, the thought process is to change the UI, to suit the configurators, using Ant-
design.
1. To provide socio-economic development through multi-pronged effort.
2
2. To provide micro-credit facilities.
3. To facilitate the capacity-building of IMOs and women beneficiaries.
4. To promote or undertake activities for promoting or providing credit as an instrument
of socio-economic change and development. This shall be done by providing a package
of financial and social development services for the development of women.
5. To Promote and support schemes for enhancing the scope of credit facilities for women,
sustaining their existing employment, generating further employment, asset creation,
asset redemption, and tiding over consumption, social and contingent needs.
6. To demonstrate and replicate participatory approaches in the organization of women’s
groups for effective utilization of credit resources, resulting in self-reliance.
1.3 Need of project:

RMK doesn’t provide an online platform for loan they were having intermediate in between
which are the NGO’S so in this there will be chances that the women doesn’t get full payment
of their loan which leads to corruption in between the women can only apply for getting the
loan ,to NGO’s. In our project we have provided online platform that will help the women to
get directly communicate online and they will get their payment directly we have provided a
better and secure communication in between them. Our projects were having number of
modules for providing complete information i.e. Management Information System which help
a women to get directly communicate with RMK. As we have created different number of
modules like user panel ,admin panel , verification panel, payment panel the communication
get simple and secured .the need of this project were having an another reason because RMK
doesn’t have any platform to get directly connected to those needy women who really need
loan to fulfill their requirement. As we all know there are many widow women in our society
so to get their work started by themselves we have created this project so that they can their
loan easily without any interface of the third party that is NGO’s if this is held so there will be
no corruption in our society so that is the need of our project to help women to get the loan
without any issue of the third party.
1.4 Scope of Project:-
1. This project is a transaction related information storing project which will be used by the
staffs of a RMK for handling their customers.
2. Who have loans or want to have loans.
3
3. Operator need to use the registration form to create account for the new customers, and
EMI details and the loan.
4. Detail forms are present for dealing with the old customers or those who are already
registered.
5. This application has a user friendly interface.
6. This project is very beneficial for women’s.
7. There is no corruption in this.
8. There will be no role of third party within this.
9. We have provided benefits for women for getting loan easily.
10. We have provided an free platform.
1.5 Facilities given by your project:-
1. Provide a better user experience to improve the speed and accuracy of loan applications.
2. Process a larger number of loan applications with existing resources.
3. Eliminate sources of human error for faster, better-quality evaluation decisions.
4. Establish predictable, repeatable, and auditable processes that support compliance.
5. Reduce delays and costs associated with paper processes.
6. Analyze process and loan performance with the goal of continually improving
efficiency and profitability.
7. Women who doesn’t have proper knowledge of filling form online can also use this by
going e-mitra.
8. User can update their profile.
9. They can easily get loan without interference of third party
10. They can get confirmation at the same time
1.6 Advantages and Disadvantages:-
Advantages Disadvantages
Purchase without liquidity Strict Repayment Schedule
Better interest rates Partial Funding Requirements
Flexibility Processing Fee.
Cash discount Increased Compliances
Ownership Remains with Borrower. Additional Burden on Cost of Goods
4
The loan is not repayable on demand and Interest Rate Risk / Cost of Funds
so available for the term of the loan —
generally three to ten years — unless you
breach the loan conditions.
Loans can be tied to the lifetime of the Loans are not very flexible — you could be
equipment or other assets you’re borrowing paying interest on funds you’re not using
the money to pay for.
At the beginning of the term of the loan you You could have trouble making monthly
may be able to negotiate a repayment repayments if your customers don’t pay you
holiday, meaning that you only pay interest promptly, causing cash flow problems
for a certain amount of time while
repayments on the capital are frozen.
While you must pay interest on your loan, In some cases, loans are secured against the
you do not have to give the lender a assets of the business or your personal
percentage of your profits or a share in your possessions, e.g. your home. The interest
company. rates for secured loans may be lower than for
unsecured ones, but your assets or home
could be at risk if you cannot make the
repayments
Interest rates may be fixed for the term so There may be a charge if you want to repay
you will know the level of repayments the loan before the end of the loan term,
throughout the life of the loan. particularly if the interest rate on the loan is
fixed.
1.7 Limitations of Project:-
1. Women only can take loan to fulfil their needs.

2. Till 50 lack Rs. There is no security
3. Re-payment can be done manually by the admin due to interest rate and delay amount.
4. In initially we have not created any automatic verification of user/ women,the RMK
will verify manually.
5
5. If any of the documents are incomplete it will be automatically cancelled by admin.
1.8 Literature review
The previous action or ideas which were taken by different authors are as follows:-
1. Loan Promotion Scheme:- This scheme is for providing loans to new and smaller
organizations with experience of at least 6 months in thrift & credit. The organization can avail
a maximum loan up to Rs. 10 lakhs.
1 The NGO/IMO/ VO to carry due diligence and seek specific information about the
borrowings of each customer to ensure that no customer has availed loan from more than
two MFI/Banks/ Corporations.
2. Purpose of Loan:-
Organisations availing loan from RMK shall on-lend to the end beneficiaries for the following
purpose Income generating activities such as setting up of small business, asset creation,
agriculture, petty shop, livestock rearing, transport services, etc.
3. Consumption Loans Life Cycle need: Birth, Death, Education, Marriage, House
construction, Old age, Widowhood, Festival and other family events, etc. Emergency needs:
Medical emergencies, Natural calamities, Theft & Accidents, etc.
4. Distribution of loan RMK fund is for income generation activities as mentioned under
purpose of loan. Loan for consumption purposes shall not be more than 1 % of total amount
given by IMOs to women beneficiaries.
1. Security
No security for loan upto Rs. 50 lakh Loans above Rs.50 lakh and upto Rs.1 Crore:-
10% of the project cost as margin amount in the form of fixed deposit till the loan is
cleared. For loans above Rs. 1 Crore, 10% of the project cost be kept as margin money
in the form of fixed deposit with RMK till the loan is repaid and immovable property
having value equal to or more than 50 % of loan amount be taken as collateral security
by deposit of title deed (Equitable Mortgage) after following the due procedure in
mortgaging such properties. The NGO/IMO/VO may hold the deeds in trust for RMK
of the immovable properties created out of RMK’s Housing Loan Scheme.
2. Insurance
The borrowing organization/ end beneficiaries shall ensure adequate insurance cover of
all assets created out of RMK’s loan.
6
5. Repayment
Loan amount availed under all schemes, to be repaid within three years i.e. in 30 monthly
instalments with an initial gestation period of 6 months.
6. Margin
The organization is required to contribute a margin of 10% of the loan to be availed from RMK.
NGOs/IMOs/Vos will be advanced 90% of the total cost of the scheme approved. However,
thrift/compulsory savings/voluntary savings of borrowers should not be used in the form of
margin money.
7. Repeat Loan Scheme
For a repeat loan, the NGO/IMO must have promptly repaid 80% of the previous loan without
any break or delay in repayment .All other criteria for assessment, approval etc. will be the
same as that of availing a fresh loan under 1 to 4 Lending Schemes of RMK. In our criteria we
have designed it with some new factor in which we will make a software which will capture
the information related to women beneficiaries such as loan account information, repayment
track, record economic activities, personal information (Aadhar card, bank account details)
This software will have 4 modules
1. User Panel: - A women beneficiaries /SHGs can register themselves. They can update
their profiles which include account information, personal information.
2. Verification Panel:-Verification team can check
3. , update, verify the loan docs as well as user profile.
4. Approval Panel:- This team can see only those profile which are verified by verification
team .
5. Payment Panel:- Via this panel dashboard a payment department can check the payment
status of every user profile. Through payment reminder automatically send by system
payment team can also take an action “if required”.
7
Chapter 2
METHODOLOGY AND TECHNOLOGY

2.1 Technical Platform ( languages ,tools ,database)
2.1.1 HTML5:-
HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. Markup language is used to define the text document within tag
which defines the structure of web pages. HTML 5 is the fifth and current version of HTML.
It has improved the markup available for documents and has introduced application
programming interfaces (API) and Document Object Model (DOM).
HTML5 is a markup language used for structuring and presenting content on the World Wide
Web HTML5 was first released in public-facing form on 22 January 2008 with a major update
and “W3C Recommendation” status in October 2014HTML is a markup language that web
browsers use to interpret and compose text, images, and other material into visual or audible
web pages. Default characteristics for every item of HTML.
8
2.1.2 . CSS3:- (Cascading Style Sheets)
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independent of the HTML that makes up
each web page.CSS is easy to learn and understood but it provides powerful control over the
presentation of an HTML document. Cascading Style Sheets (CSS) is used to define and
control the presentation of your Webpages.
CSS describes the way HTML elements are presented to the user, its color, border, dimensions
etc CSS is designed to enable the separation of presentation and content,
including layout, colors, and fonts This separation can improve content accessibility provide
more flexibility and control in the specification of presentation characteristics, enable
multiple web pages to share formatting by specifying the relevant CSS in a separate .css file,
and reduce complexity and repetition in the structural content.
9
2.1.3. JavaScript
JavaScript is a lightweight, cross-platform and interpreted scripting language. It is well-known

for the development of web pages, many non-browser environments also use it. JavaScript can
be used for Client-side developments as well as Server-side developments. JavaScript contains
a standard library of objects, like Array, Date, and Math, and a core set of language elements
like operators, control structures, and statements.
1. Client-side: It supplies objects to control a browser and its Document Object Model
(DOM). Like if client-side extensions allow an application to place elements on an
HTML form and respond to user events such as mouse clicks, form input, and page
navigation. Use full libraries for the client-side are AngularJS ReactJS , VueJS and so
many others.
2. Server-side: It supplies objects relevant to running JavaScript on a server. Like if the
server-side extensions allow an application to communicate with a database, and
provide continuity of information from one invocation to another of the application, or
perform file manipulations on a server. The useful framework which is the most famous
these days is node.js.
10
2.1.4. React js :-
React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces.
It is maintained by Facebook and a community of individual developers and companies React
can be used as a base in the development of single-page or mobile applications. However, React
is only concerned with rendering data to the DOM, and so creating React applications usually
requires the use of additional libraries for state management and routing. Redux and React
Router are respective examples of such libraries. React is a declarative, efficient, and flexible
JavaScript library for building user interfaces. It lets you compose complex Uis from small and
isolated pieces of code called “components”.React is a library for building composable user
interfaces. It encourages the creation of reusable UI components, which present data that
changes over time. Lots of people use React as the V in MVC. React abstracts away the DOM
from you, offering a simpler programming model and better performance. React can also render
on the server using Node, and it can power native apps using React Native. React implements
one-way reactive data flow, which reduces the boilerplate and is easier to reason about than
traditional data binding. The appearance of React.js dramatically widened the opportunities for
front-end developers in creating user-friendly interfaces.To show its unique features, we’ve
been publishing a lot about React.js. Moreover, our excellent front-end expert, Miklos Bertalan
has started a series of live streams where he shows how to build React apps on a free, locally
hosted server — created by another brilliant engineer at Risingstack, Robert Czinege.
11
2.1.5. Firebase Database:-
Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew Lee in
2011. Envolve provided developers an API that enables the integration of online chat
functionality into their websites. After releasing the chat service, Tamplin and Lee found that
it was being used to pass application data that were not chat messages. Developers were using
Envolve to sync application data such as game state in real time across their users. Tamplin
and Lee decided to separate the chat system and the real-time architecture that powered it. They
founded Firebase as a separate company in September 2011and it launched to the public in
April 2012.Firebase’s first product was the Firebase Real-time Database, an API that
synchronizes application data across iOS, Android, and Web devices, and stores it on
Firebase’s cloud. The product assists software developers in building real-time, collaborative
applications.Firebase provides a real-time database and back-end as a service. The service
provides application developers an API that allows application data to be synchronized across
clients and stored on Firebase’s cloud. The company provides client libraries that enable
integration with Android, iOS, JavaScript, Java, Objective-C, Swift and Node.js applications.
The database is also accessible through a REST API and bindings for several JavaScript
frameworks such as AngularJS, React, Ember.js and Backbone.js. The REST API uses
the Server-Sent Events protocol, which is an API for creating HTTP connections for receiving
push notifications from a server. Developers using the realtime database can secure their data
by using the company’s server-side-enforced security rules.The Realtime Database is a NoSQL
database and as such has different optimizations and functionality compared to a relational
database.
12
2.1.6. ES6 Javascript:-
ECMAScript 2015 or ES2015 is a significant update to JavaScript programming language. It

is the first major update to the language since ES5 which was standardized in 2009. Therefore,
ES2015 is often called ES6.
The 6th edition, initially known as ECMAScript 6 (ES6) then and later renamed to ECMAScript
2015, was finalized in June 2015. This update adds significant new syntax for writing complex
applications, includingclass declarations ES6 modules like but defines them semantically in
the same terms as ECMAScript 5 strict mode. Other new features include iterators
and for...of loops, Python-style generators, arrow function expression keyword for local
declarations, keyword for constant local declarations, binary data, typed arrays, new
collections (maps, sets and WeakMap), promises, number and math enhancements, reflection,
proxies (metaprogramming for virtual objects and wrappers) and template literals for
strings.The complete list is extensive.As the first “ECMAScript Harmony” specification, it is
also known as “ES6 Harmony.”ECMAScript (or ES) is a scripting-
languag specification standardized by Ecma International. It was created to
standardize JavaScript to help foster multiple independent implementations. JavaScript has
remained the most widely used implementation of ECMAScript since the standard was first
published, with other implementations including Jscript and ActionScript ECMAScript is
commonly used for client-side scripting on the World Wide Web, and it is increasingly being
used for writing server applications and services using Node.js.
13
2.1.7. NODE JS :-
Node.js is an open source and cross-platform runtime environment for

executing JavaScript code outside of a browser. You need to remember that NodeJS is not a
framework and it’s not a programming language. Most of the people are confused and
understand it’s a framework or a programming language. We often use Node.js for building
back-end services like APIs like Web App or Mobile App. It’s used in production by large
companies such as Paypal, Uber, Netflix, Wallmart and so on.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 Node.js allows the creation of Web servers and
networking tools using JavaScript and a collection of “modules” that handle various core
functionalities. Modules are provided for filesystem I/O,
networking(DNS, HTTP, TCP, TLS/SSl,or UDP), binary data.(buffers), cryptography functio
ns, data streams, and other core functions. Node.js’s modules use an API designed to reduce
the complexity of writing server applications.
14
2.1.8. Bootstrap :-
Bootstrap is a free and open-source CSS framework directed at responsive, mobilefirst front-
end web development. It contains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface components Bootstrap is the
sixth-most-starred project on GitHub, with more than 135,000 stars, behind freeCodeCamp and
marginally behind Vue.js framework.According to Alexa Rank, Bootstrap is in the top-2000 in
the USA while vuejs.org is in the top-7000 in the USA.
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob
Thornton at Twitter as a framework to encourage consistency across internal tools. Before
Bootstrap, various libraries were used for interface development, which led to inconsistencies
and a high maintenance burden. According to Twitter developer Mark Otto:
A super small group of developers and I got together to design and build a new internal tool
and saw an opportunity to do something more. Through that process, we saw ourselves build
something much more substantial than another internal tool. Months later, we ended up with
an early version of Bootstrap as a way to document and share common design patterns and
assets within the company.
15
2.1.9. EXPRESS.JS
Express is a small framework that sits on top of Node.js’s web server functionality to simplify
its APIs and add helpful new features.It makes it easier to organize your application’s
functionality with middle ware and routing; it adds helpful utilities to Node.js’s HTTP
objects;it facilitates the rendering of dynamic HTTP objects Express.js, or simply Express, is
a web application framework for Node.js , released as free and open-source under
the MITLicense. It is designed for building web applications and APIs It has been called the de
facto standard server framework for Node.jsExpress is a part of MEAN stack, a full stack
JavaScript solution used in building fast, robust, and maintainable production web applications.
1. MongoDB(Database)
2. ExpressJS(Web Framework)
3. AngularJS(Front-end Framework)
4. NodeJS(Application Server)
2.1.10. Stripe :-
Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re
creating a subscription service, an on-demand marketplace, an e-commerce store, or a
crowdfunding platform, Stripe’s meticulously designed APIs and unmatched functionality help
you create the best possible product for your users.
16
. Millions of the world’s most innovative technology companies are scaling faster and more
efficiently by building their businesses on Stripe. Stripe is an American technology company
that allows individuals and businesses to make and receive payments over
the InternetIrish entrepreneur brothers John and Patrick Collison founded Stripe in 2010,
initially using the name In June 2010, Stripe received seed funding from Y Combinator, a start-
up accelerator. In May 2011, Stripe received a $2 million investment from venture
capitalists Peter Thiel, Sequoia Capital, and Andreessen Horowitz. In February 2012, Stripe
received an $18 million Series A investment, led by Sequoia Capital at a $100 million
valuation. Stripe launched publicly in September 2011 after an extensive private beta Less than
a year after its public launch, Stripe received a $20 million Series B investment In March 2013,
Stripe acquired chat and task-management application Kick-off.
2.1.11 Database:- Firebase

In the era of rapid prototyping, we can get bright ideas, but sometimes they are not applicable
if they take too much work. Often, the back-end is the limiting factor — many considerations
never apply to server-side coding due to lack of knowledge or time.
17
Firebase is a Backend-as-a-Service(BaaS) which started as a YC11 startup. It grew up into a
next-generation app-development platform on Google Cloud Platform. Firebase (a
NoSQLjSON database) is a real-time database that allows storing a list of objects in the form
of a tree. We can synchronize data between different devices.
The Firebase Real-time Database is a cloud-hosted database. Data is stored as JSON and
synchronized in real-time to every connected client. When you build cross-platform apps
with our iOS, Android, and JavaScript SDKs, all of your clients share one Real-time
Database instance and automatically receive updates with the newest data. The Firebase Real-
18
time Database lets you build rich, collaborative applications by allowing secure access to the
database directly from client-side code. Data is persisted locally, and even while offline,
realtime events continue to fire, giving the end user a responsive experience. When the device
regains connection, the Realtime Database synchronizes the local data changes with the
remote updates that occurred while the client was offline, merging any conflicts
automatically. The Realtime Database provides a flexible, expression-based rules language,
called Firebase Realtime Database Security Rules, to define how your data should be
structured and when data can be read from or written to. When integrated with Firebase
Authentication, developers can define who has access to what data, and how they can access
it .The Realtime Database is a NoSQL database and as such has different optimizations and
functionality compared to a relational database. The Realtime Database API is designed to
only allow operations that can be executed quickly. This enables you to build a great realtime
experience that can serve millions of users without compromising on responsiveness.
Because of this, it is important to think about how users need to access your data and
then structure it accordingly. When you build cross-platform apps with our iOS, Android, and
JavaScript SDKs, all of your clients share one Realtime Database instance and automatically
receive updates with the newest data.
Tools:-
1. Adobe XD:-
19
Adobe XD is a vector-based digital design tool for websites and apps. Use it to create and
collaborate on everything from prototypes to mockups to full designs.
Here’s how Adobe describes it: “Adobe XD is the fastest and most reliable UX design solution
on the market for companies of 10 or 10,000. Break through bottlenecks, iterate rapidly, and
scale for the future. The security and control you need are built right in.”
Adobe XD is relatively new to the market – it was released in beta in 2016 – and was originally
called Adobe Experience Design CC.
The tool works on Mac and Windows machines as well as iOS and Android for mobile
functionality. You can use it as a direct download (the license pings your desktop every month)
or in the cloud for mobile devices.
The tool is quickly becoming a solid competitor to more established wireframing and
prototyping apps, such as Sketch or Figma, thanks to strong corporate backing from Adobe and
user familiarity, plus cross-platform support).Adobe XD is a vector-based user experience
design tool for web apps and mobile apps, developed and published by Adobe Inc. It is
available for macOS and Windows, although there are versions for iOS and Android to help
preview the result of work directly on mobile devices. XD supports website wireframing and
creating click-through prototypes. This was in response to the rising popularity of Sketch, a
design platform released in 2010 which replaced Adobe Photoshop as the industry leading
design platform for UI and UX design.
In 2017 Adobe XD had an average rank in the market and couldn’t overshadow Sketch’s
dominance. Fast forward two years and Adobe is catching up fast.
1. Adobe XD plugins are written in the most popular web programming language,
JavaScript.
2. You can also use HTML and CSS to create the plugin’s UI.
3. Adobe XD has become a popular tool in the UX and screen design space.
4. Adobe XD plugins can be very powerful; Make your plugin do all the manual, repetitive
work!
Adobe XD has a built-in plugin manager you can upload your plugin to, (just in case you
want to share your plugin with others,Adobe XD also works for teams that want to create
user experiences and collaborate on the process. You can even build a design system that
helps keep everyone on track with a single project.
20
2. Visual Studio :-
Visual Studio is an Integrated Development Environment (IDE) developed by Microsoft to

develop GUI(Graphical User Interface), console, Web applications, web apps, mobile apps,
cloud, and web services, etc. With the help of this IDE, you can create managed code as well
as native code. It uses the various platforms of Microsoft software development software like
Windows store, Microsoft Silverlight, and Windows API, etc. It is not a language-specific IDE
as you can use this to write code in C#, C++, VB (Visual Basic), Python, JavaScript, and many
more languages. It provides support for 36 different programming languages. It is available for
Windows as well as for macOS.
Evolution of Visual Studio:
The first version of VS (Visual Studio) was released in 1997, named as Visual Studio
97 having version number 5.0. The latest version of Visual Studio is 15.0 which was
released on March 7, 2017. It is also termed as Visual Studio 2017. The supported .Net
Framework Versions in latest Visual Studio is 3.5 to 4.7. Java was supported in old
versions of Visual Studio but in the latest version doesn’t provide any support for Java
language.
There are 3 editions of Microsoft Visual Studio as follows:
1. Community: It is a free version which is announced in 2014. All other editions are paid.
This contains the features similar to Professional edition. Using this edition, any individual
developer can develop their own free or paid apps like .Net applications, Web applications
and many more. In an enterprise organization, this edition has some limitations. For
21
example, if your organization have more than 250 PCs and having annual revenue greater
than $1 Million (US Dollars) then you are not permitted to use this edition. In a non-
enterprise organization, up to five users can use this edition. Its main purpose is to provide
the Ecosystem (Access to thousands of extensions) and Languages (You can code in C#,
VB, F#, C++, HTML, JavaScript, Python, etc.) support.
2. Professional: It is the commercial edition of Visual Studio. It comes in Visual Studio 2010
and later versions. It provides the support for XML and XSLT editing and includes the
tool like Server Explorer and integration with Microsoft SQL Server. Microsoft provides
a free trial of this edition and after the trial period, the user has to pay to continue using it.
Its main purpose is to provide Flexibility (Professional developer tools for building any
application type), Productivity (Powerful features such as CodeLens improve your team’s
productivity), Collaboration (Agile project planning tools, charts, etc.) and Subscriber
benefits like Microsoft software, plus Azure, Pluralsight, etc.
3. Enterprise: It is an integrated, end to end solution for teams of any size with the demanding
quality and scale needs. Microsoft provides a 90-days free trial of this edition and after the
trial period, the user has to pay to continue using it. The main benefit of this edition is that
it is highly scalable and deliver high-quality software. Microsoft Visual Studio is
an integrated development environment (IDE) from Microsoft. It is used to
develop computer programs, as well as websites, web apps, web services and mobile apps.
Visual Studio uses Microsoft software development platforms such as Windows
API, Windows Forms, Windows Presentation Foundation, Windows Store and Microsoft
Silverlight. It can produce both native code and managed code.
3. NpM Packages :- Node Package Manager
22
NPM (originally short for Node Package Manager) is a package manager for
the JavaScript programming language. It is the default package manager for the JavaScript
runtime environment Node.js. It consists of a command line client, also called npm, and
an online database of public and paid-for private packages, called the npm registry. The registry
is accessed via the client, and the available packages can be browsed and searched via the npm
website. The package manager and the registry are managed by npm, Inc. npm is written
entirely in JavaScript and was developed by Isaac Z. Schlueter as a result of having “seen
module packaging done terribly” and with inspiration from other similar projects such
as PEAR (PHP) and CPA npm is included as a recommended feature in Node.js installer. Npm
consists of a command line client that interacts with a remote registry. It allows users to
consume and distribute JavaScript modules that are available on the registry. Packages on the
registry are in CommonJs format and include a metadata file in JSON format. Over 477,000
packages are available on the main npm registry.The registry has no vetting process for
submission, which means that packages found there can be low quality, insecure, or
malicious.[ Instead, npm relies on user reports to take down packages if they violate policies
by being low quality, insecure or malicious. Npm exposes statistics including number of
downloads and number of depending packages to assist developers in judging the quality of
packages.
Software Package Manager

1. The name npm (Node Package Manager) stems from when npm first was created as a
package manager for Node.js.
2. All npm packages are defined in files called package.json.The content of package.json
must be written in JSON.At least two fields must be present in the definition
file: name and version.
What is npm
npm, short for Node Package Manager, is two things: first and foremost, it is an online
repository for the publishing of open-source Node.js projects; second, it is a command-line
utility for interacting with said repository that aids in package installation, version
management, and dependency management. A plethora of Node.js libraries andapplications are
published on npm, and many more are added every day. These applications can be searched
23
for . Once you have a package you want to install, it can be installed with a single command-
line command.
The npm registry contains packages, many of which are also Node modules, or contain Node
modules. Read on to understand how they differ and how they interact.
About packages
A package is a file or directory that is described by a package.json file. A package must contain
a package.json file in order to be published to the npm registry. For more information on
creating a package.json file, see “Creating a package.json file”
Packages can be unscoped or scoped to a user or Org, and scoped packages can be private or
public. For more information, see
1. About scopes
2. About private package
3. Package scope, access level, and visibility
npm is the world’s largest software registry. Open source developers from every continent use
npm to share and borrow packages, and many organizations use npm to manage private
development as well.
Npm consists of three distinct components:
1. the website
2. the Command Line Interface (CLI)
3. the registry
The CLI runs from a terminal, and is how most developers interact with npm. The registry is a
large public database of JavaScript software and the meta-information surrounding it.
NPM basically is the package manager for node. It helps with installing various packages and
resolving their various dependencies.
Configuration
npm is extremely configurable. It reads its configuration options from 5 places.
1. Command line switches: Set a config with —key value. All keys take a value, even if
they are 24latform (the config parser doesn’t know what the options are at the time of
parsing). If no value is provided, then the option is set to 24latfor true.
2. Environment Variables: Set any config by prefixing the name in an environment
variable with npm_config_. For example, export npm config_key = value.
24
3. User Configs: The file at $HOME/.npmrc is an ini-formatted list of configs. If present,
it is parsed. If the userconfig option is set in the cli or env, then that will be used instead.
4. Global Configs: The file found at etc npmrc (from the node executable, by default this
resolves to /usr/local/etc/npmrc) will be parsed if it is found. If the global
configuration option is set in the client, environment, or user configuration, then that
file is parsed instead.
4. React Dev Tools:-
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript
library. It allows you to inspect the React component hierarchies in the Chrome Developer
Tools.
React Developer Tools (Devtools for short) is a browser extension for Chrome and Firefox that
provides an extra set of React-specific inspection widgets to assist you with development. By
installing React Devtools, you’ll get two main features: a view of the component tree and the
current state and props of each component you select.
1. React Sight
In conjunction with the above extension, React Sight is yet another Chrome extension
you can install to help you in your react-inspection related endeavours.
2 React Extension Pack (for VS Studio)
Visual Studio is probably one of the most popular IDEs for JavaScript developers as of late.
True, you don’t really have to be using it to be a successful developer, that are great alternatives
such as Sublime, Intellij and even Vim (big Vim fan right here folks!).That being said, because
25
of the strong community behind VS, I thought I’d share a few words about its React Extension
Pack. Essentially, this is a bundle of extensions designed to help you in your react-related tasks.
1. ReactJS Code Snippets: It provides 40 (yes, you read that number right!) snippets for all
your generic needs and 34 propTypes-specific snippets. This, in case you’re too lazy to
do the math for yourself, adds up to the whooping total of 74 snippets for you to stop
wasting time writing so much and start being more efficient in your day-to-day tasks.
2. npm: Having to jump from your IDE to the terminal every time you need to install a new
dependency, restart the server or even run some npm-specific command can get a bit
tedious, so this extension adds the ability to run npm commands right from the command
palette.
3. JS ES6 Snippets: More JS-generic snippets Why not This set of snippets will include
another set of over 40 snippets. This time, they’re not specific but considering you’re
working with JavaScript after all, it’s a definitive must-have in order to speed up your
process.
2.2. Hardware and Software Requirement:-
 Software:-
2.2.1 Github:-
GitHub, Inc. is a United States-based global company that provides hosting for software
development version control using Git. It is a subsidiary of Microsoft, which acquired the
company in 2018 for US$7.5 billion. It offers the distributed version control and source code
management (SCM) functionality of Git, plus its own features. It provides access control and
several collaboration features such as bug tracking, feature requests, task management,
and wikis for every project.
26
GitHub offers plans free of charge, and professional and enterprise accounts.Free GitHub
accounts are commonly used to host open source projects.As of January 2019, GitHub offers
unlimited private repositories to all plans, including free accounts. As of January 2020, GitHub
reports having over 40 million users and more than 100 million repositories (including at least
28 million public repositories), making it the largest host of source code in the world.
Development of the GitHub platform began on October 19, 2007. The site was launched in
April 2008 by Tom Preston-Werner, Chris Wanstrath, P. J. Hyett and Scott Chacon after it had
been made available for a few months prior as a beta release.
Projects on GitHub can be accessed and manipulated using the standard Git command-line
interface and all of the standard Git commands work with it. GitHub also allows registered and
unregistered users to browse public repositories on the site. Multiple desktop clients and
Git plugins have also been created by GitHub and other third parties that integrate with the
platform.
GitHub is mostly used for code.
In addition to hosting source code, GitHub supports the following formats and features:
1. Documentation, including automatically rendered README files in a variety
of Markdown-like file formats (see README files on GitHub)
2. Issue tracking (including feature requests) with labels, milestones, assignees and a
search engine
3. Wikis
4. Pull requests with code review and comments
5. GitHub Actions, which allows building continuous integration and continuous
deployment pipelines for testing, releasing and deploying software without the use of
third-party websites/platforms
6. Commits history
7. Graphs: pulse, contributors, commits, code frequency, punch card, network, members
8. GitHub Pages: small websites can be hosted from public repositories on GitHub. The
URL format is https
9. PDF document viewer
10. Security Alerts of known Common Vulnerabilities and Exposures in different packages
27
GitHub’s Terms of Service do not require public software projects hosted on GitHub to meet
the Open Source Definition. For that reason, it is essential for users and developers intending
to use a piece of software found on GitHub to read the software license in the repository
(usually found in a top-level file called “LICENSE”, “LICENSE.txt”, or similar) to determine
if it meets their needs The Terms of Service state, “By setting your repositories to be viewed
publicly, you agree to allow others to view and fork your repositories.”
GitHub also provides some software as a service integrations for adding extra features to
projects. Those services include:
1. Waffle.io: Project management for software teams. Automatically see pull requests,
automated builds, reviews, and deployments across all of your repositories in GitHub.
2. Rollbar: Integrate with GitHub to provide real time debugging tools and full-stack
exception reporting. It is compatible with all well used code languages, such
as JavaScript, Python, .NET, Ruby, PHP, Node.js, Android, iOS, Go, Java, and C#.
3. Codebeat: For automated code analysis specialized in web and mobile developers.
The supported languages for this software
are: Elixir, Go, Java, Swift, JavaScript, Python, Ruby, Kotlin, Objective-C,
and TypeScript.
4. GitLocalize: Developed for teams that are translating their content from one point to
another. GitLocalize automatically syncs with your repository so you can keep your
workflow on GitHub. It also keeps you updated on what needs to be translated.
GitHub is a website and cloud-based service that helps developers store and manage their code,
as well as track and control changes to their code.
GitHub is a Git repository hosting service, but it adds many of its own features. While Git is a
command line tool, GitHub provides a Web-based graphical interface. It also provides access
control and several collaboration features, such as a wikis and basic task management tools for
every project. These three features – fork, pull request and merge – are what make GitHub so
powerful. Gregg Pollack of Code School (which just launched a class called TryGit) explains
that before GitHub, if you wanted to contribute to an open source project you had to manually
download the project’s source code, make your changes locally, create a list of changes called a
“patch” and then e-mail the patch to the project’s maintainer.
2.2.2 Npm Terminal:-
28
npm (originally short for Node Package Manager) is a package manager for the JavaScript
programming language. It is the default package manager for the JavaScript runtime
environment Node.js It consists of a command line client, also called npm, and an online
database of public and paid-for private packages, called the npm registry. The registry is
accessed via the client, and the available packages can be browsed and searched via the npm
website. The package manager and the registry are managed by npm, Inc.
Instead, npm relies on user reports to take down packages if they violate policies by being low
quality, insecure or malicious. Npm exposes statistics including number of downloads and
number of depending packages to assist developers in judging the quality of packages.
Terminal is a small package that can be used with node.js to control terminal output. The
package can move the cursor in the terminal and output colored text. It can colorize a message
with a simple straightforward markup syntax.
Whether you just need colors & styles, build a simple interactive command line tool or a
complexe terminal application: this is the absolute terminal lib for Node.js
1 Keyboard inputs :-
The grab input () method turns input grabbing on. When input grabbing is on, the terminal will
switch to what is known as the raw mode.
2 Raw mode:
Raw mode is the other of the two character-at-a-time modes. The line discipline performs no
line editing, and the control sequences for both line editing functions and the various special
characters (“interrupt”, “quit”, and flow control) are treated as normal character input.
Applications programs reading from the terminal receive characters immediately, and receive
the entire character stream unaltered, just as it came from the terminal device itself.
Node.js makes it possible to write applications in JavaScript on the server. It’s built on the V8
JavaScript runtime and written in C++ — so it’s fast. Originally, it was intended as a server
environment for applications, but developers started using it to create tools to aid them in local
task automation. Since then, a whole new ecosystem of Node-based tools (such
as Grunt, Gulp and webpack) has evolved to transform the face of front-end development.
1. npm I <package> : install local package.
2. npm I —g <package> : install global package.
3. npm un <package> : uninstall local package.
4. npm up : npm update packages.
29
5. npm t : run tests.
6. npm ls : list installed modules.
Npm is the package manager for the Node JavaScript platform. It puts modules in place so that
node can find them, and manages dependency conflicts intelligently.It is extremely
configurable to support a wide variety of use cases. Most commonly, it is used to publish,
discover, install, and develop node programs. Npm makes it easy for JavaScript developers to
share and reuse code, and makes it easy to update the code that you’re sharing, so you can build
amazing things.
2.2.3 Material UI :-
Material Design (codenamed Quantum Paper) is a design language that Google developed
in 2014. Expanding on the “card” motifs that debuted in Google Now, Material Design uses
more grid-based layouts, responsive animations and transitions, padding, and depth effects
such as lighting and shadows. Designer Matías Duarte explained that, “unlike real paper, our
digital material can expand and reform intelligently. Material has physical surfaces and edges.
Seams and shadows provide meaning about what you can touch.” Google states that their new
design language is based on paper and ink but implementation takes place in an advanced
manner.
Material Design will gradually be extended throughout Google’s array of web and mobile
products, providing a consistent experience across all platforms and applications. Google has
also released application programming interfaces (APIs) for third-party developers to
30
incorporate the design language into their applications. The main purpose of material design is
creation of new visual language that combines principles of good design with technical and
scientific innovation.
Flat Design:-
Flat design is a minimalist design language or design style coined and popularized by Allan
Grinshtein, commonly used in graphical user interfaces (GUI) (such as web
applications and mobile apps), and also in graphical materials such as posters, arts, guide
documents and publishing products. Flat design is a style of interface design emphasizing
minimalist use of simple elements, typography and flat colors.
Flat design is primarily influenced by the International Typographic Style (also known as Swiss
Style), Text User Interface, Modernism, and the styles emerging from Bauhaus. The
International Typographic style is often considered the most substantial influence on flat
design, and its emergence and popularization during the 1950s and 1960s is regarded as the
starting point of flat design, although it would not make an appearance in the digital world for
some time thereafter.
Fluent Design System:-
Fluent Design System (codenamed Project Neon), officially unveiled as Microsoft Fluent
Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a
revamp of Microsoft Design Language 2 that includes guidelines for the designs and
interactions used within software designed for all Windows 10 devices and platforms. The
system is based on five key components: Light, Depth, Motion, Material, and Scale. The new
design language includes more prominent use of motion, depth, and translucency effects.
Human Interface Guidelines:-
Human interface guidelines (HIG) are software development documents which offer
application developers a set of recommendations.
Human interface guidelines often describe the visual design rules, including icon and window
design and style. Much less frequently, they specify how user input and interaction mechanisms
work. Aside from the detailed rules, guidelines sometimes also make broader suggestions about
how to organize and design the application and write user-interface text.
Fit their application, or usability testing reveals an advantage in doing so. But in turn, the
organization publishing the HIG might withhold endorsement of the application. Mozilla
31
Firefox’s user interface, for example, goes against the GNOME project’s HIG, which is one
of the main arguments for including Epiphany instead of Firefox in the GNOME distribution.
Metro ( Design language)
Microsoft design language (or MDL) is a design language created by Microsoft. This design
language is focused on typography and simplified icons, absence of clutter, increased content
to chrome ratio (“content before chrome”), and basic geometric shapes. Early examples of
MDL principles can be found in Encarta 95 and MSN 2.. The design language evolved
in Windows Media Center and Zune and was formally introduced as Metro during the
unveiling of Windows Phone 7. It has since been incorporated into several of the company’s
other products, including the Xbox 360 system software, Xbox One, Windows 8, Windows
Phone, and Outlook.com Before the “Microsoft design language” title became official,
Microsoft representative Qi Lu referred to it as the modern UI design language in his MIXX
conference keynot speech. According to Microsoft, “Metro” has always been a codename and
was never meant as a final product, but news websites attribute this change to trademark issues.
Hardware :-
Computer
Most current computers and laptops have high enough specifications to be used to create a
website. The most important specification to check on the computer would be the size of the
RAM, which should be over 2GB, though more is better.
Internet
In order to create a website, access to a high-speed Internet connection can be vital. This
allows you to transfer the files that will make up your website to the online server that will
be hosting your website, post updates on your website and look at your website live online
to make sure that it is displaying correctly.
Camera
Unless your website is going to consist only of text, you will want to have a way to get some
digital photos and videos for your website. While you can buy stock photos and videos, these
can end up being expensive if you need many of them, and they may not be as specific as the
shots you need.
32
Server
You will need a server computer to host your website on to make sure that it is available all
the time for anyone trying to access it. While you can set up a computer to act as a web server,
this is a highly complicated task, and it is far easier, more reliable and cost-effective to simply
purchase a hosting package from a web hosting company. They will keep and maintain the
server computer, and you will be able to access it to change files on your website.
Mobile Devices
While not necessary, many free website creation softwares allow users to adjust, update and
work on their website from a mobile device. If you are on the go often and would like to be
able to make adjustments to your site from wherever you are at, you may want to look into
getting a web-enabled smartphone or device.
.2.3 Installation of Tools:-
2.3.1 Visual Studio:- steps to install visual studio
Step 1 — Make sure your computer is ready for Visual Studio

Before you begin installing Visual Studio:
1. Check the system requirements. These requirements help you know whether your
computer supports Visual Studio 2019.
2. Apply the latest Windows updates. These updates ensure that your computer has both
the latest security updates and the required system components for Visual Studio.
3. Reboot. The reboot ensures that any pending installs or updates don’t hinder the Visual
Studio install.
4. Free up space. Remove unneeded files and applications from your %SystemDrive% by,
for example, running the Disk Cleanup app.
For questions about running previous versions of Visual Studio side by side with Visual
Studio 2019, see the Visual Studio 2019 Platform Targeting and Compatibility page.
Step 2 — Download Visual Studio
Next, download the Visual Studio bootstrapper file.
To do so, choose the following button, choose the edition of Visual Studio that you want,
choose Save, and then choose Open folder.
Download Visual Studio
33
Step 3 — Install the Visual Studio installer
Run the bootstrapper file to install the Visual Studio Installer. This new lightweight installer
includes everything you need to both install and customize Visual Studio.
1. From your Downloads folder, double-click the bootstrapper that matches or is

similar to one of the following files:
a. vs_community.exe for Visual Studio Community
b. vs_professional.exe for Visual Studio Professional
c. vs_enterprise.exe for Visual Studio Enterprise
2. If you receive a User Account Control notice, choose yes.
3. We’ll ask you to acknowledge the Microsoft LicenseTerms and the
Microsoft Privacy Statement. Choose Continue.
Step 4 — Choose workloads

After the installer is installed, you can use it to customize your installation by selecting the
feature sets—or workloads—that you want. Here’s how.
1. Find the workload you want in the Visual Studio Installer.
For example, choose the “ASP.NET and web development” workload. It comes with the
default core editor, which includes basic code editing support for over 20 languages, the
ability to open and edit code from any folder without requiring a project, and integrated
source code control.
34
2. After you choose the workload(s) you want, choose Install.
Next, status screens appear that show the progress of your Visual Studio installation.
Step 5 — Choose individual components (Optional)

If you don’t want to use the Workloads feature to customize your Visual Studio installation, or
you want to add more components than a workload installs, you can do so by installing or
adding individual components from the Individual components tab. Choose what you want,
and then follow the prompts.
35
Step 6 — Install language packs (Optional)
By default, the installer program tries to match the language of the operating system when it
runs for the first time. To install Visual Studio in a language of your choosing, choose
the Language packs tab from the Visual Studio Installer, and then follow the prompts.
Change the installer language from the command line Another way that you can change the
default language is by running the installer from the command line. For example, you can
force the installer to run in English by using the following command: vs_installer.exe —
locale en-US. The installer will remember this setting when it is run the next time. The
installer supports the following language tokens: zh-cn, zh-tw, cs-cz, en-us, es-es, fr-fr, de-
de, it-it, ja-jp, ko-kr, pl-pl, pt-br, ru-ru, and tr-tr.
Step 8 — Start developing
1. After Visual Studio installation is complete, choose the Launch button to get started
developing with Visual Studio.
2. On the start window, choose Create a new project.
3. In the search box, enter the type of app you want to create to see a list of available
templates. The list of templates depends on the workload(s) that you chose during
installation. To see different templates, choose different workloads.
36
You can also filter your search for a specific programming language by using
the Language drop-down list. You can filter by using the Platform list and the Project
type list, too.
4. Visual Studio opens your new project, and you’re ready to code
2.3.2 Adobe XD :- Steps to install Adobe XD
Step 1: Go to the Academic Software page for Adobe XD and click the green tton, ‘Download
Adobe XD’ to download the installer.
Step 2: Open the .exe installer file from your downloads folder to start the installation.
Step 3: Once the installation is completed, the startup screen of Adobe XD will appear.
The program is now installed and ready to use.
Installing a Plugin
1. Download the plugin package.
If you received a .zip file, unzip the file and locate the .xdx extension in the folder you have
after unzipping the file.
2. Make sure that you have the Adobe XD opened and you are on a document.
Double-click on the .xdx file and you will see a verification panel. Click on the Install button.
37
3. If the plugin is installed successfully, you will see the following pop-up.
If you already have the same plugin installed, you will be prompted to overwrite the plugin. If
you are installing a newer version of the plugin, you can procedd with overwriting the
existing one by clicking on the Overwrite button.
Finding the plugin in XD after installing

After the plugin is successfully installed, you will be able to locate the plugin under
the Plugins tab in the top menu.
38
2.4 Basic Introduction of Front End Languages
2.4.1 Html :-HYPER TEXT MARKUP LANGUAGE (HTML)
HTML 5 (formerly and commonly spelled HTML5) is a software solution stack that
defines the properties and behaviours of web page content by implementing a mark-up
based pattern to it.
1. HTML 5 is the fifth and current major version of HTML, and subsumes XHTML. The
current standard, the HTML Living Standard is developed by WHATWG, which is
made up of the major browser vendors (Apple, Google, Mozilla, and Microsoft), with
the Living Standard also existing in an abridged version.
2. HTML 5 was first released in public-facing form on 22 January 2008, with a major
update and “W3C Recommendation” status in October 2014. Its goals were to improve
the language with support for the latest multimedia and other new features; to keep the
language both easily readable by humans and consistently understood by computers
and devices such as web browsers, parsers, etc., without XHTML’s rigidity; and to
remain backward-compatible with older software. HTML 5 is intended to subsume not
only HTML 4, but also XHTML 1 and DOM Level 2 HTML
3. HTML 5 includes detailed processing models to encourage more interoperable
implementations; it extends, improves and rationalizes the mark-up available for
documents, and introduces mark-up and application programming interfaces (APIs) for
39
complex web applications. For the same reasons, HTML 5 is also a candidate for cross-
platform mobile applications, because it includes features designed with low-powered
devices in mind.
1.1 History
1. The Web Hypertext Application Technology Working Group (WHATWG) began
work on the new standard in 2004. At that time, HTML 4.01 had not been updated
since 2000 ,and the World Wide Web Consortium (W3C) was focusing future
developments on XHTML 2.0. In 2009, the W3C allowed the XHTML 2.0 Working
Group’s charter to expire and decided not to renew it.
2. The Mozilla Foundation and Opera Software presented a position paper at a World
Wide Web Consortium (W3C) workshop in June 2004, focusing on developing
technologies that are backward-compatible with existing browsers, including an
initial draft specification of Web Forms 2.0. The workshop concluded with a vote—
8 for, 14 against—for continuing work on HTML. Immediately after the workshop,
WHATWG was formed to start work based upon that position paper, and a second
draft, Web Applications 1.0, was also announced. The two specifications were later
merged to form HTML 5. The HTML 5 specification was adopted as the starting
point of the work of the new HTML working group of the W3C in 2007.
WHATWG’s Ian Hick son (Google) and David Hyatt (Apple) produced W3C’s first
public working draft of the specification on 22 January 2008.
1.3 Features
1. It has introduced new multimedia features which supports audio and video controls by
using <audio> and <video> tags.
2. There are new graphics elements including vector graphics and tags.
3. Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added Drag and Drop- The user can grab an object and drag it further dropping
it on a new location.
4. Geo-location services- It helps to locate the geographical location of a client.
5. Web storage facility which provides web application methods to store data on web browser.
1.4 New Elements of Html 5 are as follows:-
40
1. <article>: The <article> tag is used to represent an article. More specifically, the
content within the <article> tag is independent from the other content of the site (even
though it can be related).
2. <aside>: The <aside> tag is used to describe the main object of the web page in a
shorter way like a highlighter. It basically identifies the content that is related to the
primary content of the web page but does not constitute the main intent of the primary
page. The <aside> tag contains mainly author information, links, related content and so
on.
3. <figcaption>: The <figurecaption> tag in HTML is used to set a caption to the figure
element in a document.
4. <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main flow
but it can be used in any
1.6 Advantage
1. Mutuality
Due to usability purpose, the websites made by developers are highly interactive nowadays and
for this developers need to include fluid animations, stream video, play music and Social
Network sites like Facebook and Twitter into the websites. Till now they have only the option
to integrate it with the help of Flash or Silverlight, Flex or javascript like tools.
2. Cleaner markup / Improved Code
HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags
and replace them with semantic HTML 5 elements
 Improved Semantics
Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the
tags are specific for these all and most importantly know what their meaning and purpose
is in whole the format. By using HTML5 elements we can increase the semantic value of
the web page as the codes are very standardized.
 Elegant forms
HTML5 enables designer to use more fancier forms. Even it makes form validation native
to HTML, User interface enhancements and reduced need for JavaScript (only needed in
browsers that don’t support form types). There will be different type of text inputs, search
and different fields for different purpose.
41
Client-side database
While cookies have been used to track unique user data for years, they have serious
disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request
header. This can end up having a measurable impact on response time. So a best practice is to
reduce cookie size. With HTML5 we can do better by using sessionStorage and
localStorage(two different storage in HTML5) in place of cookies. It is not a permanent
database, but enables you to store structured data, temporarily.
6 Geolocation support
With help of Geolocation anyone can find out where you are in the world and share that
information with people. There is different ways to figure out where you are — your IP add
ress, your wireless network connection, which cell tower your phone is talking to, or dedicated
GPS hardware that calculates latitude and longitude from information sent by satellites in the
sky. But The new HTML5 geolocation APIs make the location, whether generated via GPS or
other methods, directly available to any HTML5-compatible browser-based application.
2.4.2 Cascading Style Sheet (CSS)-
Cascading Style Sheet (CSS) is used to describe the presentation semantics (that is, the look
and formatting) of a document written in mark-up language. CSS is design primarily to enable
the separation of document content (written in HTML or a similar mark-up language) from
document presentation, including elements such as the layout, colors, and fonts.
 Cascading Style Sheet is used to style HTML elements.
42
 CSS defines the way how to display HTML elements.
History :-
CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working
with Tim Berners-Lee at CERN. Several other style sheet languages for the web were proposed
around the same time, and discussions on public mailing lists and inside World Wide Web
Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in 1996.
In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and is
regarded as co-creator of CSS.
Style sheets have existed in one form or another since the beginnings of Standard Generalized
Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for
the web. One requirement for a web style sheet language was for style sheets to come from
different sources on the web. Therefore, existing style sheet languages
like DSSSL and FOSI were not suitable. CSS, on the other hand, let a document’s style be
influenced by multiple style sheets by way of “cascading” styles.
Improving web presentation capabilities was a topic of interest to many in the web community
and nine different style sheet languages were proposed on the www-style mailing list. Of these
nine proposals, two were especially influential on what became CSS: Cascading HTML Style
Sheets and Stream-based Style Sheet Proposal (SSP). Two browsers served as testbeds for the
initial proposals; Lie worked with Yves Lafon to implement CSS in Dave
Raggett’s Arena browser. Bert Bos implemented his own SSP proposal in the Argo browser.
Lie’s proposal was presented at the “Mosaic and the Web” conference (later called WWW2)
in Chicago, Illinois in 1994, and again with Bert Bos in 1995. Around this time the W3C was
already being established, and took an interest in the development of CSS. It organized a
workshop toward that end chaired by Steven Pemberton. This resulted in W3C adding work on
CSS to the deliverables of the HTML editorial review board (ERB). Lie and Bos were the
primary technical staff on this aspect of the project, with additional members,
including Thomas Reardon of Microsoft, participating as well.
2.2 Advantages Of CSS
1. Consistency
By making one change to your website’s CSS style sheet, you can automatically make it
to every page of your website. The bigger your website, the more time CSS saves you.
43
And not only does CSS save time, it also ensures that your web pages have consistent
styling throughout your site.
2 Bandwidth Reduction
When CSS separates your website’s content from its design language, you dramatically
reduce your file transfer size. Your CSS document will be stored externally, and will be
accessed only once when a visitor requests your website. In contrast, when you create a
website using tables, every page of your website will be accessed with each visit. Your
reduced bandwidth needs will result in a faster load time and could cut your web hosting
costs.
 Search Engines
CSS is considered a clean coding technique, which means search engines won’t have to
struggle to “read” its content .
Also, using CSS will leave your website with more content than code – and content is
critical to your search engine success.
 Browser Compatibility:-
1. The recent arrival of Google® Chrome is further evidence that today’s Internet
users have more browser options than ever before, which makes browser
compatibility a major issue for your website.
2. CSS stylesheets increase your website’s adaptability and ensure that more.
2.3 Features of CSS:-
1. CSS saves time — You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.
2. Pages load faster — If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences
of that tag. So less code means faster download times.
3. Easy maintenance — To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
4. Superior styles to HTML — CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
44
2.4.3 JavaScript: -
JavaScript is a Products-oriented scripting language used to enable programmatic

access to Products within both the client application and other application.It is primarily
used in form of client-side JAVASCRIPT, implemented as an integrated component
of the web browser, allowing the development of enhanced user interfaces and dynamic
websites. Java script is a dialect of the ECMA script
 standard and is characterized as dynamic, weakly typed, prototype-based languages with
first-class functions.
 JavaScript was first developed by Netscape as an open scripting language to create
interactive web pages. JavaScript as an open language implies the it can be used by
anyone; no license is required to use JavaScript.
 JavaScript has the ability to function both as a product oriented language as well as
procedural language. Using JavaScript, you can create Products, attach methods and
properties.
 JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript . The general-purpose
core of the language has been embedded in Netscape, Internet Explorer, and other web
browsers..
3.1 History
45
JavaScript was created by Brendan Eich in 1995 during his time at Netscape
Communications. It was inspired by Java, Scheme and Self. Netscape, for a time, made
the best browser in the world and enjoyed market dominance. In late 1995, when
Microsoft cottoned-on to the competitive threat the Web posed, the Internet Explorer
project was started in an all-out attempt to wrestle control of the emerging platform from
Netscape.
The unique circumstances of the birth of the language, including:
 The aforementioned marketing ploy,
 Time-compressed initial development,
 A prejudice that development for the Web was not “serious”,
 The ubiquitous and “unbreakable” deployment environment (the Web).
The script should be included in or referenced by an HTML document for the code to be
interpreted by the browser.
1. It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.
2. The JavaScript client-side mechanism provides many advantages over traditional CGI
server-side scripts. For example, you might use JavaScript to check if the user has
entered a valid e-mail address in a form field.
3. The JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server.
4. JavaScript can be used to trap user-initiated events such as button clicks, link
navigation, and other actions that the user initiates explicitly or implicitly.
3.2 Advantages of JavaScript
1. Less server interaction — You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
2. Immediate feedback to the visitors — They don’t have to wait for a page reload to
see if they have forgotten to enter something.
3. Increased interactivity — You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
4. Richer interfaces — You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
46
3.3 Features of JavaScript
JavaScript does have some special features that make it such a popular language. The
Java Features given below are simple and easy to understand.
1. Validating User’s Input
2. Simple Client-side Calculations
3. Greater Control
4. Platform Independent
5. Handling Dates and Time
6. Generating HTML Content
7. Detecting the User’s Browser and OS
2.4.4 ES6 JavaScript
ECMAScript (ES) is a scripting language specification standardized by ECMAScript

International. It is used by applications to enable client-side scripting. Languages like
JavaScript, Jscript and ActionScript are governed by this specification. This tutorial introduces
you to ES6 implementation in JavaScript.
 ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the
standardized name for JavaScript, and version 6 is the next version after version 5, which
was released in 2011. It is a major enhancement to the JavaScript language, and adds
many more features intended to make large-scale software development easier.
47
 ECMAScript, or ES6, was published in June 2015. It was subsequently renamed to
ECMAScript 2015. Web browser support for the full language is not yet complete,
though major portions are supported. Major web browsers support some features of ES6.
However, it is possible to use software known as a transpiler to convert ES6 code into
ES5, which is better supported on most browsers.
1. Constants (const)
Finally the concept of constants has made it to JavaScript! Constants are values that can be
defined only once (per scope, scope explained below). A re-definition within the same scope
triggers an error.
 The const declaration creates a read-only reference to a value. It does not mean the
value it holds is immutable, just that the variable identifier cannot be reassigned. For
instance, in the case where the content is an object, this means the object’s contents (e.g.,
its properties) can be altered.
2. let
 In case of let keyword, the variables declared will be mutable i.e there values can be
changed. It works similar to the var keyword with some key differences like scoping
which makes it a better option as when compared to var.
 Just like const the let does not create properties of the window object when declared
globally (in the top-most scope).
3. Arrow functions
 Arrow functions(also known as ‘fat arrow functions’) are a more concise syntax for
writing function expressions.Introduced in ES6, arrow functions are definitely one of the
most impactful changes in javascript. These function expressions makes your code more
readable, more modern.
4. Template literal
 Template literals is a feature of ES6 which allows us to work with strings in a better
way as when compared to ES5 and below. By simply using template literals, we can
improve the code readability.Before ES6 we made use of ‘+’ operator whenever we
wanted to concatenate strings and also when we wanted to use a variable inside a string
which is definitely not a recommended method.Template literals use back-ticks(“) rather
than the single or double quotes we’ve used to with regular strings.
48
4.1 History :-
Marc Andreessen, founder of Netscape Communications and part of the ex-Mosaic team,
had the vision that the web needed a way to become more dynamic. Animations,
interaction and other forms of small automation should be part of the web of the future.
So the web needed a small scripting language that could interact with the DOM (which
was not set in stone as it is right now). But, and this was an important strategic call at the
time, this scripting language should not be oriented to big-shot developers and people with
experience in the software engineering side of things. Java was on the rise as well, and
Java applets were to be a reality soon. So the scripting language for the web would need
to cater to a different type of audience: designers. Indeed, the web was static. HTML was
still young and simple enough for non-developers to pick up. So whatever was to be part
of the browser to make the web more dynamic should be accessible to non-programmers.
And so the idea of Mocha was born..
4.2 Features:- ES6 includes the following new features:
1. arrows
2. classes
3. enhanced object literals
4. template strings
5. destructuring
6. default + rest + spread
7. let + const
8. iterators + for..of
4.3 Advantages:-
1. Block scoped variables
2. Classes
3. Body and method definitions
4. Promises
5. Modules
6. It is 100% backward compatible
7. It is really fast
8. It has arrow function
9. It has object oriented function.
49
2.4.5 Bootstrap:-
Bootstrap is a free and open-source CSS framework directed at responsive, mobilefirst front-
end web development. It contains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface components Bootstrap is the
sixth-most-starred project on GitHub, with more than 135,000 stars, behind freeCodeCamp and
marginally behind Vue.js framework.According to Alexa Rank, Bootstrap is in the top-2000 in
the USA while vuejs.org is in the top-7000 in the USA.
5.1 History:-
Early beginning- Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto
and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools.
Before Bootstrap, various libraries were used for interface development, which led to
inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto:
A super small group of developers and I got together to design and build a new internal tool
and saw an opportunity to do something more. Through that process, we saw ourselves build
something much more substantial than another internal tool. Months later, we ended up with
an early version of Bootstrap as a way to document and share common design patterns and
assets within the company. It was renamed from Twitter Blueprint to Bootstrap, and released
as an open source project on August 19, 2011. It has continued to be maintained by Mark Otto,
Jacob Thornton, and a small group of core developers, as well as a large community of
contributors.
50
Bootstrap 2 and 3
On January 31, 2012, Bootstrap 2 was released, which added built-in support for Glyphicons,
several new components, as well as changes to many of the existing components. This version
supports responsive web design. The next major version, Bootstrap 3, was released on August
19, 2013. It redesigned components to use flat design, and a mobile first approach.
Bootstrap 4
Mark Otto announced Bootstrap 4 on October 29, 2014. The first alpha version of Bootstrap 4
was released on August 19, 2015. The first beta version was released on 10 August 2017. Mark
suspended work on Bootstrap 3 on September 6, 2016, to free up time to work on Bootstrap 4.
Bootstrap 4 was finalized on January 18, 2018.
Significant changes include:
1. Major rewrite of the code
2. Replacing Less with Sass
3. Addition of reboot, a collection of element-specific CSS changes in a single file, based
on normalize
Bootstrap 4 supports the latest versions of the GoogleChrome, Firefox, Internet
Explorer, Opera, and Safari (except on Windows). It additionally supports back to IE9 and
the latest Firefox Extended Support Release (ESR).
Bootstrap 5
Bootstrap 5 is the upcoming version of the most popular open source front-end framework in
the world. Major changes include:
1. Dropping jQuery in 51latfo of vanilla JavaScript
2. Rewriting the grid to support columns placed outside of rows and responsive gutters
3. Migrating the documentation from Jekyll to Hugo
4. Dropping support for IE10 and IE11
5. Moving testing infrastructure from Qunit to Jasmine
51
5.2.Features:-
1 Easy to use
Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
2 Responsive features
Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops
3 Mobile-Friendly
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
4 Simple Integration
Bootstrap can be simply integrated along with distinct other platforms and frameworks, on
existing sites and new ones too and one more things you can also utilize particular elements
of Bootstrap along with your current CSS
5 Pre-styled Components
Bootstrap approaches with pre-styled components for alerts, dropdowns, nav bars, etc.
6 Customizable Bootstrap
The Bootstrap can be customized as per the designs of your project.
7 Browser compatibility
Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer,
Safari, and Opera)
52
8 Great grid system
Bootstrap is built on responsive 12-column grids, layouts and components. Whether you
need a fixed grid or a responsive, it’s only a matter of a few changes.
9 Bundled JavaScript plugins
The components such as drop down menu are made interactive with the numerous
JavaScript plugins bundled in the bootstrap package.
10 Extensive list of components
Whether you need drop down menus, pagination or alert boxes, Bootstrap has got your
covered. Some of the components pre styled are; Dropdowns, Button Groups, Navigation
Bar, Breadcrumbs, Labels & Badges, Alerts, Progress Bar, And many others.
5.3 Advantages:-
1. Fewer Cross browser bugs
2. A consistent framework that supports major of all browsers and CSS compatibility
fixes
3. Lightweight and customizable
4. Responsive structures and styles
5. Several JavaScript plugins using the jQuery
6. Good documentation and community support
7. Loads of free and professional templates, WordPress themes and plugins.
2.4.6 React JS:-
53
React (also known as React.js or ReactJS) is an open-source JavaScript library for
building user interfaces. It is maintained by Facebook and a community of individual
developers and companies.
React can be used as a base in the development of single-page or mobile applications. However,
React is only concerned with rendering data to the DOM, and so creating React applications
usually requires the use of additional libraries for state management and routing.Redux and
React Router are respective examples of such libraries.React was created by Jordan Walke, a
software engineer at Facebook, who released an early prototype of React called “FaxJS’’ He
was influenced by XHP, an HTML component library for PHP. It was first deployed on
Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf
US in May 2013
6.1 History
React Native, which enables native Android, iOS, and UWP development with React, was
announced at Facebook’s React Conf in February 2015 and open-sourced in March 2015.
The license granted hereunder will terminate, automatically and without notice, if you (or any
of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct
financial interest in, any Patent Assertion:
(i) Against Facebook or any of its subsidiaries or corporate affiliates,
(ii) Against any party if such Patent Assertion arises in whole or in part from
any software, technology, product or service of Facebook or any of its
subsidiaries or corporate affiliates
(iii) Against any party relating to the Software. [...] A “Patent Assertion” is any
lawsuit or other action alleging direct, indirect, or contributory infringement
or inducement to infringe any patent, including a cross-claim or
counterclaim.
The following month, WordPress decided to switch its Gutenberg and Calypso projects away
from React.
On September 23, 2017, Facebook announced that the following week, it would re-license
Flow, Jest, React, and Immutable.js under a standard MIT License the company stated that
React was “the foundation of a broad ecosystem of open source software for the web”, and that
they did not want to “hold back forward progress for nontechnical reasons.
6.2 Features :-
54
Currently, ReactJS gaining quick popularity as the best JavaScript framework among web
developers. It is playing an essential role in the front-end ecosystem. The important features of
ReactJS are as following.
1. JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. It is XML or HTML
like syntax used by ReactJS. This syntax is processed into JavaScript calls of React
Framework. It extends the ES6 so that HTML like text can co-exist with JavaScript react
code. It is not necessary to use JSX, but it is recommended to use in ReactJS.
2. Components
ReactJS is all about components. ReactJS application is made up of multiple components, and
each component has its own logic and controls. These components can be reusable which help
you to maintain the code when working on larger scale projects.
3. One-way Data Binding
ReactJS is designed in such a manner that follows unidirectional data flow or one-way data
binding. The benefits of one-way data binding give you better control throughout the
application. If the data flow is in another direction, then it requires additional features. It is
because components are supposed to be immutable and the data within them cannot be
changed.
55
4. Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works like a one-way
data binding. Whenever any modifications happen in the web application, the entire UI is re-
rendered in virtual DOM representation. Then it checks the difference between the previous
DOM representation and new DOM.
5. Simplicity
ReactJS uses JSX file which makes the application simple and to code as well as understand.
We know that ReactJS is a component-based approach which makes the code reusable as your
need. This makes it simple to use and learn.
6. Performance
ReactJS is known to be a great performer. This feature makes it much better than other
frameworks out there today. The reason behind this is that it manages a virtual DOM. The
DOM is a cross-platform and programming API which deals with HTML, XML or XHTML.
The DOM exists entirely in memory. Due to this, when we create a component, we did not
write directly to the DOM. Instead, we are writing virtual components that will turn into the
DOM leading to smoother and faster performance.
6.3 Advantages:-
1. It facilitates the overall process of writing components
2. It boosts productivity and facilitates further maintenance
3. It ensures faster rendering
4. It guarantees stable code
5. It is SEO friendly
6. It comes with a helpful developer toolset
6.4 Steps to Install React:-
56
Step 1:- Visual Studio Code for React on Windows
There are plenty of editors and IDEs out there to develop web applications. Depending on your
personal, project or company requirements, you can choose from a range of lightweight editors
to full-blown IDEs. Visual Studio Code is a solution in between. That’s why my
recommendation would be Visual Studio Code to start developing React applications on
Windows. The installation on a Windows machine is simple.
Step 2:- Node and NPM for React
If you are just getting started with web development, you should create a dedicated folder on
your machine to manage all your web development projects. It’s up to you to divide the folder
into subfolders. For instance, there could be a folder for React applications and another one for
plain Node.js applications. Once you have your folder for your projects, open this folder in
Visual Studio Code.
Node –version
npm —version
Step 3:- Create React – App for React on Windows
Now you can install your first node package with npm on the command line. You will install it
globally with a —g flag. Because of installing it globally, you will always have access to it on
the command line. Later on, when you install a node package for your project without the —g
flag, command line (in Visual Studio Code), type the following command to install create-react-
app
npm install —g create-react-app
create-react-app allows you to bootstrap React applications with zero-configuration. There is no
need to get involved too early in toolings with Webpack and Babel. If you are going to read
“The Road to React”, you will use create-react-app as well. It’s the simplest approach to learn
React without worrying about all the tooling around it.
Npx create-react-app my-app
Afterward, you can navigate into the project on the command line and start it with npm:
cd my-app
npm start
The command line should give you an output where you can find the application in the browser.
The default should be localhost:8080. If you are only using IE or Edge on your Windows
machine, I can recommend you to install Chrome as well to access the developer environment
and the React Developer Tools which are available as Chrome extension. On the other side, now
57
you have an advantage over the MacOS developers, because you can debug your web
applications in the Internet Explorer and Edge too.
If you just want to learn React now, you could start to read The Road to learn React. It’s a
pragmatic book which guides you step by step through building a React application from
scratch. Along the way, you will transition from JavaScript ES5 to JavaScript ES6 and you will
lots of exercises to improve your React skills.
2.5 Introduction of Backend and Database Tools
2.5.1 Node JS:- Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside of a browser. You need to remember that NodeJS is not
a framework and it’s not a programming language. Most of the people are confused and
understand it’s a framework or a programming language. We often use Node.js for building
back-end services like APIs like Web App or Mobile App. It’s used in production by large
companies such as Paypal, Uber, Netflix, Wallmart and so on.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 Node.js allows the creation of Web
servers and networking tools using JavaScript and a collection of “modules”
Networking(DNS, HTTP, TCP, TLS/SSl,or UDP), binary data.(buffers), cryptography

functions, data streams, and other core functions. Node.js modules use an API designed to
reduce the complexity of writing server applications.
1. History:-
Node.js was written initially by Ryan Dahl in 2009,about thirteen years after the introduction
of the first server-side JavaScript environment, Netscape’s Live Wire Pro Web. The initial
release supported only Linux and Mac OS X. Its development and maintenance was led by
Dahl and later sponsored by Joyent
58
Dahl criticized the limited possibilities of the most popular web server in 2009, Apache HTTP
Server, to handle a lot of concurrent connections (up to 10,000 and more) and the most common
way of creating code (sequential programming), when code either blocked the entire process
or implied multiple execution stacks in the case of simultaneous connections. Dahl
demonstrated the project at the inaugural European JSConf on 8 November 2009. Node.js
combined Google’s V8 JavaScript engine, an event loop, and a low-level
In January 2010, a package manager was introduced for the Node.js environment called the
package manager makes it easier for programmers to publish and share source code of Node.js
packages and is designed to simplify installation, updating, and uninstallation of packages.
In December 2014, Fedor Industry started io.js, a fork of Node.js. Due to the internal conflict
over Joyent’s governance, io.js was created as an open governance alternative with a separate
technical committee. Unlike Node.js, the authors planned to keep io.js up-to-date with the latest
releases of the Google V8 JavaScript engine.
2. Features:-
1. 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.
2. Very Fast — Being built on Google Chrome’s V8 JavaScript Engine, Node.js library
is very fast in code execution.
3. 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 to traditional servers which create limited
threads to handle requests.
4. No Buffering — Node.js applications never buffer any data. These applications simply
output the data in chunks.
3. Advantages:-
1. Node.js offers an Easy Scalability
One of the key advantages of Node.js is that developers find it easy to scale the applications in
horizontal as well as the vertical directions. The applications can be scaled in horizontal manner
by the addition of additional nodes to the existing system. Moreover, Node.js also offers you
59
the option of adding extra resources to the single nodes during the vertical scaling of the
application. So, it is highly scalable and provides better option than other JavaScript servers. 2
2. Easy to Learn
Since JavaScript is one of the most popular programming languages, most of the front-end
developers have a good grasp over it. It becomes much easier for them to start using the Node.js
at the backend. It is easier to learn Node.js and consumes less time to work with it.
3. Node.js is used as a Single Programming Language
Node.js offers the developers the luxury of writing the server-side applications in the
JavaScript. This allows the Node.js developers to write both the front-end as well as the back-
end web application in JavaScript using a runtime environment. And they don’t need to use
any other server-side programming language.
4. The Benefit of Fullstack JS
Node.js has been regarded as a full-stack JavaScript for serving both the client and the server-
side applications. Therefore, the advantage is that you don’t have to hire separate developers
for backend as well as the front-end development. It saves both your valuable money and time.
5. The Support of Large and Active Community
Node.js is blessed to have a large and active community of developers who keep on
continuously contributing towards its further development and improvement. In fact, the
groups of developers are well supported by the JavaScript programmers providing ready-made
and easy solutions and codes in GitHub. It is expected that the developers will initiate many
further developers in the future.
2.5.2 Express :-
60
Express is a small framework that sits on top of Node.js’s web server functionality to simplify
its APIs and add helpful new features.It makes it easier to organize your application’s
functionality with middle ware and routing; it adds helpful utilities to Node.js’s HTTP
objects;it facilitates the rendering of dynamic HTTP objects Express.js, or simply Express, is
a web application framework for Node.js , released as free and open-source under
the MITLicense. It is designed for building web applications and APIs It has been called the de
facto standard server framework for Node.jsExpress is a part of MEAN stack, a full stack
JavaScript solution used in building fast, robust, and maintainable production web applications.
1. MongoDB(Database)
2. ExpressJS(Web Framework)
3. AngularJS(Front-end Framework)
4. NodeJS(Application Server)
1. History:-
Express.js was founded by TJ Holowaychuk. The first release, according to
Express.js’s GitHub repository, was on the 22nd of May, 2010. Version 0.12 In June 2014,
rights to manage the project were acquired by StrongLoop StrongLoop was acquired by IBM
in September 2015 in January 2016, IBM announced that it would place Express.js under the
stewardship of the Node.js Foundation incubator. Express.js, or simply Express, is a web
application framework for Node.js, released as free and open-source software under
the MITLicensce. It is designed for building web applications and APIs. It has been called
the de facto standard server framework for Node.js.
The original author, TJ Holowaychuk, described it as a Sinatra-inspired server, meaning that it
is relatively minimal with many features available as plugins. Express is the back-end
component of the MEAN stack, together with the MongoDB database software
and AngularJS front-end framework. This is over simplifying it, but Express.js is
to Node.js what Ruby on Rails or Sinatra is to Ruby.
Express 3.x is a light-weight web application framework to help organize your web application
into an MVC architecture on the server side. You can use a variety of choices for your
templating language (like EJS, Jade, and Dust.js).
You can then use a database like MongoDB with Mongoose (for modeling) to provide a
backend for your Node.js application. Express.js basically helps you manage everything, from
routes, to handling requests and views.
61
2. Features:- Here are some features of express
1. Rapid Server-Side Programming
Being a Node.js framework, Express.js packages many of the commonly used Node.js
features, into functions that can be easily called anywhere on the program. As a result,
complex tasks that would otherwise take a Node developer several hundred lines and several
hours to program can easily be done by Express JS developers in just a few lines of code and
pure Node.js development.
2. Routing
Routing allows a web application to preserve web page states through their URLs. These URLs
may be shared with other users, and visiting these URLs will take users to the exact page state
that was originally shared. Node.js has a routing mechanism, but it’s a basic and rudimentary
one. Express.js offers a more advanced and efficient routing mechanism that is able to handle
highly dynamic URLs.
3. Debugging
All developers encounter bugs with every project that can cause entire applications to
malfunction, and one of the most critical tasks of developers is identifying the source of these
bugs and correcting them in the quickest possible time. Fortunately, Express.js provides an
easy debugging mechanism to allow developers to quickly pinpoint which part of the
application causes bugs.
4. Templating
Express.js provides a templating engine that allows web pages to have dynamic content by
constructing HTML templates on the server side, replacing dynamic content with their proper
values, and then sending these to the client side for rendering. In addition to enabling dynamic
content, it also takes a significant load from the client side which may have highly variable
hardware specifications, and as such, it can make applications more efficient.
5. Middleware
Express.js uses middleware to systematically arrange different function calls. A middleware
is a chunk or cluster of code that has access to a user’s request, the application’s response, and
the next middleware to be used. With such an architecture, it becomes easy for Express js
developers to add, remove, or modify various features to and from the application, giving high
scalability to the application.
3. Advantages:-
62
1. Makes Node.js web application development fast and easy.
2. Easy to configure and customize.
3 It allows you to define routes of your application based on HTTP methods and
URLs.
4 Includes various middleware modules that you can use to perform additional
tasks on request and response.
5 Easy to integrate with different template engines like Jade, Vash, EJS etc.
6 It allows you to define an error handling middleware.
2.5.3 Stripe :-
Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re
creating a subscription service, an on-demand marketplace, an e-commerce store, or a
crowdfunding platform, Stripe’s meticulously designed APIs and unmatched functionality help
you create the best possible product for your users. Millions of the world’s most innovative
technology companies are scaling faster and more efficiently by building their businesses on
Stripe. Stripe is an American technology company that allows individuals and businesses to
make and receive payments over the Internet.
1. History:-
Irish entrepreneur brothers John and Patrick Collison founded Stripe in 2010, initially using
the name In June 2010, Stripe received seed funding from Y Combinator, a start-up accelerator.
In May 2011, Stripe received a $2 million investment from venture capitalists Peter
Thiel, Sequoia Capital, and Andreessen Horowitz. Stripe launched publicly in September 2011
after an extensive private beta Less than a year after its public launch, Stripe received a $20
63
million Series B investment In March 2013, Stripe acquired chat and task-
management application Kick-off.
In 2016, Stripe was valued at over $9 billion when it raised a $150 million round. In its next
funding round in September 2018, Stripe received a $20 billion valuation while raising $245
million.
In 2019, Stripe raised an additional $100 million in a Series E round from investment firm Tiger
Global Management, boosting the payment startup’s valuation to $22.5 billion
Stripe was founded in Palo Alto, but moved to San Francisco in 2012.As of 2019, Stripe was
operating across four engineering hubs in Seattle, Dublin, San Francisco and Singapore Stripe
has its headquarters in San Francisco’s South of Market (SoMa) area.
In September 2019, Stripe raised $250 million in a new funding round to take its enterprise
value to $35 billion In February 2020 Manhattan Venture Research in New York referred to
Stripe as “ripe for an initial public offering (IPO)april 16th, Stripe announces a further
investment of $600m, from new and existing investors as an extension fundraise, on the same
terms as the Series G funding round in September.
2. Features :- Here are some features of stripe
2. Account
3. Bank
4. Balance
5. Card
6. Charge
7. Coupon
8. Customer
9. Customer subscription
10. Dispute
11. Event
3. Advantages:-
1. Process payments directly on your site without the headache of complex payment
gateways, merchant bank accounts, and PCI compliance
2. Secure interaction with Stripe servers keeps your customers’ data safe
3. seamless checkout experience within your own site means increased conversions and/or
sales
64
4. competitive pricing (in many cases cheaper)
5. better analytics and reporting
6. easier integration, setup, and maintenance
7. great support for when you need help or something doesn’t work
8. backed by former Paypal founders Peter Thiel and Elon Musk
9. don’t get charged for refunds or disputes (see new pricing changes)
2.5.4 Database Introduction:-
A database is an organized collection of data, generally stored and accessed electronically

from a computer system. Where databases are more complex they are often developed using
formal design and modelling techniques.
Often the term “database” is also used to loosely refer to any of the DBMS, the database system
or an application associated with the database.
1. Data definition – Creation, modification and removal of definitions that define the
organization of the data.
2. Update – Insertion, modification, and deletion of the actual data.
3. Retrieval – Providing information in a form directly usable or for further processing
by other applications. The retrieved data may be made available in a form basically the
same as it is stored in the database or in a new form obtained by altering or combining
existing data from the database.
4. Administration – Registering and monitoring users, enforcing data security,
monitoring performance, maintaining data integrity, dealing with concurrency control,
65
and recovering information that has been corrupted by some event such as an
unexpected system failure.
 The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON

and synchronized in realtime to every connected client. When you build cross-
platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share
one Realtime Database instance and automatically receive updates with the newest
data. Firebase is a mobile and web application 66latform which provides tools and
technology to build applications. The most popular services are Firebase Analytics,
Firebase Cloud Messaging, Firebase Auth, Realtime Database, Firebase Storage and
Firebase Hosting.
 Firebase frees developers to focus crafting fantastic user experiences. You don’t need
to manage servers. You don’t need to write APIs. Firebase is your server, your API and
your datastore, all written so generically that you can modify it to suit most needs.
1. History
Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew Lee in
2011. Envolve provided developers an API that enables the integration of online chat
functionality into their websites. After releasing the chat service, Tamplin and Lee found that
it was being used to pass application data that weren’t chat messages. Developers were using
Envolve to sync application data such as game state in real time across their users. In 2014,
Firebase launched two products. Firebase Hosting and Firebase Authentication. This positioned
the company as a mobile backend as a service.
66
1. In October 2014, Firebase was acquired by Google.
2. In October 2015, Google acquired Divshot to merge it with the Firebase team.
3. In May 2016, at Google I/O, the company’s annual developer conference, Firebase
expanded its services to become a unified platform for mobile developers. Firebase now
integrates with various other Google services, including Google Cloud
Platform, AdMob, and Google Ads to offer broader products and scale for
developers. Google Cloud Messaging.
4. In January 2017, Google acquired Fabric and Crashlytics from Twitter to add those
services to Firebase.
5. In October 2017, Firebase launched Cloud Firestore, a realtime document database as
the successor product to the original Firebase Realtime Database.
6. But, why Firebase is a good option for your Database
Firebase has some features which make it better than others Databases depending on your needs.
1. Efficient: Firebase Storage is developed to be simple, easy to understand and efficient
in the use of bandwidth.
2. Strong security: Firebase Storage has a strong way to authenticate using a declarative
security model to allow access based on filename, size, content type, and other
metadata.
3. Scalability: Firebase Storage is backed by Google Cloud Storage for petabyte scale
when your app goes viral.
4. Fast: The Firebase Storage SDK is used for save time and bandwidth for its hability to
retry the operation right where it left off.
5. Special handle for media: Firebase Storage stores your files in a Google Cloud
Storage bucket shared with the default Google App Engine app, making them
accessible through both Firebase and Google Cloud APIs.
6. Access Control: Firebase Storage has an important feature in its authentication, it
identifies the roles of the users, therefore it lets you set access controls on individual
files or groups of files, so you can make files as public or private as you want..
 Firebase Realtime Database
Firebase provides a realtime database and backend as a service. The service provides
application developers an API that allows application data to be synchronized across
clients and stored on Firebase’s cloud. The company provides client libraries that enable
67
integration with Android, iOS, JavaScript, Java, Objective-
C, Swift and Node.js applications. The database is also accessible through a REST API
and bindings for several JavaScript frameworks such
as AngularJS, React, Ember.js and Backbone.js.
 Firebase Storage
Firebase Storage provides secure file uploads and downloads for Firebase apps,
regardless of network quality. The developer can use it to store images, audio, video, or
other user-generated content. Firebase Storage is backed by Google Cloud Storage
 Firebase Hosting
Firebase Hosting is a static and dynamic web hosting service that launched on May 13,
2014. It supports hosting static files such as CSS, HTML, JavaScript and other files, as
well as support through Cloud Functions. The service delivers files over a content
delivery network (CDN) through HTTP Secure (HTTPS) and Secure Sockets
Layer encryption (SSL). Firebase partners with Fastly, a CDN..
 Firebase applied like NoSQL DB
1. The Firebase Realtime Database is a NoSQL Database which has a lot of optimizations
and features compared with most of relational databases. It includes a flexible rules to
define how the data should be structured to provide security and flexibility.
2. Firebase is a Database stored as JSON objects, which is easier to use than some SQL
databases for the way to handle the data like a tree. When you start adding data to your
database it automatically creates a node in the existing JSON structure with an associated
key.
68
“users” : {
“key_sample” : {
“about” : “here the react is best way to start.”,
“displayName” : “Juan Guerrero”,
“email” : “sample@gmail.com”,
“photoURL” : “https://www.sample.jpg”,
“providerId” : “facebook.com”,
“publicAccount” : false,
“uid” : “1234567890”
}
Avoid nesting data
When your are using NoSQL Databases you should be careful to handle a lot of
information in a inappropriate way because if you have a nested design, the iterating
through the data becomes very problematic.
Flatten data structures
The data should be separated or denormalized, because in this form it could be
efficiently downloaded in separate calls just downloading few bytes and fetching.
JSON structure
1. In computing, JavaScript Object Notation (JSON) is open-standardfile format that
uses human-readable text to transmit data objects consisting of attribute–value
pairs and array data types (or any other serializable value). It is a very
common data format used for asynchronousbrowser – server communication,
including as a replacement for XML in some AJAX-style systems.
 JSON is built on two structures:
1. A collection of name/value pairs. In various languages, this is realized as an object,
record, struct, dictionary, hash table, keyed list, or associative array.
2. An ordered list of values. In most languages, this is realized as an array, vector, list, or
sequence.
69
Firebase Cloud Storage:-
Cloud Storage is built for app developers who need to store and serve user-generated content,
such as photos or videos.Cloud Storage for Firebase is a powerful, simple, and cost-effective
object storage service built for Google scale. The Firebase SDKs for Cloud Storage add Google
security to file uploads and downloads for your Firebase apps, regardless of network quality.
You can use our SDKs to store images, audio, video, or other user-generated content. On the
server, you can use Google Cloud Storage, to access the same file.
How does it work?
The Firebase Realtime Database lets you build rich, collaborative applications by allowing
secure access to the database directly from client-side code. Data is persisted locally, and even
while offline, realtime events continue to fire, giving the end user a responsive experience.
When the device regains connection, the Realtime Database synchronizes the local data
changes with the remote updates that occurred while the client was offline, merging any
conflicts automatically.
2. Features of Firebase :- Here are list of features of firebase
1. Google Analytics for Firebase:-
Any app’s success and future strategy depend on the analytics of the app. Google
Analytics for Firebase was announced, which will give free and unlimited access to
analytics. It includes app’s behavioural analytics, attribution, and push notification
analytics and crash reporting. All this will be available and can also be combined to get
the required outputs. The developer can also get app-specific customized analytics based
on its’ users.
Also, for more specific results and analysis of data, you can import the data to Google’s
BigQuery and search in your own way. And finally, in their own words
70
2. Firebase Performance Monitoring:-
We all tend to minimize the loading time during the usage of the app.
However, our users are from various countries, have a wide variety of devices and even their
internet speed is different. So, how do we measure the app’s performance?
Well, with Firebase Performance monitoring API, you simply have to integrate the API and
voila, all’s done! You’ll get data like App’s startup time, duration of HTTP transactions, etc.
directly from the devices. You can then further classify the data based on country, device type,
and OS version.
3. Firebase Hosting — Firebase Hosting now supports Firebase functions which are going to
be popular among those who deploy their app using Firebase Hosting. They can now make use
of Firebase functions. It will also provide the SSL layer protection for free.
71
.
4. Firebase Storage-
You can now map the data in your Google cloud storage bucket to your Firebase project.
Thus, you can use the data on Google Cloud in your Firebase app.
Moreover, Firebase gives the option of choosing the location of where you
want to store your data. This highly reduces the request and response time
between your app and storage based on the location of your traffic.
5. Firebase Real-time Database-
72
Realtime database helps in building dynamic apps faster and synchronizes data with every
client in realtime. Moreover, the limit of concurrent connections has been increased from the
previous 10,000 to 100,000 connections at a time.
3. Advantages of Firebase:-
1. Real-time Database Helps to Store and Synchronize Data
The cloud-hosted NoSQL database is offered by Firebase real-time database that helps you
store and synchronize data between the clients. This indeed makes it easier for the developers
to access the data using any of the devices and helps developing collaborative feature.
2. Fast and Secured Web Hosting
The benefit of Firebase Hosting allows you to set-up a single-page, a mobile landing page, web
page or progressive web page with ease. It also helps to deliver the content rapidly anywhere.
The developers can deploy the web apps as well as static content at CDN (Content Delivery
Network).
3. Firebase Authentication
Nowadays, most of the apps have the login facility and the developer aims to simplify and
secure it better. Therefore, the support of Firebase Authentication is there to do that task with
an easy sign-in process.
It also provides identity solution for the emails, passwords and other important apps such as
Facebook, Twitter or Instagram. The Firebase UI is also flexible, customized and drop-in
dealing with the UI flow of the users. There is no compromise from the security point of view.
4. Firebase Allows the Content Storage with Ease
It has become much easier to store the user-dedicated content that includes texts, images and
videos. In fact, you can also develop the final phase of your app from prototype effortlessly
using advanced technology.
5. Developers have the Accessibility of Machine Learning
As we move on to discuss the advantages of Firebase, we also get familiar that it also provides
developers the facility of Machine Learning. This benefit is available for both Android and iOS
developers as well as experienced or newcomers.
5.5 Steps for Installing Firebase:-
Step 1: Create a Firebase project
Before you can add Firebase to your JavaScript app, you need to create a Firebase project to
connect to your app.
73
Create a Firebase project
Step 2: Register your app with Firebase
After you have a Firebase project, you can add your web app to it.
Visit Understand Firebase Projects to learn more about best practices and considerations for
adding apps to a Firebase project.
3. In the center of the Firebase console’s project overview page, click the Web icon
(plat_web) to launch the setup workflow.
If you’ve already added an app to your Firebase project, click Add app to display the
platform options.
4. Enter your app’s nickname.
This nickname is an internal, convenience identifier and is only visible to you in the
Firebase console.
5. Click Register app.
Step 3: Add Firebase SDKs and initialize Firebase
You can add any of the supported Firebase products to your app.
How you add Firebase SDKs to your app depends on whether you’ve chosen to use Firebase
Hosting for your app, what tooling you’re using with your app (like a bundler), or if you’re
configuring a Node.js app.
<body>
<!—Insert these scripts at the bottom of the HTML, but before you use any Firebase
services 
<!—Firebase App (the core Firebase SDK) is always required and must be listed first 
<script src=”/__/firebase/7.14.5/firebase-app.js”></script>
<!—If you enabled Analytics in your project, add the Firebase SDK for Analytics 
<script src=”/__/firebase/7.14.5/firebase-analytics.js”></script>
<!—Add Firebase products that you want to use 
<script src=”/__/firebase/7.14.5/firebase-auth.js”></script>
<script src=”/__/firebase/7.14.5/firebase-firestore.js”></script>
</body>
Include the entire Firebase JavaScript SDK, rather than individual SDKs (not recommended
for production apps.
74
1. Initialize Firebase in your app (no need to include your Firebase configuration object when
using reserved Hosting URLs):
<body>
<!—Previously loaded Firebase SDKs 
<!—Initialize Firebase 
<script src=”/__/firebase/init.js”></script>
</body>
Firebase configuration object
To initialize Firebase in your app, you need to provide your app’s Firebase project
configuration.
Var firebase Configuration = {
apiKey: “api-key”,
authDomain: “project-id.firebaseapp.com”,
databaseURL: “https://project-id.firebaseio.com”,
projectId: “project-id”,
storageBucket: “project-id.appspot.com”,
messagingSenderId: “sender-id”,
appId: “app-id”,
measurementId: “G-measurement-id”,
};
At any time, you can obtain your Firebase configuration object.
Firebase init
What does this initialization command do?
1. Deploy your content and hosting configuration to Firebase Hosting.
Default Hosting site Non-default Hosting site
By default, every Firebase project has free subdomains on
the web.app and firebaseapp.com domains (project-id.web.app and project-
id.firebaseapp.com).
a. Deploy to your site. Run the following command from your app’s root directory:
b. View your site at either of your default sites:
 project-id.web.app
 project-id.firebaseapp.com
75
Step 5: Access Firebase in your app
The Firebase JavaScript SDK supports the following Firebase products. Each product is
optional and can be accessed from the firebase namespace.
2.6 Comparison between Firebase and MySQl:-
Firebase MySQL
Firebase It’s a cloud service MySQL is a relational database management

Also Firebase is a NoSQL database. In
system (RDBMS).
Firebase Data stored/processed in a cloud
Firebase is suitable for real time MySQL mostly used for relational data and
applications. transactions.
Firebase is only available on GCP (Google MySQL install it anywhere and several cloud
Cloud Platform) , It is Owned by the Google providers support managed version of it.
In Firebase Any Key/Field can added easily MySQL not so flexible design-wise, New
without affecting the existing design Column insertion may affects design.
Firebase is indeed a hierarchical data Complete Workflow Control
structure: it’s really just a JSON tree in the
cloud
There is no defined way to display High Performance
hierarchical data in an ERD. It’s more
common to show a JSON tree.
Firebase has the concept of keys, which are On-Demand Scalability
the names of the nodes that you store data
under.
76
Chapter 3
DESIGN AND ARCHITECTURE
3.1 Introduction about all types of Entities or parties of project-

Entity in our project are:-
1. Woman:- the main roll of woman in this is that if she want to start a small business at a
small scale,so she can get loan, before that she has to feel the form and get register. She has to
upload all the form related to the information which is needed, that can help her to get loan and
start her business and improve her financial condition.
2. User panel:- in this panel functionality included, it is woman beneficiary such as she can
register herself, she can upload her profile, she can apply for loan according to loan criteria
3. Verification panel:- in this panel functionality based on verification team such as they can
update, verify loan document as well as user profile, they can approve or reject if any problem
occur
4. Approval panel:- functionality included in this panel such as this team can see only those
woman’s profile which are verified by verification team , they can approve, reject ,hold the
loan of any beneficiary, this team can also ask for any document from the particular user profile
5. Payment panel :- functionality included that this panel dashboard a payment department
can check the payment status of every user profile, they also have payment reminder which
automatically send payment information and also take and action if required & payment status
of every user is maintain here
6. Admin panel:- functionality included in this panel are admin can add new user , delete the
existing user, can activate the website ,can deactivate the website, & give the instruction for
form felling
3.1.1 Parties
In our project parties will play there roll such as local user /woman:, they can access them self
by filling the form according to the criteria and get them self-registered. Those woman who
want to start their business at small scale can get loan by RMK.RMK provide loan to all the
needy and poor woman, woman can also select for the loan according to the loan criteria. In
this information management system there is platform with RMK can provide directly to the
77
woman so there is no chance of getting corrupted, by getting loan woman can start their
business and can improve their family condition as well as their financial income.
3.2 Flowchart of Project
3.2.1 Activity flow diagram – Authentication activity
78
3.2.2 Activity flow diagram – Form filling and verification Activity
Start
If logged
in
False True
Women users
Form filling
Verification
If False
verified
False
True
Payment
Gateway
True
Messaging
system
Stop
79
3.2.3 Activity flow diagram – Admin Activity
Start
False Loan Request
If
accepted
True
Loan document
True
Verify
loan
True
Block the user Status checking
Handles the
payment process
Stop
80
3.3 ER diagram
State
Zip
City
code
Employment
Address
Name Type
Phone
User number
uuid
Age
User
E-R diagram with composite, multi valued and derived attributes
User name Access

User
state data
User city
User Account
Balance
uuid name
User depositor Account
81
Relationship sets with attributes
USER-UUID LOAN IP
AMOUNT
VERIFIE
D
USER-NAME USER-
STATUS
EMAIL
RMK LOAN
USER
PAYMENT
ID
USER-CITY
LOAN PAYMENT
PAYMEN
T
PAYMENT PAYMENT
STATUS AMOUNT
S
Entity Relationship Model:-
An Entity–relationship model (ER model) describes the structure of a database with the
help of a diagram, which is known as Entity Relationship Diagram (ER Diagram). An ER
model is a design or blueprint of a database that can later be implemented as a database. The
main components of E-R model are: entity set and relationship set.
82
Components of ER Diagram:-
ER Model
Entity Attribute Relationship
Key One to One
Composite One to Many
Weak Entity Mutivalued Many to One
Derived Many to Many
Components of ER Diagram
As shown in the above diagram, an ER diagram has three main components:

1. Entity
2. Attribute
3. Relationship
1. Entity:-
An entity is an object or component of data. An entity is represented as rectangle in an ER

diagram.
For example: In the following ER diagram we have two entities Student and College and
these two entities have many to one relationship as many students study in a single college.
We will read more about relationships later, for now focus on entities.
83
Student Study College
Weak Entity:-
An entity that cannot be uniquely identify by its own attributes and relies on the relationship
with another entity is called weak entity. The weak entity is represent by a double rectangle.
For example-a bank account cannot be uniquely identified without knowing the bank to
which the account belongs, so bank account is weak entity.
Bank_Account Bank
1. Attribute:-
An attribute describes the property of an entity. An attribute is represented as Oval in an
ER diagram. There are four types of attributes:
1. Key attribute
2. Composite attribute
3. Multivalued attribute
4. Derived attribute.
1. Key attribute:-
A key attribute can uniquely identify an entity from an entity set. For example, student roll
number can uniquely identify a student from a set of students. Key attribute is represented by
oval same as other attributes however the text of key attribute is underline.
84
Roll No.
Name
Student
Age
Address
2. Composite attribute:-
An attribute that is a combination of other attributes is known as composite attribute. For
example, in student entity, the student address is a composite attribute as an address is
composed of other attributes such as pin code, state, country.
Pin
User Address
Address
State
City
Address is a composite Attribute
85
3. Multivalued attribute:-
An attribute that can hold multiple values is known as multivalued attribute. It is represented
with double ovals in an ER Diagram. For example – A person can have more than one phone
numbers so the phone number attribute is multivalued.
4. Derived attribute:-
A derived attribute is one whose value is dynamic and derived from another attribute. It is
represented by dashed oval in an ER Diagram. For example – Person age is a derived
attribute as it changes over time and can be derived from another attribute (Date of birth).
ER Diagram with Multivalued and Derived Attributes:-
Age
User_Phone User_Name
Date of
Birth
User ID
User
3. Relationship
A relationship is represented by diamond shape in ER diagram, it shows the relationship
among entities. There are four types of relationships:
1. One to One
2. One to Many
3. Many to One
4. Many to Many
Common Entity Relationship Diagram Symbols
An ER diagram is a means of visualizing how the information a system produces is related.
There are five main components of an ERD:
86
 Entities, which are represented by rectangles. An entity is an objector concept about
which you want to store information.
Entity
 A weak entity is an entity that must defined by a foreign key relationship with another
entity as it cannot be uniquely identified by its own attributes alone.
Entity
 Actions, which are represented by diamond shapes, show how two entities share
information in the database.
Relationship
In some cases, entities can be self-linked. For example, employees can supervise other
employees.
87
 Attributes, which are represented by ovals. A key attribute is the unique,
distinguishing characteristic of the entity. For example, an employee's social security
number might be the employee's key attribute.
Attribute
 A multivalued attribute can have more than one value. For example, an employee
entity can have multiple skill values.
Attribute
 A derived attribute is based on another attribute. For example, an employee's monthly

salary is based on the employee's annual salary.
Attribute
88
3.4 Use Case Diagram:-
 Connecting lines, solid lines that connect attributes to show the relationships of entities
in the diagram.
89
3.5 DATA FLOW DIAGRAM
A Data Flow Diagram (DFD) is a graphical representation of the “flow” of data through
an information system. A Data Flow Diagram can also be used for the visualization of data
processing. It is common practice for designer to draw a context-level DFD is the
Data Flow Diagram Notation:
1. Rectangle
Rectangle represents external entities, which are sources or destinations of data. The
graphical symbol used in DFD is show below:
2. Ellipse
Ellipse represents processes, which take data as input, validate, and process it and
output it.
The graphical symbol used in DFD is shown below:
3. Arrow
Arrow represent the data flows, which can either be electronic data or physical items.
The graphical symbol used in DFD is shown below:
 Rules for Creating DFD

Entity names should be comprehensible without further comments. DFD is a system created
by analysts based on interviews with system users. It is determined for system developers,
on one hand, project contractor on the other, so the entity names should be adapted for model
domain or amateur users or professionals. Entity names should be general (independent, e.g.
specific individuals carrying out the activity), but should clearly specify the entity. Processes
90
should be numbered for easier mapping and referral to specific processes. The numbering is
random, however, it is necessary to maintain consistency across all DFD levels (see DFD
Hierarchy).
Level 0
DFD Level 0 is also called a Context Diagram. It’s a basic overview of the whole system
or process being analyzed or modeled. It’s designed to be an at-a-glance view, showing the
system as a single high-level process, with its relationship to external entities. It should be
easily understood by a wide audience, including stakeholders, business analysts, data
analysts and developers.
User for Auth. Login Loan Request

Admin
User.uid
Uuid Payment Data User Data
Management
Information System
(MIS) software for
Loan Form
IMOs
Payment Form
Verification Details
Successfully
User
User User
Authenticate User
Level 0 Data flow diagram
91
Level 1
The Level 0 DFD is broken down into more specific, Level 1 DFD. Level 1 DFD depicts
basic modules in the system and flow of data among various modules. Level 1 DFD also
mentions basic processes and sources of information.
 It provides a more detailed view of the Context Level Diagram.
User
Loan Dashboard
Payment
Apply for Form
Login
Authentication User Data Payment Dashboard
Level 1 Data flow diagram
92
Chapter 4
Screenshots
4.1 Sign Up- This is our first Page of Management Information System of loan. This page
consist of 4 Input box,1 checkbox and 1 Button – 1. First Name 2. Last name 3. Email
Address 4. Password , one button of signup ,if check box is selected then we can send an
notification to the email
After filling the Signup form the user will click on Signup button the data will be stored in an
object and then transferred to firebase Auth, The firebase Auth will generate the Uuid of that
every from that User can access the Website.
4.2 SignIn- The login Page consist of 1 label at the top that is Sign In and 2 input box- first one
is of Email Address that is entered at the time of Sign Up and other input box is of Password.
If user will type wrong password then alert will be shown.
After the Sign In button, there are two buttons one is for Forgot password and Don’t Have an
account? SignUp. Forgot Password functionality is yet not Implemented.
If User is new to website he/she can create the account by clicking on Sign Up button.
93
4.3 Home-
This is our first section of home page this page consist of navbar that is header of home. The
header consist of One Logo of RMK and 5 options of Web Page that are built in it and In
initially there 2 button that is – 1. Login and 2. Signup.
When women has to apply for the loan she has to firstly signUp or has to login in the website
then she can apply for loan.
Here is the example-
94
As you can see at the header of home that as she has login or signup the lohin and signup button
is disappear and new button has come that is Apply Loan button.
And in the first section of Home we have created the react-bootstrap carousel in which we have
place three different-different images inside the carousel that will be sliding at every 20 sec.
Second Section of Home-
Here In this second section we have Defined the mission of RMK and the video of RMK to see
how it work and how RMK helps the people to fulfil their needs or dreams.
We have firstly created the container inside it created the one row and the row is divided into
two column one for Mission and other is for Video frame.
This video frame is created using Youtube npm package inside this package we have passed
the video id from youtube and the video appear on the Page then we have defined the window
frame size of Youtube video.
95
Third Section of Home –
Here Third section consist of Why RMK means Why you have choose RMK for the loan and
for that we have divide the div into two part using same concept as above in Video and Mission
part.
In this we have used a react-icon package from this we have used the icons in second part and
explain it in points.
96
Fourth section of Home-
Here fourth section is of Ministry of women & child Development, we have added this section
is because the RMK is run by the Ministry of women & child Development. In this section we
have used an background image that is set by css file directly and we have overlap the contain
on the background image.
We have created the heading of this section using h1 tag of html and place an image of logo
Ministry of women & child Development and also placed an logo of Associated Organisations
of logo Ministry of women & child Development.
Fifth Section and the last section of Home –

In this last section I have created the contact us and footer menus in the home page itself contact
us section contain the details of RMK that is Phone number and email id and Address of RMK.
Footer is divided into two parts
1. Footer part section contain the Copyrights details of RMK with is full name and small intro
of RMK.
2. Second part contain the menu list of website.
97
4.4 Apply Loan-
98
This is a Webpage form for the women/user. She can apply for the loan using the Apply loan
button at the header.
4.4.1 This form consist of 3 stage and multiple input box field. The first stage fields are as
follows –
1. Employment Type
2. Enter Your Name.
3. Enter Your Email
4. Gender
5. Enter Your Number
6. Enter Your Address
7. Create password
8. Confirm Password
And one submit button at the last
Here Employment Type is an Dropdown list that consist of following options-

1. Self Employed
2. Unemployed
3. Job
4. Farmer.
 In this Page we have implemented the validation also as we can see in the image.
99
 If user will enter wrong confirm password the alert will be shown and if all the input boxes are
blank and then click on the submit button the validation message will be shown on the page.
4.4.2 Second stage of Apply Loan-
100
The second Stage of Apply Loan consist of 3 input box and One choose file button. This 3
input boxes are as follows-
1. Enter Account Number.
2. PAN card Number
3. Aadhaar Number
4. Enter Loan Amount
4. 3 Month Bank Receipt- This button is used to upload an image of Bank statement/ receipt
of last 3 months.
 As user will click on the button the windows default folder will open.
101
 If User will not select the Bank receipt Image then an alert of error message will display on
web browser.
 If user will submit the form by an empty details an validations error will be shown on web
page.
4.4.3 Third Stage of Apply Loan – The third Stage of Loan form consist of Personal Details
of women /user.
The form fields are as follows –
1. Current Income Level
2. Literacy Level
3. Total Member in Family
4. Enter your cast
5. Enter your Religion
One submit button.
Functionalities of Submit of every stage- First and second stage of submit will work to navigate
the user from one page to another page using window.location.href=”https://localhost:3000/loan”
and we have created the function that function content the local storage means as user will fill the
form of first and second stage the data will be saved into local storage and at the third stage the
102
local storage data will be retrieve and converted into object and then send into the firebase using
this firebase Package.
Here is the validation Implementation-

 If user will click on an submit button without filling the data into the input box the following
error will shown on the page.
103
4.4.4 Fourth stage of Loan- This is the final stage of loan. In this stage if user has successfully
applied for loan without any error then user will be navigated to this stage.
The user will get their Application ID and Phone Number. This Application Id is generated
using math.random() method of JavaScript. And this application Id is unique for every user
and the id is saved into database with the user data.
At the of retrieving the it will be easy to fetch the data from firebase database using Application
ID because it is store in an node as we call one item of node the particular that data will be
fetched.
4.5 Re-Payment Tracking/Track status- This module/Option is available on navbar/ header
bar of web App.
 If user is not logged in or signed in and then he/she click on Track Button of Re-payment module
he/she will be directly navigated to Sign In Page.
 If application Id will be correct or phone is not correct the alert will be shown error will be shown.
 If application ID that is enter by user doesn’t match to Application ID which is saved into database
then also can alert will be shown.
 To track the status of loan user have to filling the following details-
i. In the below Image there are 2 input box- The first input box will contain the Application ID
and second input box will contain the phone number.
104
ii. Track button- after filling the above information the user will click on Track Application button
then there are two cases as follows-
a. If user have just applied for loan then she will be able to see only the verification of loan means
she can only see the status of loan whether it is approved/ pending/reject.
b. If user has an active loan status then she will be directly navigated to payment panel where she
can pay the month payment. The monthly amount will be entered by Admin.
Track Application button will fetch the application ID of all the user from the firebase Database
and then user has entered the application Id will be matched to the existing application ID if it
is matched then user can see the status of the loan.
Application will be unique for every user if in cases Application Id is same as other user then
from phone number data will be fetched from the firebase database.
As we have an secure security mechanism using firebase Auth functionalities. To use this
functionalities I have imported the firebase npm package.
4.5.1 If user will enter the wrong Phone Number then alert will be shown.
105
4.5.2 If Application ID is wrong then alert will be shown.
106
4.5.3 Track loan status inside the Re-payment-
If user has requested for loan and he/she enter the information at Re-payment track she/he will
be navigated to the above module.
In this module there are two section-
1. First section will contain the Personal information of user such as Name, Address, phone number,
which user has entered at the time of Apply Loan form. This information is fetched from the
firebase database.
2. Second section will contain the Application ID of user form, Date means when user has filled
the form, state of user.
i. In second section there is an 3 checkbox which are not editable and this checkbox represent your
loan status whether it is approved, pending, reject.
ii. Admin will perform the action on this checkboxes form the Admin panel and form this web page
user can check their status of loan.
4.5.4 Re-payment Panel / Payment Gateway—
In this module user can pay their month payment using online payment gateway.
 We have used the stripe payment gateway and we have integrated using a node server and express
framework with firebase cloud function and database.
107
 Our payment details are saved at firebase database and as well as at stripe dashboard.
 In stripe payment we have used a stripe element will help us to identify that card number is
correct or not.
 To use above functionalities stripe provide us a secret key to which we have added into our Re-
payment panel.
 In this module of Re-pay whosoever user has to re-pay their loan monthly can pay the amount,
the amount is always be entered by Admin itself because there may be penalty or an interest of
loan.
 We have not created an fully automatic system of Re-pay because there are many different
criteria’s for Loan Re-pay of RMk in futher if they will provide us their calculation of re-payment
system we will create an fully automatic system.
 In many banks employee also manually enter the data and then user pay the loan.
 For the Re-pay we have created an form, where user can enter their details and also there is an
card strip at the below which will contain the card details.
 As soon as user will fill the correct information the money will be deducted from the user account
and transferred into stripe account and we can see at dashboard.
108
 This is a stripe dashboard in which we can see the list of user how has pay, how much they,
Date of payment. In this we can see every single information about user payment. If any
payment will fail then also here in dashboard it will display the user and Payment ID.
If user will enter the wrong card details stripe automatically change at card no. is right or not
then it will show error.
109
4.6 Dashboard-
 This is an Admin panel/Dashboard from this user can handle the whole website.
 This is an home page of Dashboard.
 We have created the dashboard using material Ui package.
 In the dashboard the chart is created by rechart npm charge and data value are set by firebase
database as data will increase the chart will automatically will grow.
 In dashboard there is an column of Recent Deposits, Recent Deposits will calculate the total
amount of whole day and of every hour using setTime and setIntervals.
 There is also an option of Recent payment section, This section will contain list of user how
has recent pay the loan amount because the firebase is a realtime database so, the list is all
update with few second.
 In last side as we have created an Drawer using material-ui Dashboard will option will contain
the home page of dashboard itself as shown in above image.
 Re-payment will contain an form and verification will contain an page from where Admin can
perform the task.
 And the integration, monthly report, year report will be integrated in further.
110
4.6.1 Re-payment Panel at Admin Site-
In this Re-payment Panel of Dashboard. It has the 4 Input box and one submit button as follows –
1. Application Id – the Admin will enter the Application ID of every user one by one.
2. Phone Number – Admin will enter the phone number.
3. Total amount – Admin will enter the Total Amount of loan
4. Left Amount – Admin will enter the how much loan amount is left currently.
5. Monthly Amount- Admin will enter the Monthly Amount to be pay.
 When Admin will click on submit button the data will be converted into object and saved into
firebase database node and this node information is fetched at the user payment Panel
4.6.2. Verification Panel at admin site –
1. This is an verification panel of Admin.
2. In this panel we have created an table using react-bootstrap package.
3. The list of user is fetched from the database inside the User node.
4. We have created the following columns –
1. Application ID- This will contain the Application ID at every user has assigned
at the time of Apply Loan.
111
2. Name – Name of User
3. State- state of user form where it belongs
4. Approve, pending, reject- There are three checkbox of every individual user
after seeing their document of Bank receipt.
Admin can perform their action on it.
5. Loan Amount – This filed consist of loan amount data that is enter by user.
6. Document- In this filed Admin will click on Bank receipt the Bank receipt
image will be downloaded from firebase storage inside the Bank receipt bucket.
And After that admin can see that Receipt.
 After seeing all the details then Admin can perform the appropriate action on Approval
,Pending, Reject
112
4.7 Contact Us –
This page is used for vistor who has any query related RMK loan system or model how it work
they can directly contact them using this form.
The information will saved at firebase and later we will retrieve on Dashboard in future.
4.7 Blog –
 We have created the blog’s the blog is an success stories of RMK user how has taken
the loan how it help them.
 The main objective to create the blog is for Ranking the web App on google because
now a days google Crawlers searches for blog because blog contain the specific
information regarding website and also matches the keyword who has been searched
most.
 For blog we have created the cards format and inside that we have shown the content
inside it.
 Every blog will contain the an individual single page with the explain’s.
113
4.8 Database Details –In our project we have used all the above functionalities, In the firebase
114
Real-time database the data is stored in JSON form so, We have created the individual nodes
for every page that will contain the respective page content.
 In our project database we have One master node (name is users) inside that node, all slab
nodes are their as Application, Contact, Payment Details, Repayment Record, Blog.
 The Application node will contain the Apply Loan details means Loan Details including
Account Number, PAN card Number, Aadhar Number etc.
 The contact node will contain the details of user who wants to contact us and that will be
displayed on Admin Dashboard.
 Payment Details node will contain the PaymentID of individual user, Name and Amount.
 Repayment Record will contain the Total amount that user have taken the loan and
Remaining Amount this both amount will be entered by Admin itself because in initial we
can’t know how much user have taken the loan and what is the interest rate is that why.
 Blog node will contain the StateName and Content, the main concept of blog is
Google SEO and that will rank our website.
 In Authentication I have used pre-build npm package of firebase auth that will
provide an particular user will the uuid that is unique for every user. Using that
uuid we can verify the user.
 I have also used firebase storage the firebase storage is contain the images that are
used in our project. In firebase storage I have created the bucket named as images/
inside at bucket images are stored.
 Connection- For the connection of project to the firebase I have used the firebase
package of npm. In this npm I have passed the configuration details of firebase that is
provided by firebase at the time of creation of project. Which is usually termed as
SDK of firebase.
After that I have imported the npm package to the Web page and used the firebase functionalities.
Here are the following Screenshot –
1. Firebase Database -
115
116
2. Firebase Authentication-
3. Firebase Storage
117
4. Cloud function-
5. Hosting –
118
CHAPTER-5
RESULT AND DISCUSSION
Our project is based on the loan management system. The reason for making this project is that
we can help those women who are unable to fulfill their needs. This project provide loans to
such women.. In user panel a women beneficiaries/SHGs can register themselves, they can
update their profiles which include account information, personal information, etc. Women
beneficiaries/SHGs can apply for loan according to loan criteria. Women beneficiaries/SHGs
can check their loan status (verified, approve, reject, and pending). In verification panel,
verification team can check, update, verify the loan documents as well as user profile and
escalate the loan file if any problem occurs. In approval panel, approval team can see only those
profiles which are verified by verification team. Approval team can approve/ reject/ hold the
loan of any beneficiary. Approval team directly asks for any document from the particular user
profile. Via this panel dashboard a payment department can check the payment status of every
user profile. Though payment reminder automatically sends by system, payment teams also
take a action.
This section provides an assessment on the result of the project based on the defines
requirements that have been mentioned earlier in the project objectives.
Qualities:-
The quality requirements of the project have been achieved. Quality check is done by the
project leader with each new implementation in the modules.
The LMS has achieved the following quality requirements:-
i. The system should have an attractive, uncluttered, simple user-interface with readable
font-size and font-style.
ii. The system must not cause any crash or freezes to the browser. There must not be any
shuttering while scrolling and the loading speed of each view are reduced to a
minimum. React greatly reduces the loading time for each section as it only loads the
parts that have been modified. Web pack provides the advantages of bundling modules
into a minified file which improves performance.
 It should be responsive on both the web browser and the mobile browsers
119
CHAPTER-6
SUMMARY
Our project is of loan management system in which we provide loans to poor women. In this,
the women who need a loan to fulfil their needs can now access directly from this website.
Within this, we have taken four types of modules which will help me to tell whether our loan
has been approved, rejected or hold. The first module we have taken inside this is the user
panel, which tells us the women beneficiaries can register themselves and they can update their
profile which include account information, personal information etc. The second module is the
verification panel, the verification team inside it checks, updates and verifies loan documents
as well as user profiles. The third module is the approval panel; the approval team only sees
the profiles that are verified by the verification team. This team approves / reject / hold the loan
of other beneficiaries. And the last module which is a payment panel, with the help of it, the
payment department can check the loan status and can also check the profile of every user. A
loan management software system manages the loan information and the store or database.
This data stored is used for cash flow information, tracking current instalment payment status,
loan servicing and other accounting tasks. To manage portfolio of loans and keep up with the
financial data necessary is the basic purpose of such system. In this the previous action or ideas
which were taken by different authors are loan promotion schemes, common eligibility norms
for one to five of loan schemes of RMK, purpose of loan, consumption of loan, rate of interest,
distribution of loan, repayment, margin, repeat loan scheme. Loan promotion schemes
providing loan to new and small organization with experience of at least six months in thrift
and credit. Common eligibility norms must be registered with a statutory body at least for last
three years on the date of application to RMK. Recoveries of the loan given to its members
earlier must be at least 90%. Purpose of loan, this organization availing loan from RMK shall
on-lend to the end beneficiaries for the following purpose income generating activities such as
setting up of small business, asset creation, transport services, etc. Consumption loan, in this
life cycle need: birth, death, education, marriage, house construction, old age, festival and other
family events etc. Loan for consumption purposes shall not be more than 1% of total amount
given by IMOs to women beneficiaries. In our project we use following technologies: such as
React JS, Firebase Database, NPM Packages, HTML5, CSS3, ES6 JavaScript, and Bootstrap.
React (also known as React.js or React JS) is a java script library for building User Interface
120
Chapter -7
CONCLUSION AND FUTURE SCOPE
In conclusion, the Loan Management System project was a success. The Loan Management
System achieved all the expected functions and quality requirements. With each
implementation, a considerable effort was made to enhance extensibility. As an outcome, the
end-product had high flexibility, scalability, modifiability and maintainability. Deployment
and maintenance will be done in the upcoming future and is outside of the scope of this project.
In total, four modules
User Panel
Verification Panel
Approval Panel
Payment Panel
 This “Management Information System (MIS) Software for IMOs” Application has been
deployed and successfully tested.
 The goals that are achieved by this software are:
 Help the needed Women to meet their requirements.
 User friendly.
 Portable and flexible for further enhancement.
FUTURE SCOPE-
1. We will give Forgot password feature by using OTP.
2. We will make an Automatic EMI generation system.
3. Improve UI experience.
4. In future we will add a payment reminder for repayment.
5. More categories with effective management
121
Chapter-8
REFERENCES
[1]. https://reactjs.org/
[2]. https://react-bootstrap.github.io/
[3]. A Smarter Way to Learn JavaScript: The new tech-assisted approach that requires half
the effort, Author- Mark Myers, Latest Edition-1st Edition
[4]. JavaScript: The Definitive Guide, Author- David Flanagan, Latest Edition- 6th edition
[5]. https://stackoverflow.com/
[6]. https://www.tutorialspoint.com/index.htm
[7]. https://www.geeksforgeeks.org/
[8]. https://www.w3schools.com/
[9]. The Road to learn React, Author- Robin Wieruch
[10]. https://firebase.google.com/docs/
[11]. Doel Sengupta, Manu Singhal, Danillo Corvalan: Getting Started with React, 4 th
edition
[12]. https://www.npmjs.com/package/package
122

Demo Projectreport

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Demo Projectreport

Uploaded by

Copyright:

Available Formats

Management Information System (MIS) Software for IMOs

A REPORT SUBMITTED IN PARTIAL FULFILLMENT

GAURAV PALIWAL HEMANT MENARIA

VARSHANG SHRIMALI BHARAT SHROTRIYA

KHUSHI GUPTA SHOBHA SARASWAT

Department of Information Technology & Engineering

Department of Information technology Engineering, Vidya Bhawan Polytechnic College,

GAURAV PALIWAL DR. ANIL MEHTA

Information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.

GAURAV PALIWAL DR. ANIL MEHTA

Information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.

GAURAV PALIWAL DR. ANIL MEHTA

of information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.

GAURAV PALIWAL DR. ANIL MEHTA

Information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.

GAURAV PALIWAL DR. ANIL MEHTA

of Information technology Engineering, Vidya Bhawan Polytechnic College, Udaipur.

GAURAV PALIWAL DR. ANIL MEHTA

3.2. Flowchart of Project 78

3.3 E-R diagram 81

3.4 Use Case Diagram 89

3.5 0 — Level DFD 91

3.5 1- Level DFD 92

4.3 Home Section 94

4.4 Apply Loan 98

4.5 Re-Payment Tracking/Tracking Status 104

4.6 Dashboard 110

4.7 Contact Us 113

4.8 Blog 114

4.9 Database Detail 116

1.1 About project ..................................................................................................................... 1

1.2 Objective of project................................................................................................…..……2

1.3 need of project...................................................................................................................... 3

1.4 Scope of Project................................................................................................................... 3

1.5 Facilities given by your project……………………………………………………….…...4

1.6 Advantages and Disadvantages……………………………………………………………4

1.7 Limitations of Project……………………………………………………………………...5

1.8 Literature review…………………………………………………………………………..6

METHODOLOGY AND TECHNOLOGY........................................................................8

2.1 Technical Platform (languages, tools, database).............................................................. 8

3.1 Introduction about all types of entity or parties of project............................................. 77

3.2 Flowchart of Project......................................................................................................... 78

3.3 ER diagram ................................................................................................................... 81

3.5 Data flow diagram ..........................................................................................................90

RESULT AND DISCUSSION…………............................................................................119

1.1 ABOUT PROJECT:-

1. In this we have an Admin Panel s

In this project we will use the following Technologies –

This Project is field of Ministry of women & child development.

1. To provide socio-economic development through multi-pronged effort.

1.3 Need of project:

1.7 Limitations of Project:-

1. Women only can take loan to fulfil their needs.

1.8 Literature review

METHODOLOGY AND TECHNOLOGY

JavaScript is a lightweight, cross-platform and interpreted scripting language. It is well-known

ECMAScript 2015 or ES2015 is a significant update to JavaScript programming language. It

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

2.1.11 Database:- Firebase

Visual Studio is an Integrated Development Environment (IDE) developed by Microsoft to

3. NpM Packages :- Node Package Manager

Software Package Manager

Metro ( Design language)