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

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