00:00:00
I built this fully automated invoice
00:00:02
generator app using just Lovable and
00:00:04
Nadm. All you have to do is fill out the
00:00:07
simple form with your client's details
00:00:09
and a professional looking invoice will
00:00:11
be generated and automatically sent to
00:00:13
them via email while it is also saved to
00:00:16
Google Drive so you can access it
00:00:18
whenever you want. The craziest part,
00:00:20
most invoice generator apps charge up to
00:00:22
$20 per month and some of them have even
00:00:25
over 30 million paying users. Well, they
00:00:28
don't even have as many features as the
00:00:30
app we're going to build in this video.
00:00:31
So, make sure you watch to the end
00:00:33
because I will show you exactly how I
00:00:35
build this app step by step while
00:00:37
explaining my full thought process
00:00:39
behind everything that I do. So, by the
00:00:41
end, you're able to build similar apps
00:00:44
completely by yourself, even if you're a
00:00:46
complete beginner. So, let's get
00:00:47
started. The first thing that we have to
00:00:49
do is to actually build our interface.
00:00:51
So, we're going to come over to Lovable
00:00:52
and over here we need to write our
00:00:54
prompt. You can either write the prompt
00:00:56
yourself explaining exactly what you
00:00:57
want to lovable or you can come over to
00:00:59
judge explain what app you want to build
00:01:01
and let it create the prompt for you. So
00:01:03
I wrote I want to build an app that
00:01:05
generates invoices and automatically
00:01:07
sends them to the customer via email. I
00:01:09
will use Lovable to build the interface
00:01:11
and then it then for the back end I want
00:01:12
you to write me a prompt I can give to
00:01:14
Lovable. So it builds me a nice
00:01:16
interface that the user can insert the
00:01:17
following invoice number, customer name,
00:01:20
customer email, amount, date and
00:01:22
description. And all these need to be in
00:01:24
a nice modern-l looking interface that
00:01:26
is very userfriendly. Don't worry at all
00:01:28
about the back end. I will build it with
00:01:30
N. And we simply click on enter. And
00:01:32
boom. Tajir gave us this prompt. I will
00:01:35
simply copy it. Come back over to
00:01:37
Lovable and paste it in here. And I will
00:01:39
simply click on enter. And now Lovable
00:01:42
has started building our app for us. But
00:01:44
while it is doing that, let's start
00:01:45
building the actual backend automation.
00:01:47
So what you need to do is go over to N.
00:01:50
I will leave a link for it in the
00:01:51
description below. and we'll simply
00:01:53
click on create workflow. And this will
00:01:55
open an empty N canvas in which we will
00:01:57
build our back end. So the first thing
00:01:59
that we need to do is to simply come
00:02:01
over here and click on add first step.
00:02:02
And over here in the trigger, we will
00:02:04
search for a web hook. And that is
00:02:06
because a web hook will allow us to grab
00:02:08
all the information we give to lovable
00:02:10
in the interface that we're currently
00:02:11
building and bring it over to NN so we
00:02:14
can actually use it inside the
00:02:15
automation. So over here the only thing
00:02:17
we have to do is to come over to HTTP
00:02:20
method and change it from get to post.
00:02:22
And we're doing that so we can best grab
00:02:24
the data from Lovable. So now once we
00:02:26
did that we're literally done with the
00:02:27
web hook module. And now the only thing
00:02:29
that we have to do is to simply come
00:02:31
over here, click on this link which will
00:02:33
copy it to our clipboard and come back
00:02:34
over to Lovable which actually finished
00:02:36
making the app as you guys can see and
00:02:38
come over here to the chat and say this
00:02:40
is the web hook link from NAN integrate
00:02:43
it within the app and make sure all the
00:02:45
data we insert goes there and simply
00:02:47
paste the link and click on enter. That
00:02:49
way loable will integrate this link
00:02:51
inside the app and all the data that we
00:02:53
insert these columns will go immediately
00:02:55
to NDN. So we can actually use it to
00:02:58
generate the invoice. And Lovable just
00:02:59
finished. So let's actually test this.
00:03:01
So to test it, we need to go back to NN
00:03:03
and click on listen for test event. So
00:03:05
we can actually get the data from
00:03:07
Lovable and then come over to Lovable
00:03:09
and fill in all this information. So I
00:03:11
filled all the information in. Don't
00:03:13
worry about the way it looks, guys. We
00:03:15
obviously will make it look
00:03:16
significantly better as well. But first,
00:03:18
we need to actually make it functional
00:03:20
and then we can improve the way it
00:03:21
looks. So we'll come over here and click
00:03:23
on generate and send invoice. an invoice
00:03:26
has been sent to the customer.
00:03:27
Obviously, this is a fake message, but
00:03:29
if we go back to NN and we scroll all
00:03:31
the way down here, we can see we have
00:03:33
the invoice number, the date, the
00:03:35
customer's name, the customer's email
00:03:37
address, the description, the amount,
00:03:39
and some extra information that we will
00:03:41
not actually need for this. So, that
00:03:43
means that we have successfully
00:03:44
integrated the web hook. So, now that we
00:03:46
got the information, it's time we turn
00:03:48
it into PDF. We will do this with
00:03:50
completely free tools. So, what we need
00:03:52
to do is to come over here and click on
00:03:53
the plus icon and we'll search for HTML.
00:03:56
Click on HTML and then we'll click on
00:03:58
generate HTML template. Now, we're
00:04:01
actually using HTML because in order to
00:04:03
turn our data into a PDF, we'll actually
00:04:05
first need to turn it into HTML and then
00:04:08
we'll use another module that
00:04:09
specifically turns HTML into PDFs. You
00:04:12
will understand exactly why we're doing
00:04:13
this in a bit. But in order to use this
00:04:15
module, we will actually need some code.
00:04:18
But we're not going to be the ones that
00:04:19
are going to write the code. We're going
00:04:21
to use AI to do that. So what we're
00:04:23
going to do is go back to Judg and say,
00:04:26
"Hey, I need you to write me code in
00:04:27
HTML for an invoice that has a very
00:04:29
modern and nice design and needs to have
00:04:32
the following parameters." And over
00:04:33
here, simply pasted all the parameters
00:04:35
we had in our app. And I also said this
00:04:37
is for NA 10. So make sure you use JSON
00:04:40
in the parameters like and I pasted this
00:04:42
example which I got from coming over
00:04:45
here in the input section basically
00:04:46
taking a random value dragging and
00:04:49
dropping it inside here just so I can
00:04:51
simply copy it and then I came back and
00:04:53
paste it over here and guys I did that
00:04:55
so Tajib knows exactly how n uses values
00:04:59
inside this interface sometimes you
00:05:01
might actually not know so it's always
00:05:03
good to give an example and we'll simply
00:05:04
click on enter and guys finished writing
00:05:07
all the HTML code for us as you can see.
00:05:09
So we'll simply come over here, copy it,
00:05:11
and simply go back over to NN, delete
00:05:13
everything that we have here, and simply
00:05:15
paste in our code. And now we'll click
00:05:17
on execute step. And look at that, guys.
00:05:19
We literally have the invoice here with
00:05:21
all the information right here. You can
00:05:24
see the invoice number, the customer's
00:05:26
name, customer's email, the description,
00:05:28
and the amount over here. Now, if we
00:05:30
want to improve the way it looks, we can
00:05:32
literally tell to make it look better,
00:05:34
which is exactly what we're going to do
00:05:36
because I'm not really a big fan of
00:05:37
this. But to make mine and job easier, I
00:05:41
simply went over to Google and search
00:05:42
for invoice template. I found one that I
00:05:45
like, which is this one, and I will
00:05:46
simply download it, come back over to
00:05:48
Judge, upload it, and type. Make it look
00:05:51
more like this design. Just don't add in
00:05:53
any extra sections other than the ones
00:05:55
we already have. Just change the design
00:05:57
and click on enter. And guys, I specify
00:05:59
to only change the design because if I
00:06:01
don't, it will probably add in a lot
00:06:03
more random sections that we don't
00:06:05
actually need. So now we wait while it
00:06:07
writes a new code. And it is finished.
00:06:09
So what we're going to do is simply copy
00:06:11
it. Come back again to end. Delete all
00:06:13
the previous code we pasted and simply
00:06:15
paste this one. And to preview it, we
00:06:17
will simply come over here and click on
00:06:19
execute step. And boom. Look at that
00:06:20
guys. It literally follow the new
00:06:22
design. And I do like this one
00:06:24
significantly better. I add. Now,
00:06:26
obviously, we can improve on this, but
00:06:28
for the purpose of this video, let's say
00:06:29
that it is actually good and we actually
00:06:31
like it. So, let's go and add in the
00:06:32
next module. So, we click off here and
00:06:34
we'll come over here and click on the
00:06:36
plus icon. And now, in order to turn the
00:06:38
HTML into a PDF, we will actually use an
00:06:41
HTTP request and you will see exactly
00:06:44
how we will do this. So, in order for us
00:06:46
to be able to do this, we will actually
00:06:47
need to use an external website which is
00:06:49
called PDF Shift and is actually free to
00:06:52
use. I will also leave a link for it in
00:06:53
the description below. And the only
00:06:55
thing you have to do is to simply sign
00:06:56
up for a free account. It's very simple.
00:06:59
And then you will come over to the API
00:07:01
key section. And over here you will
00:07:03
already have an API key. You can use
00:07:05
that or if you want you can click on new
00:07:07
API key. And it will create you a new
00:07:09
API key. But before we use this API key,
00:07:12
what we're going to do is to simply come
00:07:14
down here and click on C URL. And we'll
00:07:17
simply click on copy. So we're going to
00:07:19
copy all of this code. Don't worry, this
00:07:21
will make sense in a bit. And we simply
00:07:23
come back over to NN and click on import
00:07:26
C URL and over here we will paste the
00:07:28
code we just copied and we click on
00:07:30
import. What this will do is literally
00:07:32
import all the necessary settings that
00:07:35
we need to have to use PDF shift. So we
00:07:37
don't actually have to add them
00:07:38
ourselves manually. We just have to make
00:07:40
some minor very quick adjustments. So as
00:07:42
you can see imported all of the
00:07:44
settings. So we'll scroll down to the
00:07:46
send headers over here. And guys over
00:07:48
here where you see the value and it says
00:07:50
your API key. This is where you have to
00:07:52
insert your API key. So we'll simply
00:07:55
delete this. Come back to PDF shift.
00:07:57
Copy our API key and then come back over
00:07:59
to NN and simply paste it in here. After
00:08:02
that we simply have to come over here
00:08:04
and click on add parameter. Type content
00:08:07
type and the value type
00:08:09
application/json. And then the last
00:08:11
thing we have to do is to simply scroll
00:08:13
a little bit underneath. Come back over
00:08:15
here to the body parameters in the first
00:08:17
value where you see this link. Delete
00:08:19
this link and come over here in the
00:08:21
input. Take the HTML and simply drag and
00:08:24
drop it over here. And now if we come
00:08:25
over here, click on execute step. You
00:08:27
will see that it successfully generated
00:08:29
a PDF for us. So if we click on download
00:08:32
and we open it up, you can see that it
00:08:34
is our exact invoice exactly as we
00:08:36
wanted. Here's the date, the customer
00:08:38
name, customer email, basically
00:08:40
everything. And all that was
00:08:41
automatically added. So now let's create
00:08:43
a place where we can store these
00:08:45
invoices so we can have access to them
00:08:47
whenever we want and then we will
00:08:48
automatically send them to our customer
00:08:50
via email. So we will come back over to
00:08:53
NNN and we simply click on the plus
00:08:55
icon. So now we want to actually store
00:08:57
them. So we will search for Google Drive
00:08:59
and we will select upload a file. Now
00:09:02
the first thing you need to do if you
00:09:03
have never used Google Drive is to
00:09:05
simply complete your credentials over
00:09:07
here. There are multiple videos. I will
00:09:09
leave a link to one of those in the
00:09:10
description below so you can go watch
00:09:11
it. So you select your credentials. Then
00:09:13
you select the resource you want. We
00:09:15
will leave it on file. Operation will be
00:09:17
upload. We will leave this on data. And
00:09:19
over here in the file name, what we
00:09:21
actually have to do is come over here,
00:09:23
click on the HTTP request. And now guys,
00:09:26
over here in the input data section,
00:09:28
what you will have to do is to simply
00:09:30
come over here, delete that, and you
00:09:31
will come over here to the left in the
00:09:33
binary section where we have our PDF
00:09:35
basically. And we will simply copy the
00:09:37
name of our PDF and come and paste it
00:09:39
over here. Then in the file name we can
00:09:42
name it however we want. I can say for
00:09:44
example invoice. And then over here we
00:09:46
simply need to select the drive that we
00:09:48
wanted to be uploaded. I will select my
00:09:50
drive and over here the folder that I
00:09:52
wanted to be uploaded. I will select
00:09:53
this one. And now if we come over here
00:09:55
and click on execute step you will see
00:09:57
no was executed successfully. And if we
00:09:59
go over to our Google drive you guys can
00:10:01
see over here this is our invoice and we
00:10:04
open it. Boom. We literally have our
00:10:06
invoice. So we can actually save it
00:10:08
inside our drive which is honestly
00:10:10
amazing. And if you want each invoice to
00:10:12
have a specific name in your Google
00:10:14
Drive, what you can do is simply come
00:10:15
over here again and click on schema and
00:10:17
come over here to the web hook where we
00:10:20
have all the data we gather at the start
00:10:22
and simply come over here and select
00:10:24
which one do you want. So if you want
00:10:25
the invoice number to be different each
00:10:28
time, you can simply drag and drop this
00:10:30
one over here. And now the name of it
00:10:32
will be invoice. And then you will have
00:10:34
the invoice number next to it, which is
00:10:36
something I didn't thought of before.
00:10:37
That's why I wanted to show you. So if
00:10:39
we come over here and click on execute
00:10:40
tab. And if we come back over to our
00:10:42
Google Drive, you can see that the
00:10:43
latest invoice over here says invoice.
00:10:46
And then it has the number of the
00:10:47
invoice that we just sent, which is
00:10:49
great because this way we'll actually be
00:10:51
able to store and actually track the
00:10:53
invoice that we send and know which
00:10:54
invoice is for which client and
00:10:56
everything else like that. So now it's
00:10:58
time we actually send an automated email
00:11:00
to our client with a unique custom
00:11:02
invoice we just generated. So to do that
00:11:04
we need to come back over to NN and
00:11:06
simply come over here and click on the
00:11:07
plus icon and it will search for Gmail
00:11:10
and over here we will click on send
00:11:12
message. You will again have to connect
00:11:14
your Gmail credentials. This one is
00:11:16
super simple. You just simply click on
00:11:17
sign in with Google and you will be good
00:11:19
to go. So you select that one. On
00:11:21
resource we will leave it on message.
00:11:23
Operation we will leave it on send. And
00:11:26
over here, we need to insert the email
00:11:27
of the client we want to send the email
00:11:29
to. So to do that, we'll simply come
00:11:31
over here, scroll all the way down here
00:11:34
to where we have the web hook, open it
00:11:36
up, and over here we have all the data
00:11:38
we got from the web hook. So while we
00:11:40
need the customer's email, we simply
00:11:42
come over here on the customer email.
00:11:44
Simply drag and drop it over here, and
00:11:45
we're good to go with this one. So now
00:11:47
it will be sent to the customer's email.
00:11:49
And over here, we need to select the
00:11:51
subject. So for example, I will say
00:11:53
invoice. And over here the email type we
00:11:56
need to select text. And right here we
00:11:59
have the message. So we need to type a
00:12:02
custom message. For example, I will say
00:12:04
hello. And I will drag and drop the
00:12:06
customer's name over here. So it is
00:12:08
custom. And then I will say thank you
00:12:10
for trusting us with. And then I will
00:12:12
drag and drop the service over here. So
00:12:15
basically the description. And I also
00:12:16
wrote this is your invoice for the
00:12:18
service. Hope we work together in the
00:12:20
future. Again, you get the point. You
00:12:22
can basically type whatever you want in
00:12:24
here. You can obviously customize it
00:12:26
however you want. And now what we need
00:12:27
to do in order to actually send the
00:12:29
invoice is to simply come over here to
00:12:31
Google drives inputs and come over here
00:12:33
where you see web view link and simply
00:12:36
drag this and drop this in here. And
00:12:38
guys, this is basically the link of the
00:12:40
Google Drive in which we actually have
00:12:42
our PDF which is basically the link to
00:12:44
the PDF. But one last thing we need to
00:12:46
do before we actually send the email is
00:12:48
to come down here, click on that option,
00:12:50
click on append any attribution and come
00:12:53
over here and turn this off. So we don't
00:12:55
actually have this annoying message
00:12:57
underneath where it says send by N. So
00:12:59
we remove that one. And now let's
00:13:01
execute the step. Node was executed
00:13:03
successfully. And if we go over to our
00:13:05
Gmail, you can see, hello George. Thank
00:13:07
you for trusting us with AI SAS
00:13:09
consulting. This is your invoice for the
00:13:12
service. Hope we work together in the
00:13:13
future again. And over here we have the
00:13:14
link and over here we have the PDF and
00:13:16
you can see all of the information of
00:13:18
our customer. George like George sub to
00:13:21
the channel dogmail.com. This is a very
00:13:24
nice email guys. Maybe you should listen
00:13:26
to him. So now we just finished setting
00:13:28
up the back end of our app. And now it's
00:13:29
time to improve the way it looks. So in
00:13:31
order to do that I went over to Google
00:13:33
and search for a UI I actually like. I
00:13:35
found this one which I think it looks
00:13:37
pretty nice. So I will simply download
00:13:38
it. Come back over to Lovable, upload it
00:13:41
and type implement this design into our
00:13:44
app. Don't change any of its current
00:13:46
functions. Just change the design. I
00:13:48
will simply click on enter. And guys,
00:13:50
this is very important to specify
00:13:51
because again, Lovable might actually
00:13:54
change the functionality of our app if
00:13:55
we don't tell it to don't do that. So,
00:13:57
always make sure when you're just trying
00:13:59
to improve the UI to specifically
00:14:01
mention to don't change anything else in
00:14:03
the app. So, I will let it do its magic
00:14:04
and I will be back with you once it is
00:14:06
done. And boom. Lovable implemented the
00:14:08
changes perfectly. This honestly looks
00:14:10
very good and significantly better than
00:14:12
the one we had before and it kept
00:14:14
exactly the same options exactly as we
00:14:16
wanted. And now guys, this was a very
00:14:18
fast and easy way to build this amazing
00:14:21
app. Now imagine if we actually improved
00:14:23
it even further. We could add a signup
00:14:25
section where each user would have a
00:14:27
specific account. And we could also use
00:14:29
the store data from the invoices to
00:14:31
create a custom chat that each user
00:14:34
would be able to chat basically with the
00:14:35
data of its invoices. Something like its
00:14:38
own AI agent specifically about his
00:14:41
invoices to ask questions to view
00:14:43
insights. We could even build analytics
00:14:45
dashboard to visually show them what's
00:14:47
happening exactly with their business.
00:14:48
There are literally apps that just
00:14:50
generate a simple invoice just like this
00:14:53
one. They don't even automatically send
00:14:55
it or store it anywhere and it's out
00:14:57
like $30 per month to use them and they
00:14:59
have thousands of users. Now imagine if
00:15:01
we made all the previous changes I
00:15:03
mentioned to this app. It would be
00:15:04
significantly better than all the
00:15:06
competition which with good marketing of
00:15:08
course will lead to us getting a lot of
00:15:10
users which would indeed make our app
00:15:13
worth a lot of money possibly millions
00:15:15
as well. Now, if you want to see a very
00:15:16
complex build like this, make sure to
00:15:18
type it down in the comments. And if I
00:15:20
see that a lot of you are interested, I
00:15:21
will definitely make a video creating
00:15:23
one. But now, YouTube thinks you're
00:15:25
going to enjoy this video over here
00:15:26
where I completed high paying AppGore
00:15:28
listings solely using AI. So, make sure
00:15:31
you go watch that and I will see you
00:15:32
over
