0:00
Uh hello guys in this uh video I'll show
0:02
you a nextjs invoice PDF editor and
0:06
generator that I developed directly in
0:08
the browser. So with the help of this
0:10
editor you will be able to generate your
0:12
invoice documents for your com company
0:14
or your billing purposes. So this is
0:16
developed entirely inside the nextjs.
0:19
This is a full directory structure of
0:20
the project. Each component is divided
0:23
into its appropriate typescript file
0:25
here. If you need this source code, I
0:28
have given the link in the description.
0:29
You can directly purchase the full
0:31
source code. So, we are using the latest
0:33
version of next as you can see. And for
0:35
building this, we are using quite a
0:37
number of third party libraries which is
0:39
JSPDF HTML to canvas as you can see.
0:43
Now, let me show you the demo of the
0:45
application. Now, we are running this
0:47
locally here as you can see. So, once
0:49
you launch the application, you can
0:55
one such invoice I have created right
0:57
here. So you can put your own logo
0:58
company logo such as client information
1:01
such as email address, address. Then you
1:04
have the table where you will define all
1:06
the items such as quantity, price,
1:09
everything. So this is the bill. You can
1:11
basically export this to a PDF file by
1:14
clicking the download PDF button. So
1:16
this will export the invoice to a PDF
1:19
document. So really easy. You can see
1:21
that. So it basically constructed this
1:23
PDF document for you and you can create
1:26
your own P invoice document. Just fill
1:29
out the information all these necessary
1:31
information. You can even upload your
1:33
own logo as well. Just
1:36
upload your own image. Select the logo.
1:40
Then provide company name such as
1:42
address, GST, phone number, email
1:45
address. Then the client information,
1:47
client name, address, email address. We
1:50
define these items as well and simply
1:53
click generate invoice. So now you will
1:56
see the logo is also been added right
1:58
here and this in this easy way you can
2:01
create this invoice documents directly
2:03
in the browser. It's a single page
2:05
application. It directly happens all the
2:08
processing happens directly in the
2:10
browser. There is no back end. It's a
2:12
single page application inside NexJS.
2:16
So as you can see the logo is also
2:18
exported here. You can put your own
2:21
company logo. This is the invoice which
2:27
So it's a professional looking editor
2:29
that I developed in nextJS. Once you get
2:31
the source code, you will be able to
2:33
modify the source code or add additional
2:36
features on top of it as well. As you
2:38
can see all the source code is given. So
2:42
I've given the link you can directly
2:43
purchase it. So this is actually coded
2:48
and we are using this HTML to canvas and
2:50
JSPDF library. JSPDF is a PDF generation
2:54
library and HTML to canvas is library
2:57
used to take screenshots in JavaScript.
3:00
So these are the libraries that we use
3:02
for this project. It's uh and we are
3:06
running it locally as you can see. After
3:08
you purchase it, you simply open the
3:10
command line and then simply type npm
3:16
So this will start the local development
3:18
server. You can even deploy the
3:19
application really easily as well. So
3:22
this is the application PDF invoice
3:24
generator and editor.
3:27
So if you need uh I have given the link
3:30
you can directly purchase it.
