Loading video player...
Hello everyone. Hope you're doing all
right. In our today's video, I'm going
to share with you another amazing
project which is the web flow app. And
this app is really cool. And there is a
two of the features which I love most is
one is that which have that theme
customizer. You can customize the entire
theme. You can customize even the
typography. Like if you choose this
theme, the sunset glow, it will reflect
in the application. Also you can choose
like right now it's running on like if I
choose the popins as you can see the
popins is selected and either way I can
go back to the default and we are using
lot of things there is the like the
normal dashboard for the user where I'm
having now right now if I just go click
on the sign out as you can see there is
an a sign in and also a create one like
a register applied over here and we have
the home as you can see without sign in
we can't visit any pages
And this is the benefit over here. We're
using the MongoDB database and also we
are using that for the stripe payment
authentication for our subscription
method and also we are having the
cloudinary image management by which by
which we are managing the image. So
we'll go we'll go through the overview
over there after end of the overview as
well like before you can have this
entire repository and trust me it hasn't
it having everything for you people to
start with. They have a table of
contents, features, and remember the
Shopk Pro e-commerce. If you don't know
yet, just hook up to the previous video.
I'm going to also provide the link in
the description. So, you know that video
having like uh like it has everything to
start with with your e-commer e-commerce
business. So this is this is the
demographic scenario for the project
structure that we have the pages and all
the routes set up and also if you just
go through directly in that
documentation there is a very high
possibility you will understand the
project structure more than ever and
also in the description there will be
the live link so you can start you can
try about yourself with all the
features. So let's just explore a bit.
So first of all as you can see without
login we are now in the homepage we are
knowing about the about the
documentation how it's going to start if
if you click you it will just take you
through the documentation page where you
can find and clear overview how to start
and what kind of work it is doing beside
of that I'm going to share you another
thing is this that we are using next
year 16 on the project so yeah lots of
people are asking for the tutorial the
video is coming it's uh there should be
two video, one for the blog, one for the
portfolio and another of course as well
we're going to bring up that e-commerce
uh very soon. So this is coming up next
year 16.0 and also if we just explore
that next config.ts file as you can see
we are using that uh like all of the the
some of the ignore which we are
ignoring. By the way, you can use that
feature also like a cache component
true. It will work perfectly here if you
want to do it. And also the react
compiler it also will work but I'm just
keeping it uh like mute not required but
you can use that. So all the
configuration is done right there. We're
using uh the Telin CSS the latest
version here. So that you can see the
theming here which we use which we
created using the Telin CSS. As you can
see this is primarily going to work very
good and if you just go a little bit
deeper you can understand that scenario
much more often and you know the repo
going to cover almost everything. So
first of all what is the workflow right?
What what is the web flow right? So if I
just go I will just log in as an admin
account so that I want to show you what
kind of things we are having. So this is
the admin account we have and I'm going
to just log in and this every single
scenario is we're using the JWT token
and others to just configure our entire
setup. So first of all as you can see
this is the web flow I have my previous
six web flow but if I just and also is
searching and others going to working
perfectly fine. So I want to create a
new web flow right and I don't want to
go any of the because there is the four
template you can follow through then
also you can go with the quick start
guide but what I want I want to go just
from the scratch so I'm going to make
that let's say I'm going to provide a
name it your web flow right so just to
see how it's going to work so now the
web flow is created so this is my uh
dashboard right here to focus on what
kind of things is going on uh then I'm
going to just take and like uh I can
take an web hook and also I can take an
API call or I can take an schedule right
so if I took a schedule so that going to
standardize when I'm going to make the
call and then I'm going to create also
an API call right so if I go with the
fake store API so I'm going to go with
that API and there we'll try to get some
data so that's the documentation uh so
that's the product list we have okay
let's close it uh so that's the product
list right so we'll try to fetch product
from there within a proper timing. Oh, I
forget to save that one. It's not an
auto save. So, if you doesn't save it,
it will just disappear. You just need to
save it or you can also enable the auto
save. So, if you just go and come back
from anywhere right now, it will work
perfectly fine. Okay, but there is the
error because we didn't configure it,
right? So, we can pass the web hook like
that over here. So, that should be a get
method. Instead of wave hook, you can
see this is not an appropriate scenario
to use the wave hook. So we can remove
it. We will make it a schedule. So that
schedule going to enable us when we want
to make that web hook to call or that
API to call. We can configure the timing
from here. And then we can configure our
API and we can choose either it's a get
method, post method, put or delete
method like we can provide the timing
and then what we can do is that we need
to connect that together. So it's
similar like if you are having that N8N
which is a very very uh proper version
to work like that but you know we are
just trying to understand those work. So
we're going to go in a pretty decent and
normal and there is a lot of parallel
parameter is there filter switch if
else. So you can combine those data
layer together. So right now if I want
to run that let's see what's going to it
going to do. As you can see the API call
is done. So it's providing the data. If
you want to see all the data together
you can see it as you can see. And now
the step two is schedule. So you can
make a schedule when the data would be
calling. You can simple you can provide
the time. It should be similar as the
chrome job. So you can now configure the
data call where wherever you need to
feed the data. It will automatically
connect over there. And by the way this
page also responsive. You can see you
can either go from here and you can
remove from here. So everything going to
work perfectly. And then you can also
make that one as an active or inactive.
It's just up to you. You save it and
automatically it will save. You can go
to the dashboard and the similar thing
it going to provide you that. But what
is that called the professional and
others you can see the manage bailing
over here. This all are calculate.
There's a whole lot of pages right here
which we are not seeing. If you go for
the like the product we have the feature
page all the pages. The good thing is
that those entire pages is crafted. some
of the pages which is really making some
things but all the tabulous page and
also the integration how you going to
integrate and all those things as well
as going to combined with your setup for
the theming it's going to work with that
so you can see the FA API references and
also for the blog and updates so
everything is right here you can just go
by and update the pages and that would
be really provide you a good kick to
start with so we're going to create a
new account just to see uh before
creating we can see the admin dashboard
here. This is the admin dashboard from
where you can manage everything as an
admin. Now you can see you have 10
users, you have 23 workflows, four undid
messages, five executions. So you can
manage anything and everything from
here. Either if you want to delete any
user, you can update an user. So now we
have a test user, we can edit user if we
want and as well the similar parameter
we can delete user. If you're looking
forward, we can delete it. It's up to
us. So we can do it. Then we have our
paid memberships. Whoever purchased the
product, we have the paid membership and
plan type subness status. And by the
way, this also all the entire setup is
fully responsive. We have the entire
workflows according to the user and
others because admin can handle
anything, right? We can see the inactive
one, we can see the active one. Then we
have the messages because people can the
message with the admin and others
because we have the contact from. So
from there we can go and do so many
things. We have the email subscriptions
which already I have a three email which
is subscribe. We have the settings and
others to go by. So right now let's go
try to login and create a something like
a new setup. So I'm going to just create
a sign out button here and I'm going to
create a new one. Okay. And then you can
upload your image from there. But right
now I'm going to make that as a YouTube
uh let's say user. Okay. YouTube user.
And I'm going to just make a name of
YouTube@gmail.com.
I'm going to I'm going to keep it empty
because the mandatory field is that
because if you click here, you can see
what is the mandatory. So I'm going to
provide the password. Uh you can see the
password if you wanted to. Then I'm
going to create the account. You see
account created successfully. After upon
creating the account, it's going to
automatically redirecting you to the
home like the login page. So I'm going
to go by with a YouTube email uh user.
So let's say and now signing in. So now
I am in my normal flow. Now let's create
a normal workflow. I'm going to go with
the email automation and let's say
create and start building. So this is
the template it going to provide. It
going to provide with the setup how you
can start. Now you can just uh
revalidate recirculate and then you can
figure the web flow and it going to like
you can validate that one and it will
automatically start working. So this how
we going to combine you can use your
entire other database structure and all
you can do that. So now what is that
free version and others first of all
before uh entertaining on that we need
to start our web hook right so if I go
with that it should be stripe listen
that's the way book which you're running
right now so we need to run the webbook
otherwise the payment integrations will
not work perfectly so the problem is in
the free version you can create up to
six workflows only after six the button
it will be visible you can try in the
real time uh whatever the link I'm going
to provide you can try there and you can
see after six work web flow you cannot
create any other web flow. So for that
you can see that you can see uh the
update one or you can just go with the
you can see 1 to six monthly uh
execution. So there is the demo here. So
now you can go with the professional
either you can go with the business for
enterprise you need to contact with
customer support okay where so the
customer can help with that how you
going to do. So I'm going to go with
start the professional okay with the
stripe and it going to open or pop up
with the stripe integration. So I'm
going to provide a valid name here. So
42 4 to okay oops it should be 42 and
I'm going to provide a valid month here
also. So 12 34 and going to be 1 2 3
just provide a name here. Done. So now
after the payment is done, it going to
update my entire status because as I'm
going through uh to be an a professional
user so that it going to update my
category according to it. As you can see
it's verifying the payment the plan is
activated and what's included. So that's
all just to go by so that you can
understand how it going to work with
that. So right now I can have the 50 for
the plan and you can see the users
details. I can go for 50 workflows and
other execution. That's that's the
different two different thing. One is
that if you see one is the 50 workflow
and then is the 10,000 execution. So
both are different setup. So you need to
understand on that. So this is the how
you can start with that. You can now go
with your uh like the profile segment.
So from where you can update the
profile, you can edit the profile, you
can delete anything like if I YouTube
react. Okay. And then I'm going to just
you can see the email you cannot edit.
You can do other anything. Let's say uh
software
uh engineer and I'm going to go with
that reactivity.com and save the changes
and as well as we did we are changing
everything. We're good to go. So this is
a perfect blend of application which can
really trigger and trust me try to
experience all the pages. There is a
very very good setup with the pages. So
if you just look forward to it you can
have a very good overview of how those
things can done and how those things is
working. So that's things you need to
understand a bit better. So first of all
what I'm going to do as I'm running it
in my local host 3000 I'm also my stripe
uh web hook. I'm going to close it
everything. I'm going to close all. Now
what's the best we can do is that we can
now bring up like the clone setup here.
So this is the application which we're
going to use it and I'm going to show
you from like the bottom to top. So you
can do the same thing with me and we can
build it together so that there will be
no problem at all to go and start with.
So first of all as we are having that we
need to have this drive uh sorry the
MongoDB. So what I'm going to do if he
doesn't have the MongoDB you can
register the application in MongoDB and
then you can just coming over here there
those videos is right there. So I'm not
going to go and measure it. So what or
I'm going to just go and make log out
from everywhere so that it could be easy
for you to understand how the things we
can make it done. Okay, good to go. So
I'm going to close this one. So first
thing first, I'm going to go with my
let's say I'm going to open uh my
over here the GitHub desktop and I'm
going to make that uh let's say web flow
app YT. Okay, that's the application
which I want to clone. I'm going to
clone it directly from there. So right
now what is online I'm going to just
cloning right there. So you and me are
doing the same application. If you
doesn't want to do like clone it using
that GitHub uh desktop you can either uh
make that using that let's say you can
directly use your terminal to do that
you know you can just make that g clone
then you can just pass the g clone
parameter over here. What is that? This
is the one. If you just copy that and
then pass it here, it will automatically
clone in that repo because as it just
using at public either if you having the
GitHub account you can directly fork it
then it will automatically going to
upload in your GitHub repo and whenever
I'm changing you just need to need to
have the pull request and it will going
to work perfectly fine. And for the
about section I'm going to just put a
tackle over here. So that should be
webflow.react.com.
This is the live application here. So
I'm going to just provide that uh to you
so that whenever you are visiting the
repo uh you can have it right here. So
should be let's say uh webflow app.
Okayflow
later on I'm going to extract these
things. So now this is just an small
setup right there. So right now as we
are having in our local like in our repo
here. So the first thing first you need
to understand what you need to do. First
of all, as you can see, I'm going to
make a little bit more bigger so you can
see it properly. So now, first thing
first, you need to care take care about
that configuration. So this is the
MongoDB URI. So you need to have the
MongoDB setup. We have the next URL. We
have the next secret. We have the Google
client ID, Google client secret,
colinary cloud name, colinary API key,
cloudinary API secret. For the image
uploading, we need to provide this. I
just keep it in a production mode. We
need to have the stripe publishable key,
secret key, web hook, secret. Then we
need to have these four key. Stripe
professional monthly price ID, Stripe
promotional yearly price ID, monthly
price ID, business or yearly price ID.
So this we need to create. Okay. So this
is the three things which we are
requiring right now. The first command
I'm going to run that PNPM. I'm using
the PNPM. If you're using npm or doesn't
matter. It going to work perfectly for
all of the scenario. So you can go
through with any of it. And after that
I'm if I run right now it going to
provide a very very certain error
because it cannot access that MongoDB
for sure. So just run the command for
the local host 3000. No it's running.
Yeah. So application is running but we
are having error. Okay that's the
MongoDB fetching error and others it
going to have that. But now we can visit
the signin page. We can visit the create
one page. So everything is right there.
All the is in setup. So let's go to
MongoDB. I'm going to go directly login
using one of my account here. So I'm
going to use a new account to go with
that. Right. So to do that I think all
of my account I will go with the
developer. Uh okay let's see it's just
an o configuration. I think it will do.
Okay. I I believe this application also
has or may not be if it doesn't have uh
no it has. Okay. Anyway so you will not
get the gig right here. So what we can
do uh we can just uh this is our cluster
and we if you just browse the collection
let's see what we have in this database
because uh uh okay we have the blog okay
so right now what I need to do is that
to have a certain kind of scenario I
will I will try to uh login with a
separate one which doesn't have the
account I change the account so now this
one doesn't have the cluster it has but
it's resumed so I'm going to resume my
previous old cluster so uh Okay. Post
host terminate. Okay. Uh okay. What is
that? The M0 reseab version of his
backup. Okay. Uh
what is that?
That's that's pretty old. Okay. We need
to change the account right now. Okay.
We just terminate uh we did terminate
the previous cluster. So right now we
doesn't have any cluster. That's the
same thing. Once you're going to log in,
you're going to have to come here to
create the cluster. So first thing first
we're going to build a cluster here. If
we click over there now we need to
choose the location. Uh the by default
name it going to be cluster row. So you
can either keep that one or you can go
with to provide your own name if you're
looking forward to and there is a three
separate plan is right here. So what is
coming here for hourly build? One is the
flex and we are going to love to have
that free. Trust me whatever you are
having free for the 520 megaby storage
and share RAM and BCPO. So that should
be enough for you right. So if you are
looking in the production then you can
go for that and for I'm going to go with
whatever the default setup is providing
me right now. See again aller free and
let's uh I think if uh I'm near to India
I think that Mumbai is paid so I can
choose it. Uh even it will be a little
bit slower but anyway okay. So it's
still in the bahin so it's south Asian
Asian specific. So right now I'm going
to create a username. I'm going to
provide that as an admin and also as an
admin. Trust me, you can autogenerate or
make sure that you are happen to provide
a very uh perfect bend. I'm going to go
with that later on. I'm going to change
that. So, right now I have the previous
setup. So, I'm going to remove those
things. Not ready right now. I'm going
to create and before creating that one
if I add it uh I need to provide uh what
kind of uh Okay, I think I'm going to
remove those uh IP address also. Okay,
let me just remove it. Okay, I'm going
to just finish and close it right now.
Later on, I'm going to go with uh in the
cluster then I can remove those things.
Okay, now while it's loading your sample
data or creating the entire segment, you
can do two two things. First is that go
with the database and network access and
in the database we have the and there is
one thing you need to make sure that
your role should be at last admin. Okay,
if it doesn't showing as an atlast
admin, you can directly go with the
built-in role here. Okay, not no need to
there. You can just toggle through here.
You can just toggle whatever the role
you can provide. So, I'll just provide
in atlast admin. So, it can do any kind
of work right there. And then you check
your IP address list. Make sure to have
that 0000.0.0.04/4.
Otherwise you can also use your current
IP but that time you can only access
with your current address but if you
keep zero then you can address it from
uh like access it from anywhere. So
let's go back to in our cluster. So
that's a new cluster right here and also
it going to just loading some dummy data
which you can remove it later on. You
can see the simple this the data is
creating. You can just either drop it
from here and it going to automatically
remove the entire data structure. What I
recommend you to remove it to have a
fresh start whatever is providing it
going to take a bit of time. So as it's
loading right now so what we need to do
we need to find a way how we can connect
with it right. So to connect that there
is a multiple way to connect. So here
you can use the drivers which can
connect you locally. If you click that
you can connect directly locally and go
with that. But as far as uh we doesn't
have that we can go with the compost.
And as we doesn't have the compost
installed in our machine, we can just
copy that scenario. Right? So if we copy
that should be enough for us and it
going to work perfectly. So I copy it.
Let's go over here and paste it right
here. Now we need to manipulate several
setup. First of all, you can see we put
the user as an admin and also the
password as an admin. Try to keep that
user and password autogenerated either a
very simple not so sophistic not so
complicated because if it's very
complicated that one cannot read that so
make sure to remove everything and then
put that admin and after that over here
you can do two separate uh scenario
first of all you can provide like you
need to provide a question mark here so
that's the question mark I provide and
then you need to go the retrie and
majority and app name cluster
zero so better to provide that then you
can provide the app name so like it
could be your collection name so I'm
going to make that as web flow right so
that web flow app so that we can
understand that is the combination where
we going to hit and connect our
application so if you can see here in
the browse collection where the
collection is right now it going to
create the collection name as the web
flow and then it going to provide the
data layer I think again we try to
remove that It's still loading. So it
will later on like you can remove it uh
one at a time because right now it's uh
still loading. So it going to take a bit
of time to remove that but let's skip
it. So whatever it is that so that that
is the one setup right so we're going to
go directly from the setup and then we
need also to have that next occ
we're going to just make that open SSL
open SSL ran 64. So that's the uh okay
no not like that 6432
I believe need to provide okay no really
let's see what's the command is I think
the full command it will be this one
open SSL B 64-B 64 32-bit so that could
be the scenario I'm going to I'm going
to also like uh offer there I'm going to
put that command so that you can have it
and you can generate any secret if
you're looking forward to so right now
I'm going to copy that so let's click
Copy it here then just pass it. So this
is our next al secret. Then we need to
have two separate configuration here.
One is that to have that Google client
ID and Google client secret because we
are using the Google ooth. You just need
to if you are already did that shop pro
e-commerce application. You know how to
configure that. It's very easy to do. So
I'm going to go with that. I believe you
know how to do that. So let's just go
with the sign up procedure. I'm going to
go with that. Let's say I'm going to go
with my name. So let's say if it can
loged in.
Okay. No atgmail.com.
I'm going to go with the role and I'm
going to go with the password.
Okay. Let's try to create a new user. If
my database is all right, it should uh
start. Yeah. Okay. I think it's it's
cool. It's really cool. It's it's just a
single time. It didn't make a mistake.
Didn't make a mistake. So let's see if
it's coming. Yeah, that's the web flow
and that's the user. If I go directly in
my user, we have that I have my email
password also hashing the password and
everything is working within the next
application which is the next JS 13 uh
sorry 16.0 uh 16.1. So you know
everything working perfectly fine
running with a vast majority setup of
APIs. So this is all the APIs right here
which having the admin API, O API,
contact API, newsletters. So everything
is right here all of the things. But if
you are feeling the some of that you are
missing something then what I recommend
you to go to upgrade where you can find
not so much prices there. Even if this
price is seeming that is high for you,
let me know in the comments. I will
reduce it for you. Trust me. And by the
way, you can also directly go in my
account right here just to provide that
you can uh get member over there. You
can also support my channel and trust me
if you're still with me, subscribe the
channel and please to like the video. It
will be a lot and lot help for me and I
really appreciate that for you. So that
you can do if you're looking forward to
but if you're not looking forward to you
can directly go with that. If you're
like me, a coding geek or developer,
want to build everything by yourself,
you can just clone that or and then
smash it. Okay, right now, as you can
see, we have the free account. Let's see
if we can click any web uh like create
any web flow. So, I'm going to make that
one. Let's say API data call. Okay, so
let's create that web flow just to see
if it's working or not. You can explain
uh you can go through with every single
setup. So, I'm going to go with the
schedule uh schedule call and I'm going
to go with the API call. This is my
favorite one. So, let's save it and we
can just connect that two together and
then I'm going to go my API to bring
back my API. So, let's see. Uh I'm going
to put that which going to be a get
method. I can make a schedule. I'm going
to just save the configuration here.
Okay. Why? Why it's just gone? It was
connected, right? So, save. If I hit
run, it will automatically fetch all the
product directly from that API. Okay,
working perfectly. If I validate, it's
validating. I can export the data. You
can see the JSON data is just exported
from there. So, I can just uh open that.
You can see all the JSON data just
coming up from there. And then also I
can import the entire setup if I'm
looking forward to just to go on by. I
can activate, deactivate, I can change
the theme. Okay, I didn't I didn't talk
about that. I can change the theme right
now. Everything is there. Nothing
missing at all. You can have the entire
setup right now. You can change any of
the uh like any of the API to change the
language or you can go with the reset
with default. The default value going be
appearing right here. Now, how we can
get our admin, right? To do to get our
first admin, we need to manipulate the
database because this is our first
admin, right? Later on admin can assign
admin and other users. So we're going to
update in the MongoDB and whenever we
update let's see if it's reflecting or
not. Uh as you can see that is
reflecting. It just updated
automatically in the database structure
and working perfectly fine. So now what
we need to do we can upgrade our plan.
Even we are admin we need to work with
that upgrading the plan. If you are
looking forward that no admin doesn't
need you can do that. So what we can do
right here we need to create an
application for this one. So create an
account. So should be webflow app and
then for dashyt I'm going to create an
application because we need to create a
certain kind of scenario which need to
be provide in a very good scenario. So
the first thing first provide a time and
also we need to have that uh setup for
that. As you can see, we can directly go
in the settings or or we can go Yeah,
from the settings, we can go with the
API keys. We make sure don't share those
API secret key to anybody. So, if you
click on generate, okay, uh I I need to
receive an email for that to start with
that. So, let's see. Uh it's is provide
the confirmation email. So, let's just
loged in with that and I will get my
confirmation email. Where is my account?
This is the one. So let's just log in.
Okay, got that. So now I need to provide
that confirmation confirmation
tab. So done. Now as you see untitled.
So I'm going to provide the name as
that. Let's say it should be uh webflow
webflow app YT. Now I need to copy this
name. You see the cloud name. I need to
copy the cloud name. That would be my
cloud name here. Then I need to copy my
API key. That would be my API key. The
most important I need to also copy that
secret key and make sure doesn't share
it with anybody and don't use that
actual key I'm using because later on
I'm going to remove it. So when we did
that now if I go directly in my
application let's just see I want to
change my uh profile picture right? So I
can add it from here. I will upload an
image. So let's just go in the downloads
and can upload an image. Let's say
uploading enemy. Uh it's less than 5
mgaby. So it cannot upload. So I'm going
to go with the AI bubble and I can
upload it right here. Okay. Now it's
uploading and then save images and
automatically it just uploaded and even
when you reload it will be there and you
can see your asset, you can see your
folders. There is no folder structure
right there. You can see oh it's there.
So if you click in the web flow it going
to showcase your setup. You see this is
the one which you're having right now.
So this is very simple. Let's go in our
application here. I'm going to skip
everything for the stripe payment
integration and directly go to the
sandbox. So we need to clear up. We need
to have several things from there. We
need to have the publishable. You need
to have the secret. We need so there is
seven things too. I'm skipping. If you
know how to grab these four, you can
also do that too. So from there as you
can see we are now in web flow
application. First and foremost, I'm
going to go and bring back our API keys.
So, let's click on developers. Let's
click on the API keys. We should have to
get two API keys. One is the publishable
key. Another is the secret. Later on, we
will receive the web hook. Now, where
these two this key here for the monthly
pricing ID and others from where we can
grab it. This is very important. We need
to have that. we'll go with our product
catalog here and from there we can
create the product right so in that
product it going to create those
scenario or also we can uh I think also
we can go with the pricing tables to
generate uh and make those things done
and I'm going to just share with you the
previous setup so let's say stripe and
I'm going to try to change my account
with my previous balance so that I will
let you show that how it going to
structurize so let's just go and bring
back that web uh webflow application and
from there if I go directly in the setup
of the products what we are talking
about right now. So that should be the
product catalog and as you can see we
have the planner. So this is the old
products we can create right we have the
business plan we have the in the
business plan we have the two pricing
setup right so the same thing it going
to work also here uh whenever we're
going to create these two setup so right
let's create the pricing table uh now
the pricing table okay keep it like that
all products I'm going to create that so
that should be let's say I'm going to
keep the same name as it is so that
should be the business plan
Okay,
business plan. So, should be a recurring
and I'm going to just provide a $10 or
yeah $20 just to provide that. So,
monthly 20 and more pricing options and
that should be monthly and that should
be yearly and yearly should be 200.
Right? So, one is the monthly, one is
the yearly. Okay? So, save and also this
one add product. Right? So, this is the
business plan which we having right now.
So business plan have what we did we
have only one plan okay one year uh okay
year is saved but other is not saved so
I'm going to go with the monthly another
one I'm going to create uh that should
create the two plan together right
that's how it going to work so I'm going
to edit the product uh business plan
pricing uh add another pricing
so
monthly should be 20 Okay.
And yearly should be 200.
I hope this will work. Update the
product. So we should have yeah per year
two. So now if we click here uh we
should be able to get so this is the
business plan and this is the log. Okay
cool. So now from here if we you can see
monthly 20 yearly 200. So if I go and
copy the price ID. Now what we need to
have that stripe professional monthly we
place that and also here stripe
professional yearly copy the price ID
the similar setup place it that's it now
we need to get the wave hook to grab the
wave hook uh I'm going to I'm going to
remove this one I think so and you can
create another pricing here so that
should be uh okay not like that you can
go in the product catalog now as the
business plan you can create the another
plan which is the uh professional plan
Like so the business plan business
yearly uh professional yearly so this is
the professional okay
you can rename that so the business plan
professional yeah so this is the
business so I can
cut it
anyway I'm going to keep it the same for
both of that you can either customize
and you can do your product in a very
decent way the way you are looking
forward to but for me I think this will
do the good things for us. So now what I
need to do I need to make that stripe uh
stripe login. So I need to login this
stripe. So enter and make sure whenever
you are trying to loged in that you are
in the same account which you can see uh
okay it's provide me the digit for to uh
the verification. Let's just go grab my
account verification code and I'm going
to go with this. I'm just uh hiding it.
I don't want you to show you my entire
email. So forgive me for that. So I'm
going to copy that and paste it here.
Okay. Everything is looking perfect.
Okay. Now as you can see from there I
need to choose. I'm not in the web flow.
So I can switch my application. I want
to go with the web flow YT. So whatever
application we are locked in need to
match otherwise the web flow the web
hook it will not match entirely. Okay.
Allow access. Good to go. Access is
allowed. Access granted. So right now
what we can do we can make that stripe
uh listen uh stripe listen and as you
can see if I just check in our API our
stripe web hook is right here API and
then directly over there we have the web
hook where is the web hook oh
it doesn't have we have a stripe web
hook okay that will not work because as
you can see API for/ /stripe
for slash webbook. So this the one which
we need to copy. So I'm going to just
copy that and over here in that I will
pass. Okay, this one is the good one.
This is right there. So hit uh okay not
there you need to keep it here and
enter. After entering it will provide
you a code as you can see that's the
code is for us just to provide that
stripe secret. It's saved. Now I'm going
to go over here. Let's try to go with
that upgrade the plan and let's see what
it going to do and how it going to work.
Let's go with the professional pay with
stripe. So we're going to go with the
monthly plan and now it's going to
provide. Okay, it just passing that
there. So means it going to work
perfectly. Believe so. 1 2 3 1 2 3 and
provide the name blah blah blah. Done.
So now what it going to do? it going to
go and make the plan for the $20 per
yearly uh sorry per month and then if
you want to upgrade you can update it
yearly. Okay, it's payment is success
continue to dashboard and you need to uh
it will update for sure as you can see
now over here in the transaction we
should be able to see our transaction
for the subscription and that is working
from which email and what kind of plan
and every details is right there. So
this is looking good. So now we have the
setup done. Our entire segment is
working. Even if we go directly in our
admin dashboard, we should be able to
see the admin dashboard. So we have one
user act, one active workflow. So
everything is working perfectly aligned
together. But how we can deploy it,
right? We have everything running
locally. How we can deploy and running
that wave hook in real time. So we need
to maximize those scenario. So what I'm
going to do I'm going to go in my versel
here. Uh okay. So versel right now as
you can see I'm going to I'm going to
also upload some changes which uh okay
there is no much changes only the env
which no need to pass there. So whatever
the env is right there we can uh do it
manually. So I'm going to go create add
a new project right there and we can
find the top project which will be
webflow app yt. So we can just go and
make import that and I'm going to before
passing there we need to make uh make
sure another thing is that I'm going to
just close everything and there we need
to make sure that our application like
PNPM build like it's going to build in
proper way so there is no error
everything is working fine and as you
can see right here uh we have a very
good structurable things you see we have
the server count static component
dynamic component especially uh our API
going to in dynamic because it's going
to wait for but most of the pages are
static. You can see most of the pages
are static but API uh could be dynamic
on that. So four now we need to make
sure to provide that environment
variable. Right now what I'm going to do
I'm going to just copy that entire
segment. I'm I'm going to skip that next
URL. I'm going to just comment it and
I'm going to select everything. Okay.
And once you select everything if you
just make paste everything it will
ignore that comment. So uh make sure to
have that uh like the client ID client
secret from there for the Google
otherwise the Google uh login it will
not work. Okay. So right now what it
going to do it going to start uh
building the setup deployment is on the
queue because my uh whole dashboard is
having a very like more than 200 project
is right there. So getting a little bit
asleep here. So now we're going to
provide a bit of time while it's
uploading and then we're going to
configure our web hook there. Okay. So
the setup is done. We can continue to
our dashboard. Then we will find one
assign link web hook app yel.app.
So this is the link where application
going to work. If I go try to sign in,
remember we have that our account which
is that snore@gmail.com
and we can use our password and let's
see if it's working or not in our real
time. Let's see what's happening. It
going to take a bit of time before
making the caching and other setup.
Okay, everything is working. So now as
you can see this looks pretty cool. So
now we're going to try to assign a new
account just to see and before you
fundamentally uh just go alone by I want
you to copy that then I want you to go
over here and from the developers I want
to choose that to make is that web hooks
right and from there we can add the
destination here and from the
destination we can select whatever the
web hook method we are using. So let's
say web hook. So that's the uh subscribe
uh subscribe here. Uh subscription it
will not make a deal here but the web
hook going to do. So in the web hook
let's see what kind of actions which we
are taking. Check out session completed.
So we're going to go the customer
subscription created. So this we need to
copy. So check out session uh we can
find that completed one action need to
be done. then check out because
subscriber can update it their accounts.
So this should be created and that
should be updated.
So whenever those action going to work
the web hook going to call and also
check out subscription customer
subscription deleted that method going
to also need to be triggered and then
invoice payment succeed because we can
create the invoices. So right now let's
see invoice payment succeed and also we
can provide an integration layer
whenever the invoice payment is failed.
So we need to also choose that the
failed method and then any method we use
more no this is the method the way books
going to handle together to create the
subscription plan and others. So I think
we are good to go. Okay. Uh not so
anyway. So right now what I'm going to
do I'm going to go hit continuous and
then I'm going to use my waybook
endpoint the endpoint going to be and
I'm really sorry if you are finding my
uh visuals like my voice is getting a
little bit regional tone because I'm
from the Bangl I'm from Bangladesh so it
going to connect with that so I'm really
sorry for that if you're feeling that so
from here I'm going to use my endpoint
and then create the destination so this
is the destination here I need to copy
this one this is the uh web hook key
which we need to update in our like say
we're going to go in our uh settings
over here and from the settings I'm
going to go with the environment
variables and from the environment
variables remember the web hook secrets
so uh stripe web hook secrets so I'm
going to just edit that and I'm going to
replace that one I'm going to remove
this I'm going to pass it that one and
hit save after save you need to redo
redeploy your application or if you're
having any changes you can redeploy it
again and now we need to provide a bit
of time to finish the deployment
otherwise we cannot refactor over here.
So what is deploying? We can sign up
with another application. Let's say it
going to be test uh user and test
atgmail.com
and then I'm going to do that create
account. Okay. Password mismatch. So I
think
password mismatch again. Oh my god.
Really?
Okay,
now I think it should work.
What's the password I put?
Okay.
Uh, anything we missing?
Uh, let's see. So, this the Barcel app.
So, if I go with that, let's say I'm
going to go with the zone door. Let's
say zone atgmail.com.
Okay.
Okay,
let's create. Okay. Uh, some glitches
was there. But I think uh yeah, I forgot
to make the console log. It should not
be an problem there because this user is
not there. So, it should not be a
problem. If it's there, it going to
provide an error for sure. So, I think
this is just a glitch. So, if you if
you're finding that also in the real
time in real sector, let me know in the
comments. So let's go in the free. I'm
going to update my plan. So I believe my
application is already updated. So right
now if you go to create the start
professional let's try oh the planning
which okay uh you need to change that uh
typing here from the uh that page
otherwise it going the model is having
that old prices which you need to update
that. I think these things you can do
very well. Okay. So after subscription
is done. So now you can see we should be
able to have the two subscription here
right now. So if we just close it, we
can uh see the transactions here. Let's
go in the web hook. Okay, still it's
running. So after having that we should
be having a okay
there is another problem which we need
to configure because as you can see next
URL if we just go by in our where we
used that uh in the web hook. So process
env next to the URL and this is the
stripe create. This is the stripe create
and this two. So let's go in our web
hook. Uh web hook and in the web hook I
believe we are doing some manual
adjustment that's why it cannot read
that. So when the payment is done where
we are heading
okay
we are handling that. So yeah that
should not be so what we need to do we
need to provide that next URL in our uh
segment here. So if you go in our
settings and from the settings again
that environment variables because
remember we we copied everything but
next URL is not there. So should be
let's just go uh next out URL we're
going to just uh provide our URL here
because it just take taken by in our
local host. So
uh okay
let's just update this one. So this is
the one it should be.
So that would be the value. Okay. And I
believe it going to work.
So success URL next URL. Okay.
Next URL. So now if you just redeploy it
again and just uh use it in a proper
way, it going to work perfectly. So
trust me it will work. We tested it
before and it will not compel anything.
So right now you can go through the
entire application structure. You can
find the tuning. You can also like if
you're missing anything in there, let me
know in the comments. I'm going to try
to support you regarding on that. If you
also get any the upgrade plan like you
purchase that code, if you're having any
issue, let me know in the comments. But
I believe you're going to have almost uh
pretty much having to make sure
everything is done properly from there.
Just follow through it. So you're going
to have a better idea how to build up
the application in a proper way, how to
structurize the application in a proper
way and how to make those payment setup
in a very very cool and easy manner. So
all the best. I think you should be able
to do that by yourself as I really love
these two cool feature and I believe you
you people should take it and use it in
proper way. So, I believe you can do it
and all the best and I'm going to see
you in our next
🚀 Build a Complete Visual Workflow Automation Builder with Next.js 16! In this FREE tutorial, learn how to build and deploy a production-ready workflow automation app similar to Zapier or n8n. I'll show you the entire setup from scratch including environment configuration and Vercel deployment! 🎯 IMPORTANT LINKS: 📂 GitHub Repository (FREE): https://github.com/noorjsdivs/webflow-app-yt 🌐 Live Demo: https://webflow.reactbd.com ☕ Support & Get Complete Code: https://buymeacoffee.com/reactbd/e/455916 💬 Got questions? Drop them below! 👍 Like if this helped you! 🔔 Subscribe for more full-stack tutorials! 🔧 TECH STACK: ✅ Next.js 15 (App Router & Server Components) ✅ React 19 & TypeScript ✅ TailwindCSS v4 ✅ React Flow (@xyflow/react) - Drag & Drop ✅ NextAuth.js v4 - Authentication ✅ MongoDB & Mongoose ✅ Zustand State Management ✅ Stripe Integration (Payment) ✅ Cloudinary (Image Upload) ✅ Vercel Deployment 🎯 FEATURES YOU'LL BUILD: • Drag & Drop Visual Workflow Builder • User Authentication (Email + Google OAuth) • Real-time Workflow Validation • MongoDB Database Integration • Workflow Execution Engine • Export/Import Workflows (JSON) • Responsive Design (Mobile-friendly) • Admin Dashboard • Subscription Management with Stripe • Dark/Light Theme 📚 ENVIRONMENT SETUP GUIDE: I'll show you exactly how to get: • MongoDB Connection String (FREE Atlas tier) • NextAuth Secret Generation • Google OAuth Client ID & Secret • Cloudinary API Keys • Stripe API Keys • Vercel Environment Variables 🚀 DEPLOYMENT COVERED: • Vercel Project Setup • Environment Variables Configuration • MongoDB Atlas Production Setup • Custom Domain Configuration • OAuth Redirect URL Updates 🎓 WHAT YOU'LL LEARN: • Next.js 15 App Router & Server Actions • React Flow for Visual Programming • MongoDB Schema Design • NextAuth.js Authentication Flow • API Route Protection • TypeScript Best Practices • Zustand State Management • TailwindCSS v4 Styling • Production Deployment Workflow 📖 PREREQUISITES: • Basic React/Next.js knowledge • Understanding of TypeScript • Node.js installed on your machine 🔗 USEFUL RESOURCES: MongoDB Atlas: https://cloud.mongodb.com Google Cloud Console: https://console.cloud.google.com Vercel: https://vercel.com NextAuth.js Docs: https://next-auth.js.org React Flow Docs: https://reactflow.dev 💬 COMMUNITY: Questions? Drop them in the comments! Found this helpful? Like & Subscribe for more! 🏷️ TAGS: #nextjs #mongodb #reactflow #webdevelopment #typescript #vercel #tutorial #nextauth #automation #saas 📺 More Tutorials Coming: • Real-time Chat App with Next.js • E-commerce with Stripe & Next.js • AI SaaS Application Tutorial 🔔 Subscribe for weekly full-stack tutorials! ⚡ This project is FREE and open source! Star the repo if you find it useful! ⭐ GitHub: https://github.com/noorjsdivs/webflow-app-yt © 2025 ReactBD - Built with ❤️ by Noor Mohammad