0:00
DF invoice editor for billing purposes
0:03
for client side purposes I developed in
0:05
XJS in uh ReactJS. So I'm running this
0:09
editor directly in localhost 3000. Let
0:12
me show you the source code. Uh I have
0:14
given the link you can directly purchase
0:16
the full source code. After purchasing
0:18
it you will get the source code from
0:20
Google drive. For building this we have
0:22
used quite a number of third party
0:23
libraries such as HTML to canvas JSPDF
0:27
and we have used React. As you can see
0:29
each component is divided into its own
0:31
JavaScript file here. So I'm running it
0:34
on localhost 3000 by running this
0:36
command npm run start.
0:38
Now let me go through the demo of the
0:41
editor. So once you come to this you
0:43
select the due date of the invoice. You
0:45
basically plug the invoice number all
0:48
these things. You can fill out the
0:50
client side information such as their
0:52
email address and the address
0:58
Then you add the item description, the
1:00
total number of quantity, the price. You
1:03
can add multiple items as well like
1:07
You can adjust the price accordingly.
1:09
The total will change, the subtotal,
1:11
discount, everything will automatically
1:13
change. You just need to plug the
1:15
details here. Just add the items. You
1:18
can add multiple items right here. After
1:21
you are done, you can also change the
1:23
currency as well. All the major
1:25
currencies are supported. You can even
1:26
add your own currency as well. After
1:29
that, you can even plug the tax rate,
1:31
discount rate, everything. Then click on
1:33
review invoice in the model window. You
1:35
will see the live preview of all the
1:37
information that you have plugged. And
1:40
now if you're happy, you can click the
1:41
download button. And everything, every
1:44
invoice will be exported to a PDF file
1:46
here. So now you can see you can create
1:48
unlimited PDF invoice document using
1:51
this tool that I created. It directly
1:53
runs in the browser. So no serverside
1:56
code, no back-end processing is done. It
1:59
entirely runs in the browser. It's a
2:00
single page application and uh you can
2:03
directly purchase it. The link is given
2:06
in the description. You can add multiple
2:08
items, change the client side
2:10
information. So this will save you a lot
2:12
of time because professionallook invoice
2:15
documents will be created in a matter of
2:17
seconds. So again you can create uh
2:20
multiple unlimited invoice documents. So
2:24
each and every item is shown in a
2:26
table-like structure. We have the price,
2:28
the total number of amount, subtotal,
2:30
tax, discount. Then we have the amount
2:33
due, date, billing information, the name
2:36
of the client, invoice number,
2:38
everything is generated automatically.
2:40
So definitely purchase it. It's a
2:43
overall full stack project in ReactJS.
2:46
Invoice editor for billing and client
2:49
side purposes for generating it. So it's
2:53
a single page application. It's it can
2:55
be easily be deployed as well by running
2:57
npm run build. And uh you will get to
3:01
know more about how I developed this
3:04
once you get the source code.
3:07
So definitely check out this. For
3:09
building this we have used JSPDF and
3:11
HTML to canvas which is quite a number
3:13
of very popular PDF generation
3:18
So for building the UI you use bootstrap
3:21
here. React Bootstrap for building the
3:24
user interface. So definitely check out
