Building an AI-Powered SaaS with Lovable, Perplexity API, Stripe & Supabase (Step-by-Step Guide)
Description
🤝 JOIN THE NEXT LIVE BUILD:
Join me and lets build projects together!: https://discord.com/invite/vZxn6wZrDD
💡 NEED PERSONALIZED HELP?
Book a 1-on-1 consultation: https://cal.com/lukasmargerie/60min
SUMMARY:
Hey everyone! In today’s video, I’m building a SaaS platform using AI—leveraging Lovable, Perplexity API, Supabase, and Stripe to create a tool that helps content creators find relevant online communities.
🔹 What You’ll Learn:
Using Lovable to generate an AI-powered app
Integrating Perplexity API for community discovery
Adding user authentication with Supabase
Setting up payments with Stripe
Deploying the project using GitHub & Netlify
This project showcases AI + no-code development in action, making it easier than ever to build functional SaaS products. If you're into AI automation, web development, or launching digital products, you’ll find this tutorial valuable!
💬 Have questions or feedback? Drop a comment below—I’d love to hear your thoughts!
TIMESTAMPS:
00:00 – Intro & Why I Built This
01:50 – Setting Up Lovable & Perplexity API
05:27 – Generating Parsed Results with Perplexity AI
09:05 – Adding Authentication with Supabase
12:57 – Integrating Stripe for Payments
20:14 – Hosting & Deploying with Netlify
35:28 – Final Thoughts & Next Steps
🛠️ TOOLS USED:
Lovable: https://lovable.dev/?via=lukas
Screenstudio: https://screenstudio.lemonsqueezy.com/?aff=8vBGv
Want to join our next live build session? Join our Discord community and be part of the process! https://discord.com/invite/vZxn6wZrDD
#ux #webdesign #design #figma #aitools #LovableDev
#Framer #NoCode #WebDesign #Stripe #AI #Supabase #UXDesign #Netlify
Join me and lets build projects together!: https://discord.com/invite/vZxn6wZrDD
💡 NEED PERSONALIZED HELP?
Book a 1-on-1 consultation: https://cal.com/lukasmargerie/60min
SUMMARY:
Hey everyone! In today’s video, I’m building a SaaS platform using AI—leveraging Lovable, Perplexity API, Supabase, and Stripe to create a tool that helps content creators find relevant online communities.
🔹 What You’ll Learn:
Using Lovable to generate an AI-powered app
Integrating Perplexity API for community discovery
Adding user authentication with Supabase
Setting up payments with Stripe
Deploying the project using GitHub & Netlify
This project showcases AI + no-code development in action, making it easier than ever to build functional SaaS products. If you're into AI automation, web development, or launching digital products, you’ll find this tutorial valuable!
💬 Have questions or feedback? Drop a comment below—I’d love to hear your thoughts!
TIMESTAMPS:
00:00 – Intro & Why I Built This
01:50 – Setting Up Lovable & Perplexity API
05:27 – Generating Parsed Results with Perplexity AI
09:05 – Adding Authentication with Supabase
12:57 – Integrating Stripe for Payments
20:14 – Hosting & Deploying with Netlify
35:28 – Final Thoughts & Next Steps
🛠️ TOOLS USED:
Lovable: https://lovable.dev/?via=lukas
Screenstudio: https://screenstudio.lemonsqueezy.com/?aff=8vBGv
Want to join our next live build session? Join our Discord community and be part of the process! https://discord.com/invite/vZxn6wZrDD
#ux #webdesign #design #figma #aitools #LovableDev
#Framer #NoCode #WebDesign #Stripe #AI #Supabase #UXDesign #Netlify
Summary
Building an AI-Powered SaaS Platform: The Ultimate Step-by-Step Guide
In this comprehensive tutorial, Lukas demonstrates how to build a fully functional AI-powered SaaS platform from scratch using a combination of cutting-edge tools and technologies. The video walks viewers through creating a "Community Hunter" application that helps content creators discover relevant online communities to share their content.
The tutorial begins with Lukas leveraging Lovable, a no-code AI development platform, to design the application's user interface and core functionality. He implements the Perplexity API to power the community search feature, enabling users to find relevant Reddit forums, Discord servers, and Facebook groups based on their content topics. Throughout the process, Lukas demonstrates effective prompt engineering techniques to refine the AI's responses and improve the search functionality.
Next, the video covers implementing user authentication with Supabase, allowing users to create accounts and securely log in to the application. Lukas shows how to set up database tables, configure authentication flows, and integrate the login/registration system seamlessly into the application.
The tutorial then progresses to monetization, as Lukas implements Stripe payment processing to transform the project into a revenue-generating SaaS business. He creates a product in Stripe's dashboard, sets up the payment form, and integrates it into the user registration flow.
Finally, Lukas demonstrates the deployment process, pushing the codebase to GitHub and using Netlify to host the application with a custom domain. This provides viewers with a complete end-to-end workflow from concept to live product.
Throughout the video, Lukas troubleshoots common issues and provides practical solutions, making this tutorial valuable for developers of all skill levels interested in AI-powered application development, no-code tools, and modern web technologies. Whether you're looking to build your own SaaS product or simply want to understand how these technologies work together, this step-by-step guide offers actionable insights into creating professional applications with minimal coding required.
Transcript
0:00
hey everyone welcome to today's video my
0:02
name is Lucas and today what we're going
0:03
to be doing is we're going to be
0:04
building a SAS with AI specifically with
0:09
lovable and yeah if you don't know about
0:12
me I've been posting YouTube videos on a
0:14
daily basis for the past five or six
0:18
months I would say and um every time I
0:21
post a video I mean I started off with
0:23
posting videos and started getting a few
0:25
viewers like maybe 10 viewers and 50
0:27
viewers and 100 then I started sharing
0:30
them to different places like uh to
0:33
different communities different Reddit
0:35
um channels uh different Discord servers
0:39
different people in in in different
0:41
chats um right so this kind of like over
0:45
the past few weeks I've been sharing
0:48
them to more and more places and I think
0:51
I want to create something that you know
0:55
allows me to discover more places that I
0:57
can um Bas basically use to share my my
1:02
my videos right so yeah today we're
1:04
going to be creating something using an
1:07
integration from lovable to perplexity
1:10
right so I have a perplexity API with
1:12
three bucks inside just to test out
1:14
right now and if you go here to these uh
1:18
Integrations you see you have native
1:19
Integrations you have verified ones and
1:22
you have UNF unverified ones I've tried
1:25
mapbox I've tried fir crawl and I want
1:27
to try perplexity today so basically
1:31
um let's say you give a certain topic
1:34
right let's say that this video today is
1:36
actually about um me building a lovable
1:40
uh app and um so me giving that topic
1:44
and then getting a a result of different
1:48
uh communities that I can share this
1:49
video with and how many people are in
1:51
this community maybe that won't be
1:53
possible possible for now but uh have
1:56
something like that right not only this
1:58
we're going to have some user authentic
1:59
indication so people can register or
2:02
sign in to view this specific app and um
2:07
maybe a stripe integration at the end
2:09
let's see how far we get to uh with this
2:11
video so if that's something interesting
2:13
for you guys please stick around and
2:15
let's get started so I'm going to chat
2:18
GPT and basically I said so I actually
2:19
want to make an app that allows me to
2:21
write about a specific topic then the
2:23
app can use perplexity to give me
2:25
results of Reddit servers Discord
2:26
servers and circle communities and more
2:28
communities that I can join to OTE my
2:30
content and talk to members I want the
2:33
app to use perplexity to help me find
2:34
results as I have an API key so I want
2:36
you to help me with prompting level to
2:38
build this please use the following
2:40
guide to structure so I basically sent
2:43
them this little guide here and remember
2:47
start step by step and they'll give
2:48
extremely non prompts so got it here's a
2:50
first step bystep prompt to start
2:52
building your level app well Begin by
2:54
defining the core functionality and then
2:57
retrieving relative communities using
2:59
perplex
3:00
so um you are building an AI powered app
3:05
that helps content creators find
3:07
relevant online communities to engage
3:12
with you're building an AI powered app
3:15
that helps content creators find
3:16
relative online community okay so task
3:19
develop a function that takes a user's
3:21
topics input and fetches relative
3:23
relative service Discord service and
3:25
circle Community using the perplexity
3:28
APA so step-by-step instructions accept
3:32
a text input user perplexity API okay so
3:35
let's just do this expected output a
3:38
Json object containing category commun
3:41
linked on this is really interesting to
3:43
use chat jpt to prompt for lovable so
3:46
let's just try to go back to our main
3:49
lovable space
3:54
and go like this and let's see how this
3:57
works so I've basically just added the
3:59
prompt
4:00
and see um what it
4:03
creates so the it has finished
4:07
generating so it says I'm excited to
4:09
build this AI power Community finder app
4:12
for conduct creators this project
4:13
resonates with the minimalist elegant
4:16
design so oh okay whatever drawing
4:18
inspiration from Apple's design language
4:20
or also I don't really care for the
4:22
first version I'll Implement a
4:23
minimalist hero section with a clear
4:26
purpose
4:27
statement a sophisticated search input
4:30
with smooth smooth animations beautiful
4:32
results display with platform specific
4:36
styling subtle loading States and
4:39
transitions responsive design okay so
4:42
this is all designed so Community Hunter
4:44
AI application is now ready with a clean
4:46
minimalist design and let's user search
4:49
for re commic cross what's next refine
4:52
and customize so I don't think it
4:54
implemented
4:55
any API from perplexity because it's I
4:59
didn't give it any information first off
5:02
and it's not asking for any API key here
5:07
so we have find your audience discover
5:08
the perfect communities for your content
5:10
enter a topic to find relevant
5:12
communities across Reddit Discord and
5:14
circle where your content will resonate
5:16
so let's put um
5:20
lovable lovable dodev right let's search
5:24
this and it's searching and it's
5:26
probably going to give me dummy content
5:30
so we have lovable. Dev
5:33
enthusiasts and if I click on this it
5:35
takes
5:40
me to this which is not really real
5:44
right um I could go to one of these so I
5:48
can go
5:49
lovable.
5:53
Dev
5:55
and click on this and this community is
5:58
not found right there is The Lovable
6:01
Community but not lovable. Dev so I need
6:05
an AI to kind
6:07
of understand what it's you know
6:10
understand
6:12
the uh input from the user right and
6:17
kind
6:18
of you know use its knowledge to to
6:21
create the results right so we're going
6:22
to refresh this and I'm going to create
6:24
a new prompt in tra PT that kind of
6:28
reflects what I'm trying to you know do
6:30
here so I've written down here please
6:33
create a prompt to thank lovable for the
6:35
gener generat result but there's no
6:37
perplexity API integration and I'd like
6:39
perplexity to help to actually research
6:42
and display Real
6:43
Results based on the
6:47
user
6:49
input so let's just click on enter so
6:53
here's the next step in prompting nobl
6:55
so thank you for generating the initial
6:58
version of the function it correct
6:59
structures the user input and formats
7:01
the output however I'd like
7:03
to adjust the approach instead of a
7:06
simulated perplexed API I want the app
7:08
to actually use perplexity for research
7:10
and fetch Real Time new mod functions to
7:14
take the user topic and send a request
7:17
to find app should return results from
7:19
the P such
7:21
as so I'm going to I'm going to remove
7:24
the circle one other n communties
7:28
that okay Community name platform a
7:30
short Dr Link or relevant discussion
7:33
link additional notes if complexity
7:35
response is unclear refine the search
7:37
query okay so let's just copy
7:41
this and let's remove the next steps in
7:45
the
7:49
bottom additional
7:51
notes I can leave that let's remove the
7:54
circle thing like I
7:56
said and let's click on enter and I
7:59
would like for lovable to maybe ask me
8:03
for my API or create a field here where
8:07
I can actually paste in my API and it
8:10
would work like that so let's just see
8:13
this would be like the first kind of
8:15
challenge to tackle here okay so now we
8:18
can actually go ahead and see what they
8:20
generate so I'll implement the
8:22
integration okay I've integrated the
8:24
perplexity API so we can see here set
8:27
API key uh to fet realtime Community
8:30
results based on user topics the app now
8:32
includes an API key management system
8:35
that securely stores the key in local
8:37
storage proper error handling and
8:40
improved UI components to display the
8:43
results so you have this comment thing
8:46
refractor into smaller okay so we don't
8:49
really need that um but basically this
8:52
is just to
8:56
refactor um certain files in your in the
8:59
in the code in the back end okay so I
9:02
did that and I'm not going to do this
9:03
again because it's not really necessary
9:05
so I'm just going to publish this and
9:07
what I'm going to do is I'm going to use
9:09
this publish page as a type of you know
9:12
demo page to kind of test out this API
9:14
key integration and to test out the
9:17
search option to see if it's actually
9:19
working so let's just do this let's open
9:22
it up here and right we have it up here
9:25
it's nice and opened right so let's go
9:28
ahead and add our AP I key so I'm
9:31
getting it from here copied it it's down
9:33
under here so I'm not going to show you
9:34
because it's like a secret key so I'm
9:37
going to go ahead and go back here set
9:40
API
9:41
key
9:43
and save key okay and now what we're
9:47
going to do is we're going to do lovable
9:50
dodev
9:53
search and it's searching and it's going
9:55
to take its
9:57
time and it says fail to parse
10:00
communities from API response so let's
10:02
try another keyword
10:03
like
10:05
uh
10:08
rattlesnakes I don't know random but or
10:11
let's try framer not
10:14
rattlesnakes so let's try
10:16
framer and if it doesn't work okay works
10:19
for framer but it doesn't work
10:21
for so framer on
10:26
Reddit okay so these are are just just
10:30
taking me
10:31
to okay so this one
10:34
works frer Comm framer Discord frame
10:38
community so it's kind of the same
10:41
one Bowie
10:45
Community free Discord plugin for framer
10:48
turns visitors into
10:51
customers okay so this is not really a
10:54
good
10:55
one and this one framer on Reddit it's
10:58
not really working okay so
11:00
it's it's still you
11:10
know so let's put like
11:19
alligators interesting and now I'm going
11:22
to go here
11:23
and refresh
11:26
this and we still don't have any thing
11:30
here with the usage
11:32
interestingly um but yeah Le it works
11:36
for framer let's see if web flow works
11:38
for
11:43
webflow so yeah just works for
11:47
framer
11:51
interestingly okay now it doesn't work
11:53
at
11:58
all okay so this is strange we we can go
12:02
back to lovable and see so types move to
12:06
okay so let's go back
12:11
here the app now includes an API key
12:14
management system the security stores
12:16
the key proper air handling involved
12:18
okay
12:20
so filter parts commun can I copy
12:25
this I can just get this
12:30
um and I'm going to bring this here I am
12:34
getting this
12:37
error um I'm getting this
12:41
error if I
12:44
search
12:46
for
12:48
specific
12:50
topics I am using the correct API
12:56
key press send okay so now I basically
13:01
it basically said that it's fixed the
13:03
error by improving the parsing of
13:05
responses from the perplexity
13:07
API so more robust Json extraction using
13:11
multiple reject patterns and I don't
13:13
know what this is but I'm cues to learn
13:16
more so reject patterns are regular
13:21
expression regular expression so reg X I
13:24
would say it's pronounced probably so
13:31
I guess it's something with the
13:33
communication um but it's interesting
13:36
maybe you can read more in this doc so
13:39
let me just close that and go back so it
13:41
it uh it used multiple of these rejects
13:44
or reex patterns an alternative parsing
13:47
method if the primary one fails and
13:50
manual extraction approach better
13:52
console logging so I did upload this and
13:54
I searched for lovable. deev and
13:57
basically it is working but there are
14:00
repetitive you know things that are
14:01
repetitive right it's showing twice here
14:04
and this one is already being shown in
14:06
the beginning and it's only showing
14:08
Reddit so I can go here and visit this
14:12
this this community doesn't have any
14:14
post yet okay we are getting something
14:17
right all in development this doesn't
14:20
exist and this one probably does exist
14:23
but it's pretty big 34k I mean that's
14:27
good that's good um
14:29
so it's getting better but now let's
14:32
just solve this issue
14:36
of let's first solve one issue so right
14:40
now we're getting
14:41
repeated so right now we are getting
14:46
repeated results please
14:51
limit the
14:54
results for one per
14:57
Community right I was let's say that
14:59
that's a good first Next Step because we
15:02
don't want to give it too many things to
15:04
solve at once I would say and uh let's
15:07
just try to get that solved first okay
15:11
so now it says I've updated the code to
15:13
remove duplicate communities by adding a
15:15
remove duplicate communities helper
15:16
function this function creates a unique
15:19
key for each Community Based on its
15:21
platform and name awesome that's cool so
15:24
right now I refreshed I added lovable.
15:27
deev again and we are getting just one
15:30
but we're just getting Reddit
15:31
communities and um you know only Reddit
15:36
communities so uh I'm going to say
15:39
perfect that fix
15:42
worked
15:44
now uh I am only getting Reddit
15:49
[Music]
15:51
communities I would like a minimum of
15:56
five Reddit communities
16:00
and five
16:02
Discord
16:04
communities and five Facebook
16:08
communities let's just put it like
16:11
that uh five Facebook communities no
16:15
this
16:17
actually five what was the first one
16:19
that we added before it was Circle
16:23
and yeah no
16:25
Circle let's just do it like that
16:31
now let's click on enter and see where
16:34
that comes out so the the code now
16:37
request a minimum of five communities
16:38
each from Reddit Discord and Facebook so
16:41
I did it again and now I do get more
16:44
communities maybe some of these aren't
16:46
even reals like we have Reddit
16:49
sln so I mean no code might be a good
16:52
place for example right we have about
16:55
59k but no what it doesn't exist right
17:00
so I want to first before I I go and
17:03
like fix these I just want to make sure
17:06
that we have these different categories
17:08
so I do not see Discord or
17:15
Facebook please create a uh tabs on the
17:21
top uh uh please T please create
17:26
category tabs
17:30
to toggle
17:32
between
17:34
different
17:36
results
17:38
between between the results of each
17:45
category
17:47
and I do not see Discord or
17:50
Facebook categories or results please
17:54
create category tabs to tle between the
17:57
um
17:59
the between the different categories and
18:04
their
18:06
results so let's just click enter so now
18:10
it does seem to work now we get these
18:12
different category tabs but there's no
18:15
information being parsed and I don't
18:17
know what the problem is but um I'm
18:19
going to go ahead and ask lovable again
18:22
and before I did you know before that
18:24
happened um there was like this white
18:26
screen very strange um and gave me this
18:29
error that I basically just
18:30
screenshotted and added to the to the
18:33
chat and it fixed the error by replacing
18:36
the unavailable Discord icon so some
18:38
type of
18:39
Icon uh issue but I think it was deeper
18:43
than that honestly there was some
18:46
build
18:49
um build error okay anyways so I'm going
18:53
to have to ask lovable or command it to
18:56
you know par results or give me results
19:00
for Discord and for the other category
19:03
which is Facebook
19:05
so I am only getting results for for not
19:11
lovable for
19:13
Reddit can you please provide me results
19:20
for Discord and
19:25
Facebook Facebook groups
19:29
so let's just write it as simple as that
19:31
see
19:32
what uh is being generated now I tried
19:36
with a different keyword it's giving me
19:38
you know nice different results here but
19:41
still nothing for Discord or for
19:43
Facebook and I'm you know I've updated
19:47
this again and again but still nothing
19:50
and another fun fact is that I went back
19:52
to perplexity and I see that the API key
19:55
has been used I my $3 is now down to2
19:59
296 I can refresh again and see if there
20:02
was another change still 296 so I've
20:05
used four cents right so um okay with
20:09
that being said let's go ahead and see
20:13
here refractor so I am
20:17
still
20:20
please parse
20:23
results for
20:25
Discord groups and Facebook
20:30
groups under each of these two
20:36
categories there are no results but I
20:41
need five for each please
20:45
use the
20:48
perplexity API to not
20:53
only get Reddit
20:56
results but also for Discord and
21:01
Facebook
21:04
groups
21:05
okay so now we're starting to get
21:07
different results but as you can see
21:09
they are a little bit
21:12
strange
21:17
and it's not portrayed correctly as you
21:21
can see here so we need to find a way to
21:24
do this correctly and what I did is I
21:27
just just took a screenshot and that's
21:29
lovable so the Json response from the
21:33
perplexity API isn't being properly
21:34
parsed and displayed Community cards are
21:37
showing the raw Json structure rather
21:38
than format community so let's fix this
21:41
issue in the parsing logic so we need
21:44
some type of parsing logic all right so
21:46
I've published this now again and we can
21:49
just refresh this page again to just try
21:52
it out and see if that structuring has
21:55
been fixed that layout structure for the
21:57
results
21:59
and I'm choosing framer
22:02
again and if we scroll down okay it's
22:05
looking good framer Learners so if I
22:08
visit this this is not
22:11
found this is also not found okay so
22:15
none of these com communities are found
22:19
I want to see Discord framer
22:21
Community okay so this one actually
22:24
works so framer users framer Pro tips
22:28
invite invalid so the these are invite
22:31
links but there's only one that really
22:34
works so this is going to take time to
22:38
actually build
22:40
and and actually
22:43
make work framers points so I guess this
22:46
is not really like framer the app but
22:49
like something more of
22:54
a so okay
22:58
so I do believe that the first one
23:02
seemed to work in most of
23:04
them let's try with lovable.
23:13
Dev and I mean it's not perfect
23:16
obviously as you can see these don't
23:18
even have a
23:21
link but
23:23
uh what we can do is we can already try
23:26
to integrate super base to add something
23:28
type of log to this right
23:30
so let's add super
23:35
base
23:37
for um or actually let's not add let's
23:41
add some authentication so I'm going to
23:43
go here to super base connect a project
23:46
and I'm going to create a new project
23:47
and this is going to be
23:49
called let's call it like I don't know
23:53
um Community
23:54
search
23:56
Community search right and we can put a
23:59
database
24:03
password something like that and we're
24:06
in the East so let's put
24:09
this and let's create this new
24:13
project and let's save this just in
24:16
case let's go back to lovable super base
24:19
and let's go Community search simple as
24:22
that very easy integration and let's
24:24
just connect this so please connect my
24:26
super based project Community search
24:28
sech and with this once it's connected
24:31
we can go ahead and start so your app is
24:33
now connected you can now work with a
24:35
fully featured backend and add powerful
24:37
featur so so we can add user accounts
24:40
and logins store and use real data add
24:43
Advanced features like Edge functions so
24:46
add features like AI endpoints email
24:48
notifications and scheduled tasks so
24:51
let's go ahead and let's add user
24:57
authentication um
24:59
the user should be able to
25:04
register and or log
25:07
in so that would be like the first step
25:09
for this user
25:11
authentication so lovable does create
25:15
some things here uh create profiles
25:18
table to store so we have some different
25:21
things here set up role level create
25:23
policy to allow users to read their own
25:25
profile um so this this like some type
25:29
of SQL data I believe it is and it's
25:32
creating some tables inside of super
25:36
base so I executed it so SQL already
25:41
executed uh please run it so now it says
25:44
I've implemented a complete
25:45
authentication system with both
25:47
registration and login functionality so
25:49
let's test that out let's um go ahead
25:51
and basically you can see the users here
25:54
so it gives you like a good overview of
25:56
that we don't have any because we don't
25:57
have any users but I'm going to go ahead
26:00
and publish this so update and move our
26:05
preview link here and now it's going to
26:07
be updated in a couple seconds and once
26:11
that is updated here on the right now
26:14
I'm going to go
26:16
refresh and it's probably going to take
26:18
me to this authentication yes so I can
26:20
log in here I can't because I'm just
26:23
going to put some you know random thing
26:25
and you know I can't sign in because
26:29
invalid login credential so I got to
26:32
sign up and when I sign up I'm just
26:34
going to put in my my
26:37
email and then put some type of
26:41
password and sign
26:44
up and then I'm going to get an email
26:46
with that verification so as you can see
26:49
right here you can confirm your email
26:53
and this doesn't really work like this
26:55
because it's not already hosted so this
26:57
is something to EXP expect but let's
26:58
just close this and go back to here and
27:02
then what we can do is we can just you
27:04
know refresh this and attempt to sign in
27:08
with that email
27:10
address and
27:14
uh yeah boom we're basically signed in
27:18
so that would that's like the first step
27:20
of authentication and if we were to go
27:22
here and refresh this you can see my
27:26
user id my email um and my providers and
27:29
when this was created and the last sign
27:31
in right so that's pretty cool to see
27:34
here in super base now the next thing
27:37
that I want to do is add stripe for
27:38
payment so I'm going to click on this
27:41
and um on the you know here on the side
27:43
what I'm going to do is I'm going to
27:44
close this straty PT and this prompted
27:46
engineering thing and this over here and
27:49
I'm going to go to my stripe.com and log
27:51
in and basically I already have a stripe
27:55
account I sell digital products online I
27:57
sell courses online so I already have a
28:00
uh you know dashboard but what I'm going
28:02
to do is I'm going to create a new
28:04
product and in this case I'm creating a
28:06
new Sandbox um environment here so that
28:09
I can create a new product so under
28:10
product
28:11
catalog uh I can go create a products
28:15
and I'm going to call this uh Community
28:17
search right Community
28:19
search um the place to go to search for
28:26
communities for your
28:29
content right we can add some type of
28:32
image in this case let's just add some
28:35
YouTube thumb thumbnail of
28:37
mine
28:39
or uh where is it so what we can do is
28:43
we can yeah do some YouTube thumbnail
28:46
like
28:48
this
28:50
and we want something one off 20 bucks
28:54
40 bucks include tax and Price Auto
28:59
yes so what we can do unit quantity so
29:03
add
29:05
product right and then we have this
29:09
product and we can click on this we have
29:10
a specific product ID and I believe we
29:13
have a price ID
29:15
too um but let's just go back
29:19
into uh yeah into here and I'll help you
29:22
add a stripe payments
29:24
so to your application since involves
29:27
handling sensitive payment data we'll
29:29
need to use Stripes API key let me first
29:31
request your stripe AP so let me get my
29:33
stripe API key and I did add my secret
29:36
key which I can't show to you guys
29:38
because it's like a secret API key but
29:42
basically you just click on this press
29:44
paste and it basically stores to this
29:47
specific lovable project and now that
29:50
we've added this strip API key I'll
29:52
Implement stripe payment fun
29:53
functionality we'll need to create an
29:55
edge function in super base to handle
29:57
payments
29:58
securely and add the
30:00
necessary frontend components so I've
30:03
implemented strip payments with secure
30:05
edge of reable payment form success page
30:08
for completed so to use the payment form
30:11
in the component simply import and use
30:12
it like
30:14
this so let's just
30:16
do I want to
30:19
please add the payment form as part of
30:26
the sign up process
30:29
so let's
30:30
just use that I think we it's still
30:33
doing something so we got to
30:35
wait okay so now lovable says that this
30:38
payment form is part of the sign up
30:41
process so what I'm going to do is I'm
30:42
going to publish this again and refresh
30:45
it here well I have to kind of log out
30:48
in a way I don't know if that's
30:51
possible if not I can just use another
30:54
browser but let me just refresh this
30:59
and okay now I can sign up and I'm just
31:02
going to use a different email address
31:04
I'm going to
31:06
use so I've added this new email
31:08
addresses now it says pay now so it says
31:11
an unexpected error occurred so let's
31:14
just click on this and give this
31:19
so once I click on pay now I get this
31:26
error toast right so let's just add that
31:31
so now I'm just going to use some
31:33
random email address to sign
31:37
up click on sign
31:40
up and it says that this email is
31:43
invalid
31:45
okay okay so now let's just never and
31:48
let's click on pay now and we still get
31:50
this error there was something going on
31:59
okay so we do get it does load up but it
32:01
doesn't work because the site is not
32:03
hosted I remember um that this is the
32:07
case so it should come up in between
32:10
these two things here right um so now
32:13
the next thing that I want to try is to
32:14
actually Host this to actually push this
32:16
to my GitHub and Host this somewhere so
32:20
I'm going to connect my GitHub go like
32:22
this and create in my profile which is
32:25
Lucas
32:26
Margery and it says that it's a GitHub
32:29
repository is now under your account so
32:32
what I'm going to do is I'm going to
32:34
okay so I can clone it here view on
32:36
GitHub so let's just view this on GitHub
32:38
and we have this all here so this is
32:41
actually pretty cool that it's so you
32:43
know fast um anyways let's go back
32:47
to let's go to a new tool called netlify
32:51
right so
32:52
netlify is a tool that's connected to
32:55
your GitHub and can you can actually
32:59
um you can
33:02
actually host them so I I can add
33:05
domains here and I can host my uh
33:10
Creations from lovable so in GitHub we
33:13
can see that this project is called
33:15
Community Hunter Ai and what I can do is
33:17
I can go to netlify and I can add a new
33:20
site so this is one that I did five
33:22
months ago I don't even remember what
33:23
this was about and import an existing
33:28
project and I'm going to go GitHub
33:30
connect it to my GitHub and look for
33:32
that Community Hunter so this one let's
33:35
actually change this from private to
33:39
public if I can so I'm not let's
33:45
see yeah we can just go here so we can
33:48
call this
33:51
community
33:54
Hunter and
33:57
deploy this and this is this might take
33:59
some time to actually deploy but this
34:02
would be the first step right okay so it
34:05
says subdomain must be
34:07
unique
34:11
so where is
34:21
that
34:24
okay you go like this community Hunter
34:27
AI
34:28
and now it should work okay so now I I
34:33
did have some type of error you know um
34:36
I'm just going to close a bunch of these
34:38
things so I did add a site I'm going to
34:41
show you really quick how it looks like
34:43
so I added a site I added this one first
34:46
so I'm going to do the the whole thing
34:48
from scratch so I put uh
34:50
start import an existing Project Connect
34:53
to GitHub it authorized and then I chose
34:57
the thing
34:58
and before I wrote a site site name
35:00
don't do that right just leave it blank
35:02
and then deploy and then now it works so
35:05
basically I can go back to my
35:08
sites and we have it here so if I go
35:10
back here it opens here and what I can
35:13
do is just add my
35:17
password sign
35:20
in um okay so this is actually um
35:25
dangerous because I guess there's no
35:28
uh certificate
35:33
here okay now this is fine so we can
35:35
sign in and basically we have this here
35:38
right so that's how you do it and then
35:40
to add a custom domain you can also add
35:42
it here right so actually over here over
35:45
here in the site overview you can see we
35:48
have this um section here your site is
35:51
deployed set up a custom domain so you
35:53
can either buy a new domain here or if
35:55
you already have a domain from let's say
35:56
go daddy or name cheap you can just
35:59
connect that here so it's quite a
36:02
straightforward uh method so basically
36:04
building an app with lovable adding
36:07
authentication with
36:09
superbase um and bringing that over here
36:12
to netlify uh to actually host the
36:16
website right so and very
36:19
straightforward process you know that's
36:21
basically step by step on how to create
36:24
an app with AI add authentication add
36:27
some API to it um and and then actually
36:29
move it into GitHub and deploy it into
36:33
something like netlify right so hope you
36:35
guys enjoyed this video it was a lot of
36:37
fun and if you guys want to see some
36:40
more content about you know these topics
36:42
if you have any specific questions
36:44
please let me know and I'll try to
36:45
create some some content around that so
36:48
thank you guys very much hope you all
36:50
have a wonderful day thanks bye-bye