Build An App (SaaS) Using Lovable.dev (AI) & Supabase - Full Course

0:00 what is up guys this is the definite 0:02 course video whatever you want to call 0:04 it on building a sasap using AI Tools in 0:07 this case we're using lovable. deev how 0:09 to connect it with elements like 0:11 make.com how to do a stripe integration 0:13 things that other videos don't 0:14 necessarily mention that you absolutely 0:16 need otherwise you're going to fall flat 0:18 on your face within this process itself 0:20 literally everything you need from A to 0:21 Z this is exactly how I built out my own 0:23 SAS with lovable. deev a hiring platform 0:26 and the exact steps that you could take 0:27 in order to build out your idea take it 0:29 to the Market very fast and test it out 0:32 I've come from a no code background 0:34 where I've essentially been using tools 0:35 like Glide and getting ripped off by 0:37 developers requesting 1K and 2K to build 0:40 out apps that you can now today build 0:43 out from A to Z with a front end and 0:45 back end for as little as $50 what used 0:48 to cost $1,000 to build out just to 0:51 build out can now be built for $50 0:53 through the use of AI so that means you 0:55 no longer need to waste $1,000 just for 0:57 the build itself you just pay 50 and 0:59 ,000 that you had to spend before you 1:01 can now allocate towards ad spend and 1:03 actually start making money we've come 1:05 to a point of where we're going to have 1:06 drop SAS not even Drop Shipping like 1:08 Drop SAS just creating SAS testing it 1:10 out throwing it away testing the other 1:12 one until you find the winning offer or 1:14 the winning solution itself my name is 1:15 kralis I hope you enjoy this video make 1:17 sure to like And subscribe this is going 1:19 to be a long video you might need to 1:21 watch it later on so definitely make 1:22 sure to like the video in order to keep 1:24 it in your actual playlist itself 1:25 without a further Ado let's go oh oh oh 1:29 oh oh oh oh oh oh oh oh oh we're going 1:31 to cover basically limitations 1:33 opportunities pre-planning so what will 1:35 your app do Etc how to pre-plan and how 1:37 to keep in mind the limitations and 1:40 opportunities whenever you're doing the 1:41 actual pre-planning what tools will you 1:43 use cost breakdown so the costs involved 1:46 Etc building it out with level dodev how 1:48 to troubleshoot and what to do if you're 1:50 screwed cursor is one option I'll be 1:52 showing how to essentially do that 1:54 stripe product payment link integration 1:56 Plus customer reference ID tracking 1:58 which is one of the most important 1:59 things I've seen no video discussed this 2:00 up until this point I luckily found out 2:03 about it because I was building the 2:05 initial platform on a no code platform 2:07 and there was documentation there which 2:09 I directly applied to the actual a code 2:12 workflow that I was doing refactoring 2:14 importance and you'll see that a lot 2:16 with lovable whenever your code 2:17 essentially reaches a certain length my 2:20 personal Journey superbase quick guide 2:22 so how to actually use super base what 2:24 you need to know about that what type of 2:25 tables you're going to have the layout 2:28 of the database Authentication Edge 2:30 functions Etc then apis and web hooks 2:33 how your app can basically communicate 2:35 with other Solutions including email so 2:38 for instance if you want to set up send 2:41 Grid or any other emailing integration 2:43 directly into your app how to 2:45 communicate with make.com Etc make.com 2:48 quick guide plus explanation and how you 2:50 can use zapier as an alternative 2:52 personally I don't like zapier because 2:53 it's just more expensive landing page 2:55 options uh in my personal case we use 2:57 something called unicorn platform and 2:59 this is the landing page we built out 3:00 directly for the SAS in Focus within 3:04 this video and marketing options and 3:06 then versal plus custom domain so versal 3:09 is what you can host this on and the 3:11 custom domain that you can host it on as 3:13 well also please make sure to like And 3:15 subscribe a lot of effort goes into 3:17 these videos and your support will 3:19 definitely mean a lot to me but without 3:22 a further Ado first things first 3:23 limitations to essentially keep in mind 3:25 the process and the tools aren't perfect 3:29 up until this point it's you won't be in 3:31 a position of where you can build let's 3:32 say a tinder.com alternative or a or 3:36 instagram.com alternative primarily 3:38 because of all the different 3:40 functionalities involved the scope of 3:42 the application itself these tools 3:45 lovable doev are excellent for 3:47 applications that essentially work with 3:50 let's say i' say like a maximum of four 3:52 to five functionalities that would be 3:54 like the absolute higher limit right and 3:57 a functionality basically includes any 4:00 like for example on our platform you can 4:02 log in you can post a job now I'm also 4:05 working on a functionality where the 4:06 workers can DM you through the platform 4:09 with a messaging function that is two 4:11 functionalities right there if I add a 4:13 third and a fourth the model that I'm 4:16 currently working with might essentially 4:18 run into limitations of context because 4:21 it's it it's going to have to process 4:23 like billions of lines of code in order 4:26 to create something of relevance a 4:28 solution of relevance to what I want 4:29 want to build so that is the key 4:31 limitation with these tools right now 4:33 the amount of tokens that they can 4:34 process the more tokens the model can 4:37 process and the better it is you can 4:39 essentially add to the SAS that you're 4:41 looking to build but that is the 4:42 limitation but nevertheless there's 4:44 still a lot of different opportunities 4:46 that you can build out even with a three 4:48 four or five functionality based SAS or 4:51 app I personally strongly believe that 4:54 examples include IQ test websites that 4:57 is a single functionality it's just a 4:59 test and then you're essentially sending 5:00 the test results and you're taking a 5:02 payment for the actual thing itself the 5:04 other one includes my job board that is 5:06 another one very easy to build with 5:08 these types of tools other ones include 5:10 chat GPT wrappers so let's say there was 5:12 a tool called debate. where it's 5:14 basically a wrapper based SAS and you're 5:17 essentially debating with a certain 5:19 model right an AI model in order to 5:22 improve your debating skills one single 5:24 functionality those types of things 5:26 that's something that you need to keep 5:27 in mind now as for opportunities I 5:29 mentioned the opportunities are 5:31 essentially Limitless when it comes to 5:32 this even though there is limitation of 5:34 the number of functionalities you can 5:36 still do a lot it all depends on what 5:38 Market you're looking to tackle how 5:40 sophisticated the market is what type of 5:41 solutions they expect within that market 5:44 but if you tackle something that is 5:45 relatively untapped so like a blue ocean 5:47 with something with one to two 5:48 functionalities it looks good it's 5:50 priced correctly and it works well 100% 5:53 you should have no problem whatsoever 5:55 being able to create a good app that's 5:57 going to receive a good amount of 5:59 attention and that's going to generate a 6:01 good amount of satisfaction now many of 6:02 you might also be building not for the 6:04 purpose of turning it into something 6:06 commercial you might be looking to build 6:07 something internal to use for yourself 6:10 like a Pomodoro work timer for example 6:13 with builtin binaural beats and the 6:16 social media blocking right three 6:18 different functionalities there you can 6:20 use that internally you don't need to 6:21 essentially sell that for these types of 6:23 scenarios this is absolutely perfect so 6:26 a lot of sure there's a certain amount 6:28 of limitations but limitations are 6:29 slowly being lifted 3 months ago I was 6:32 still using no code tools like Glide app 6:34 I had no idea that in as little as three 6:37 to two to three months I'm going to be 6:39 able to have it all built out with a Ai 6:42 No code solution I was literally 6:44 speaking to developers that were quoting 6:47 me $1.5 to $2,000 in order to build out 6:52 what I wanted to build with code from 6:55 glide apps that took me one week on 6:57 glide apps that turned out horrendous 6:59 right because personally I think all 7:01 these no code platforms just literally 7:03 suck so the opportunities are a lot and 7:05 the limitations are slowly being lifted 7:07 day by day by the time you probably 7:09 watch this video there will be no 7:11 limitations or no limitations that you 7:13 can fathom that that might affect you 7:16 now the pre-planning stage is one of the 7:19 most important things as you can see 7:21 right here pre-planning stage so what 7:22 will your app do before you essentially 7:25 start building it's important to 7:27 essentially pre-plan it now I understand 7:29 understand that many of you might even 7:31 be before the pre-planning stage you're 7:33 still at the stage where you're actually 7:34 trying to understand the opportunities 7:36 and limitations of the app itself this 7:38 video is still a fit for you because 7:39 that's exactly what I'm explaining right 7:41 now two to three to four to five 7:43 functionalities definitely doable with 7:45 lovable and any other AI coding tool so 7:48 bolt cursor Etc of course you might 7:51 still around play around with the actual 7:52 platform itself so you might actually go 7:54 on lovable as you can see on my screen 7:56 right now and just get an idea of the 7:59 different types of projects that are 8:00 currently being built out so projects of 8:03 other people right so modern business 8:05 landing page sass startup landing page 8:07 tech company a lot of landing pages chat 8:10 application UI so this is actually 8:12 exactly what we're looking for in my app 8:14 because I want to build out a chat 8:16 application UI directly in the actual 8:19 jobboard app itself you can get a pretty 8:22 good idea of what you can build if 8:24 you're in that stage check out the 8:26 templates available on lovable if you're 8:28 past that stage though actually sit down 8:30 take a piece of paper and go over the 8:32 functionalities that you want to have if 8:34 you're copying someone if you're 8:35 emulating someone some existing 8:37 application sit down and actually list 8:39 down the functionalities that they 8:41 possess right in order to be able to 8:43 emulate them and again limited you're 8:45 not going to build the next I don't know 8:48 instagram.com or Tik tok.com with these 8:51 tools yet possibly in the future however 8:54 list down the actual functionalities 8:56 list down the tools that you're going to 8:58 be using as well right how will you be 9:01 able to roll out the functionalities 9:04 themselves will you expect the app to do 9:07 it through a superbase edge function 9:09 will you rely on an external API and an 9:12 external solution provider in order to 9:15 actually do the function itself will you 9:17 host it internally will you use easy to 9:20 use no code tools like make.com in order 9:23 to have the functionality work like I 9:26 did in my case so in my case as I 9:28 mentioned I use make.com now of course 9:30 you could use zapier as another 9:32 alternative but the key functionality 9:34 relies on make we communicate between 9:36 the app and make.com using a web hook so 9:39 that means that you have a super base 9:40 Edge function as you can see right here 9:44 that lovable can basically build out for 9:46 you that will send information through a 9:49 web hook directly to make.com and it is 9:52 the job approved function created 2 days 9:54 ago with 11 deployments now all of this 9:56 can be coded out by lovable you just 9:58 need to give the hook URL and then 10:00 whenever there is Need for communication 10:03 between the two apps it's essentially 10:05 going to work out so you need to 10:06 pre-plan this out what tools are you 10:08 going to use what other database are you 10:10 going to use for the for to host the no 10:12 code DB so in our case where we have a 10:15 virtual assistant based database with a 10:18 th000 to 2,000 virtual assistants it's 10:20 already hosted on Google Sheets so in 10:22 this case I built a no code solution 10:24 that essentially communicates between 10:26 Google Sheets the database of superbase 10:29 and the platform and then sends an email 10:32 of the job posted directly to everybody 10:35 using send grid now that's what you need 10:38 to think about if you're going to be if 10:40 you're going to be including email 10:41 Communications then you're looking at 10:43 send Grid or kit or any other solution 10:46 if you're looking for an external 10:47 database you're looking at Google Sheets 10:48 or possibly even hosting directly on 10:50 superbase if you're looking for AI 10:52 functionalities you're looking at the 10:54 API of chat GPT or any anthropic API Etc 10:59 anything along those lines those are the 11:00 elements that you need to think about 11:02 but there's always easy to build 11:05 Solutions available on the market then 11:07 what tools will you use right so for 11:08 payments of course stripe or anything 11:11 else but Stripes API is one of the most 11:13 well documented apis out there and I'll 11:15 be explaining how to use that 11:17 accordingly directly within this video 11:19 for the coding lovable cursor and bolt 11:21 make or zapier many people might prefer 11:24 to use zapier because it's just 11:25 generally easy to use but make.com if 11:27 you understand is cheaper and then for 11:29 the landing page what will you use will 11:31 you use we web flow will you use I don't 11:33 know card or Squarespace or unicorn 11:36 which is my favorite one because you're 11:38 just able to build out landing pages so 11:39 fast so I've already got a landing page 11:41 right here or will you actually build 11:43 out the landing page with lovable which 11:46 I you can do and it's going to be free 11:48 you won't have to pay any additional 11:50 cost but I just wasn't I just wasn't 11:52 comfortable doing that because I already 11:54 had the landing page built out on uh 11:56 unicorn and then hosting Right Where 11:59 will will you host the code itself what 12:01 will you use in this case we're using 12:03 vero.com now lovable has a very good 12:06 explanation within the docs itself on 12:09 how to host this type of stuff using 12:11 something like versal and how to set up 12:13 a custom domain which we'll be covering 12:15 in this video but those are the tools 12:17 that you need to keep in mind so that's 12:19 that so let's get into it actually 12:21 building it out with lovable dodev the 12:23 initial idea essentially started out 12:26 from this right create virtual assistant 12:28 hiring Marketplace 12:29 I'm going to I'm not going to restore 12:31 the actual preview because that would 12:32 roll back to the initial version which 12:34 wouldn't really make much sense but I 12:36 want to just show you how far we've 12:38 essentially come with regards to the 12:40 design itself and the UI and the 12:42 elements this is the initial login SL 12:45 sign up page right I just want to see if 12:47 we're able to log in yes here we're 12:50 logged in and then this is how it looks 12:52 now right with full functionality jobs 12:55 login update password reset password 12:57 page how to use section that you could 13:00 basically see right here how to use a 13:02 higher VA now jobs profile section right 13:06 and then Buy credit section very simple 13:08 then you can log out log back in and the 13:11 full functionality that is how far we've 13:13 come up until this point here you can 13:15 see all the different requests that I've 13:17 made up until this point and this is a 13:19 journey that you're going to go through 13:20 yourself and I'm just going to high 13:21 highlight the most important ones so 13:23 that you know uh what to expect within 13:25 the flow itself so first question of how 13:28 much knowledge is necessary in order to 13:31 do this it's honestly very simple not 13:33 much knowledge is needed you'll pick up 13:34 a lot of the knowledge as you go every 13:36 app consists of a front end and back end 13:39 and then whatever other you essentially 13:41 decide to include so like maybe an 13:43 additional functionality some no code 13:45 tools so on so forth the front end is 13:47 I'm not a developer but for an le5 13:49 explanation I think this will do very 13:51 well front end is what you can see what 13:53 you can use what you can essentially 13:54 work with and then the back end is the 13:57 database any other functionalities that 13:59 to include the user profiles the job 14:02 data Etc whatever you're essentially 14:04 using so whenever you're dealing with 14:06 lovable you need to also understand how 14:09 the model is designed to think and at 14:13 some points it might make a mistake and 14:16 only Implement a change on the front end 14:19 let's say lovable please build out a UI 14:22 component where individuals can post 14:24 jobs on my platform it's going to make a 14:26 mistake of building out only the UI 14:29 component and it won't create the 14:30 backend database that's necessary to 14:33 actually store the jobs so that when the 14:35 user enters the jobs they might just see 14:38 it on the front end but when they 14:39 refresh they can no longer see it on the 14:41 back end and that's exactly where your 14:43 job comes in you need to remind the AI 14:45 to build it out on the front end and the 14:48 back end now when you're also 14:49 troubleshooting when you do run into 14:51 issues with the AI itself with the 14:54 platform that it's building out for you 14:56 the app so on so forth you initially 14:59 want to ask it have you applied these 15:01 changes on the back end too can you 15:03 check if the back end coincides with the 15:05 changes that we've done on the front end 15:07 can you check if the back end coinci if 15:09 the front end coincides and vice versa 15:11 you essentially want to play around with 15:13 the troubleshooting in a way that's like 15:15 likee to what I've mentioned right now 15:16 you want to test out both the front end 15:18 and the back end and those are some of 15:20 the key Basics with regards to 15:22 development that's essentially what a 15:23 Dev does they do the front end and the 15:25 back end everything coincides and then 15:27 they build out a fully congruent system 15:30 so my initial prompt here was please 15:32 build a virtual assistant hiring 15:33 marketplace where users can basically go 15:36 post a drop now I was using voice to 15:38 text that's why the job became drop and 15:42 you'll see a lot of other different 15:43 mistakes can basically go post a job 15:46 that will include job title job 15:47 description what type of virtual 15:49 assistant they're looking for the hourly 15:50 rate starting from the lowest of $3 per 15:52 hour and then the time zone that they 15:54 want the VA to work in and then this job 15:56 will essentially get sent out using a 15:58 web hook to make.com automation which 16:01 basically will take care of Distributing 16:03 the job to the distribution process so 16:06 you don't need to worry about that now 16:07 I'm basically telling it I don't want 16:09 you to code out the functionality of the 16:10 job distribution just use make.com with 16:13 a web Hub something that I pre-planned 16:15 already in the past however what you do 16:18 need to worry about is creating the 16:19 front end integrating with super base 16:21 back end and basically creating the page 16:23 itself don't create a landing page just 16:25 create a login page account page and 16:27 then a drob list page where every 16:29 profile can basically see jobs that's 16:31 posted and that's it right that was the 16:32 initial prompt the initial idea of 16:35 creating the app you want to give it as 16:36 much information as possible that is 16:38 related to the different schemas of how 16:42 a developer would essentially code an 16:44 app or the general thought process that 16:46 any developer would essentially have and 16:48 that the AI I just realized that 16:50 unfortunately I'm not able to pull up 16:52 the preview history very fast in order 16:55 to be able to show you the generations 16:56 that it created based on every single 16:58 prompt but but we can proceed with the 17:00 actual code itself right here so it's 17:02 going to ask you to create the super 17:05 base backend functionality so let me 17:08 help you create VA right proceeding 17:11 further let me help you create a VA 17:12 hiring Marketplace it acknowledges it 17:14 starts essentially building it out based 17:15 on the elements that I've mentioned I'm 17:17 not able to show you the direct preview 17:19 but we'll proceed with the actual chat 17:21 itself I've created a beautiful and 17:22 functional VA drob board with login and 17:24 drob posting capabilities The Next Step 17:26 would be to connect it to superbase for 17:28 authentication and storage right would 17:30 you like me to help you set that up it 17:31 automatically prompts you to actually 17:33 connect the back end which is a 17:35 requirement there there's no going 17:37 around with it if you're building 17:38 anything of that requires the storage of 17:41 information or of user profiles login 17:43 details Etc unless you're just building 17:46 out a weather app that doesn't require 17:49 that people just go on they see the 17:51 weather and then they leave and you rely 17:53 on an API to essentially show you the 17:54 weather itself then I tell it I've added 17:57 super base please help me build the back 17:58 end there are several data sets then we 18:02 proceed right here I ask it to add login 18:04 with gmail which I then remove because I 18:07 then remember that you need to do actual 18:09 Google API authentication for the actual 18:12 app itself for the Gmail so I decided to 18:16 avoid that complication remove the Gmail 18:18 sign up add simple sign up a simple sign 18:20 up essentially with superbase is very 18:23 simple you'd essentially go on 18:24 authentication as you could see right 18:25 here and then you have all the different 18:27 providers that you could basically use 18:29 so in our case we're only using email to 18:31 essentially highlight what this means is 18:33 people can sign up with their email 18:35 directly on the platform an example of 18:36 this basically is the following if you 18:38 sign up directly with email so sign up 18:41 first name last name you input whatever 18:43 email you essentially have the password 18:45 create account it's going to sign you in 18:47 if we add a Gmail authentication as well 18:49 you'd see like a sign up with Gmail 18:50 right here now you would have to 18:51 actually tell loveable to add this to 18:53 the front end itself but the basic of it 18:56 is very simple and then confirm email so 18:59 this is also very important as soon as 19:01 users sign up superbase will then send a 19:03 email confirmation to them requesting 19:06 that they confirm their email so that 19:07 they have access to the app I had this 19:08 disabled for quite some time but now 19:10 that we're going over it I'm going to 19:11 have it enabled and I need to retest to 19:13 make sure that the redirect URLs are 19:15 correct however for Simplicity sake you 19:17 can turn this off just so that you can 19:19 quickly test the login process of your 19:21 app then those are the key things with 19:23 regards to the authentication providers 19:26 moving forward we fix that we 19:28 essentially added the simple page itself 19:31 then we had some yeah moving forward we 19:33 fixed that we had some issues with the 19:35 login page and signup page itself I then 19:38 provided like my super base URL and API 19:41 key like directly in the chat so I had 19:43 to hide that right now but we fixed that 19:46 we moved forward then we start coming 19:49 across the first versions of essentially 19:51 troubleshooting right so I started 19:53 coming across an issue where as you 19:55 could see right here for the Cote 19:56 present I get the error below unquote 19:58 error super base URL is required uncut 20:00 error super base URL is required based 20:02 on this error it seems like I gave the I 20:05 either gave or didn't give I gave the 20:07 wrong or didn't give the super base URL 20:10 that was required so the app wasn't able 20:12 to essentially communicate with the 20:13 backend after a couple of troubleshoots 20:16 we essentially fixed that I saw that the 20:17 error was fixed and then we added a sign 20:20 up function because the initial function 20:22 that we basically had was just a login 20:24 then we added the signup and then we 20:26 essentially started building that out so 20:29 as you can see right here then I asked 20:31 what is the job schema I'm when I ask 20:33 what is the job schema I'm basically 20:34 asking about the components of the most 20:37 important database that my app is going 20:40 to have which is essentially the posted 20:42 jobs if we uh log into any account right 20:45 here you could see that we're dealing 20:47 with one key data set which is 20:49 essentially jobs and if we head over to 20:51 table editor here you could see all the 20:53 jobs that are essentially posted on the 20:55 platform and honestly I know it might 20:57 sound complicated for for many of you 20:59 from the GetGo but this is basically 21:00 just a big Google sheet with code 21:03 functionality that's able to communicate 21:05 between different data sets very simple 21:07 right so I asked what is the code schema 21:09 the schema how is it going to be how is 21:12 it going to be laid out right user ID 21:15 description VA type Etc and here is the 21:17 answer let me create the necessary table 21:19 schema for jobs it does an SQL function 21:21 so superbase also works with SQL which 21:23 is really well really good if you 21:25 understand SQL you could essentially 21:26 change the database where apply mass 21:29 changes to the database on your own so 21:31 that's really good current code I 21:33 noticed that while we have the front end 21:34 components for draw there isn't a 21:36 corresponding database table schema so 21:37 it creates that for you and it created 21:40 the following headers so title 21:42 description VA type hourly rate time 21:45 zone create that and then user ID which 21:47 will essentially be used in order to 21:49 match up the jobs to the person that 21:51 actually created it and to give viewing 21:53 rights so privacy rights Etc and then 21:55 you could see it essentially does it all 21:57 for you our policies as well which I 21:59 haven't fully understood in order to be 22:00 able to fully explain but you don't need 22:02 to fully understand it in order to do 22:03 anything and then it's going to tell you 22:05 please review and approve these SQL 22:07 commands and then it's going to create 22:08 the table and you can see the direct 22:10 result basically posted right here now 22:12 this is of course after many changes but 22:15 the the core basis of it was done like 22:17 that I clicked on apply changes and I 22:20 also mentioned the users can only view 22:22 jobs they have created I don't want a 22:24 user viewing all the jobs of the 22:26 platform itself it just doesn't make 22:28 sense it says I'll modify the RLS policy 22:30 to ensure users can only view their own 22:32 jobs and that's it you click on apply 22:34 changes it failed for the first time it 22:36 gave me an error and then it essentially 22:38 fixed it up so that's with regards to 22:41 that please run it yes excellent and 22:43 then as I was mentioning you always want 22:45 to make sure it's applying what it 22:47 applies to the back end to the front end 22:49 so the migration is applied the 22:51 migration has been applied successfully 22:53 now the database schema is set up 22:54 correctly would you like me to update 22:56 the front end code to integrate with the 22:58 super Bas jobs table very simple so 23:01 again it's applying everything from the 23:02 back end to the front end yes there 23:04 might be cases where you need to remind 23:06 it yourself in this case yes and then it 23:08 did it and it built the first 23:11 functionality or the first component 23:14 where you could essentially view the job 23:15 so as you can see right here customer 23:17 support now this is of course after a 23:18 couple of edits but it built out the 23:20 first element of that then we had an 23:23 error whenever you get these types of 23:24 Errors you just have a button right here 23:26 that says fix the error itself so I did 23:28 that and then I think we ran into no 23:31 then it was a pretty easy fix it fixed 23:34 that quite well other errors Etc then I 23:37 asked it which schema do the jobs go in 23:39 looking at the superbase configuration 23:41 the jobs table is in the public schema 23:42 so it went directly in the public schema 23:44 which I showcased right now then the 23:46 most important element add a credit 23:48 section to the profile all profiles 23:51 start with one free trial credit after 23:53 that they need to buy them via stripe 23:55 each credit allows for one job post what 23:57 do you need for me to build this and 23:59 this was one of the key moments where I 24:01 thought okay if it can do this it's 24:02 really good and I didn't expect it to be 24:04 able to do it but at the same time I 24:06 thought if it cannot do this then this 24:08 is essentially this is like dirt it's a 24:10 waste of time so this was the make or 24:11 break moment and it told me to implement 24:13 this credit system for draw post will 24:15 need several components let me break 24:17 down what's needed and what I'll need 24:19 from you first we need to create a 24:20 profiles table in the database with the 24:22 credits field of course the actual users 24:24 table I'll provide the SQL for this and 24:27 then for the stripe integration I'll 24:28 need the following information from you 24:30 and then we ran into like our first key 24:32 major troubleshoot it asks would would 24:34 it be onetime payments or recurring 24:36 subscriptions and the product IDs and 24:38 the price IDs basically so I I told it 24:41 it's going to be a onetime payment not a 24:43 subscription I already had the products 24:46 built out right here on the product 24:48 catalog because I previously built it 24:50 out for the no code version itself on 24:53 glide so I already had that but then I 24:54 decreased the prices so I had this and 24:56 the key thing that it wanted me to 24:58 provided with is the product ID my 25:01 stripe API key as well and product ID no 25:05 API key but web hook secret and this is 25:08 one of the key things now I can't show 25:09 you my web hook secret because it's the 25:12 web hook secret however if you don't 25:15 provide this the web hook between stripe 25:18 and lovable essentially won't work you 25:20 need to provide the web hook secret as 25:22 well so that it can include it within 25:24 the function itself we did that we 25:27 essentially created 25:28 that itself and then I gave it all the 25:31 information that it essentially needs I 25:33 approved the above SQL the stripe setup 25:35 will be one time these are the stripe 25:37 product you that I essentially want you 25:39 to use so the payment links and to 25:41 create the payment links you would 25:43 essentially head over to you would 25:44 create the products and then you'd head 25:45 over to payment links you'll create them 25:47 there and with payment links you're not 25:49 necessarily using the stripe API you're 25:51 just creating a quick stripe landing 25:53 page where a user clicks on and then 25:55 they proceed however there is something 25:57 that's very important which I'm going to 25:58 cover as well which is the stripe 26:00 tracking how do you accredit the credits 26:03 after they they buy them on the stripe 26:05 page how do you accredit that to your 26:07 backend database and that's where 26:09 customer reference ID comes into play 26:11 which we'll cover right now so then we 26:13 proceed I gave it everything that it 26:14 essentially needs add stripe product Etc 26:17 and then I told it to create the edge 26:19 function and give me the URL of the web 26:22 hook on the edge function that stripe 26:24 will communicate with whenever a payment 26:26 is successful so it's going to send the 26:27 the product the payment details then we 26:30 started coming across a couple of Errors 26:32 I asked in the edge function how will I 26:34 filter checkout completes that are only 26:36 related to this product and that was one 26:38 of the key most important things and it 26:40 told me it's able to do that based on 26:44 the specific price IDs or product IDs 26:47 and then I gave it the product IDs as 26:49 you can see right here because I don't 26:50 want the web hook firing or the edge 26:53 function firing whenever I have 26:55 purchases for other products or for 26:57 example I'm might have the same client 27:00 buy another product from another 27:01 solution that I have firing off on the 27:04 higher VA down platform or the higher 27:06 now platform so therefore the 27:08 distinction purpose I gave it the 27:09 product IDs and I told it one credit 27:11 three credits five credits so whenever 27:13 there's a payment made and stripe sends 27:16 information via web hook to the edge 27:19 function of hire now it's going to look 27:21 at the product ID it's going to see 27:22 payment successful and then it's 27:24 basically going to Credit One credit 27:26 three credits or five credits very 27:27 simple 27:28 then here we start getting here we start 27:31 like actually running into some 27:33 troubleshooting I get the error below if 27:35 we look at the error failed to call URL 27:38 with status 404 so I started running 27:40 into the problem of essentially the 27:42 following I created a fake user account 27:46 I headed over to purchase I did the full 27:49 thing itself I purchased credits and 27:51 then I started seeing that I wasn't 27:53 actually having the credits credited to 27:55 my account and that's why I started 27:57 thinking like man this might be a bunch 27:59 of BS like I'm wasting my time it's 28:00 going to end up as another glide apps 28:02 but after a ton of back and forth sorry 28:04 but after a ton of back and forth and 28:06 understanding that I also had to provide 28:08 the secret with the web hook URL on 28:11 stripe to the edge function I was able 28:14 to sort it out and we came to a point of 28:16 where the actual of where the actual 28:18 payments started to be credited so the 28:21 problem that I had again is I would come 28:22 to this page I would do the payment it 28:24 would have issues communicating with the 28:27 edge function stri would have issues 28:29 communicating with the edge function 28:30 because I wasn't providing the secret 28:33 itself now I want to see if I can show 28:35 this in a way that's not very explicit 28:38 but you can see it right here you need 28:40 to give the signing secret basically 28:43 which I'm not going to show but if you 28:44 don't give that it won't work you need 28:47 to give the signing secret as far as I 28:49 remember you do not need to give your 28:50 API key your actual stripe developer API 28:53 key just the signing secret so that it 28:55 can essentially do all the 28:57 communications and then whenever there's 28:59 a checkout session completed which is 29:01 what you will filter for when you're 29:02 creating the actual thing itself and 29:04 I'll showcase it just so that you guys 29:05 don't get confused if you head over to 29:07 web hooks check out session completed 29:09 you click on ADD endpoint endpoint URL 29:12 you're going to paste the actual Edge 29:14 function web hook URL that it's going to 29:16 give you right here so let's say https 29:20 test.com description whatever you want 29:22 and then events to listen to checkout 29:25 session completed as you can see right 29:27 here and then for filtering you're going 29:29 to give it to lovable. deev with a 29:31 product ID so that it doesn't trigger 29:33 every time if you have many businesses 29:35 every time any other purchase happens 29:37 add endpoint and then you're going to 29:39 give it the signing secret you're going 29:42 to click on reveal and you're going to 29:43 give that as well so that the 29:45 communication is essentially secured and 29:46 that's basically it I didn't know about 29:48 the signing secret I just gave it the 29:50 actual URL itself and there we 29:52 essentially screwed up we came to that 29:55 then we came to another problem 29:56 basically for some reason I'm seeing 29:58 jobs are basically posted so I had to 30:01 make sure that when individuals posted 30:04 jobs that a credit would be deducted 30:07 from their profile and that was another 30:09 pretty important make or break because I 30:11 had to see if it's if the model is smart 30:13 enough to basically create that change 30:15 and it was able to do it we had a couple 30:18 of back and forths and then we came to 30:19 our first refactoring of the code itself 30:21 and you're going to see this pretty 30:22 oftenly when you start building 30:24 complicated code with complicated lines 30:26 very simple right it says note the drops 30:29 which is the actual drops TSX file is 30:31 now 179 76 lines long consider asking me 30:35 to refactor it into smaller components 30:37 after confirming these changes work and 30:39 I tell it to refactor it and it 30:40 basically breaks it down into smaller 30:41 components now the reason why it does 30:43 this is because if it's too long it uses 30:45 more tokens more context when it 30:47 refactors it's able to keep the the file 30:50 sizes limited so that it can work with 30:53 them which is pretty important for 30:54 lovable dodev and any other platform you 30:57 essentially use the uses contextual 30:59 based AI because the amount of code it 31:01 looks at will affect how many tokens it 31:03 needs Etc and that's where you might 31:04 start running into complication issues 31:06 where you've built something so big that 31:08 it essentially can't work with there we 31:10 came across our first refactoring and 31:12 that is a pretty good explanation of 31:14 what refactoring is then a couple of 31:17 more UI edits along the lines of 31:19 essentially as you could see right here 31:21 so I needed something that basically 31:23 says eight credits Left Right six 31:25 credits left which pulls data directly 31:28 from the back end we started coming 31:30 across issues of where it said undefined 31:31 but after some troubleshooting it 31:33 essentially fixed that that's with 31:35 regards to that I'm still having jobs be 31:37 posted when Euros when users have zero 31:39 credits so some users literally had zero 31:42 credits but they could still post zero 31:44 jobs and the process for this was it 31:46 would basically say zero credits left 31:48 that click new job they would enter 31:50 whatever create job and instead of 31:52 giving them like you have no credits 31:53 left you can't post this it would say 31:55 you have no credits left but then when 31:56 you would refresh the job would actually 31:58 be posted on your jobs the job 32:01 would actually be posted on your jobs so 32:03 I had to fix that a couple of different 32:04 troubleshoots there nothing too major 32:06 but it was a bit of a pain in the ass to 32:08 say the least some errors a lot of 32:10 troubleshooting and that's something 32:12 that you should basically expect then we 32:14 created an admin panel which is not 32:16 visible on the navigation bar 32:18 specifically accessible with email of 32:20 Etc the admin where they'll be able to 32:23 approve or disapprove posted jobs the 32:25 URL should be admin mods now this 32:28 basically is nothing other than this 32:30 something that's not clearly visible but 32:32 it's a job moderation panel where 32:34 somebody can basically approve or 32:36 disapprove jobs before they start 32:38 getting fired from web hook to the whole 32:40 flow itself that's pretty important 32:42 stuff that was done that was built 32:45 without any key complications a couple 32:47 of SQL edits right here just for 32:49 security sake and who can access the 32:51 draw panel itself and then more 32:54 troubleshooting again and this is 32:55 something you need to get used to and 32:57 then I asked ask it is the most 32:58 important thing this is what I again 33:00 explained with regards to the front end 33:02 and the back end and you as the 33:04 oversight over seere essentially helping 33:08 the AI think front end and backend wise 33:11 is there admin logic in the user backend 33:14 it will check Etc and then it tells you 33:17 I noticed two issues the user needs to 33:19 be inserted into the admin users table 33:21 so does the back end actually have 33:24 something that says this user is an 33:25 admin or is this just like front end are 33:27 we just talking about airor right now it 33:29 does the alterations it does the changes 33:32 and then we essentially proceed check 33:34 all my code and see if there's sections 33:35 that are dead code essentially checking 33:37 if there is anything that shouldn't be 33:40 there that serves no functionality 33:41 whatsoever how will the stripe flow know 33:44 which account to credit the credits with 33:46 and this is the most important part that 33:47 I haven't seen anybody else talk about 33:49 stripe customer reference ID so here's 33:52 the thing and this was also the thing 33:55 that I essentially came across on Glide 33:58 apps people will basically come here 34:00 they will log in they will have a 34:02 profile Etc then what they will do is 34:05 they will basically head over to buy 34:07 credits and they will buy three credits 34:10 how do you know which user clicked to 34:12 buy three credits right there's no way 34:15 to include the email basically directly 34:18 there's no way to pass the email 34:19 unfortunately so the answer is client 34:22 reference ID and the client reference ID 34:24 will basically take which I can't 34:26 showcase because I'm I'm going to 34:27 Showcase emails it will take the user ID 34:30 from the app which will get sent from 34:31 the application includeed as a URL 34:35 parameter right here client reference ID 34:37 and then the client reference ID as a 34:39 meta will be passed back onto the 34:41 platform to the edge function so that 34:43 the edge function knows which user to 34:45 basically credit so it's all linked from 34:47 the beginning till the end and for more 34:51 information on that which I can't 34:53 include on this YouTube which I can't 34:55 include on this YouTube channel cuz it's 34:56 a fresh Channel and I can't include 34:58 links but you should be using this 35:00 client reference ID it's pretty well 35:02 documented you shouldn't run into any 35:04 issues but you need to know the logic 35:05 behind it otherwise you might run into 35:07 issues and your whole thing might not 35:09 work so I ask it how will the stri flow 35:11 know which account to essentially credit 35:13 the credits with and then I basically 35:15 mention client reference ID the way that 35:18 we're actually going to do it is by 35:19 using the client reference ID URL 35:21 parameter to stripe on the payment link 35:23 and we're going to pass the user ID from 35:24 our back end directly to stripe not 35:26 Skype and then it's going to be the user 35:29 ID which will then be sent from stripe 35:31 to the web hook function on our super 35:33 base I understand Etc then we go ahead 35:36 and we start doing it the stripe then we 35:38 go ahead and we start doing it you'll 35:40 also see the stripe web hook secret 35:41 which I need to remove Etc then we start 35:44 running into some issues so a lot of 35:46 troubleshooting here and there but then 35:47 in the end we essentially fixed it a lot 35:50 of troubleshooting here basically a lot 35:52 of different troubleshooting the key 35:53 thing is don't give up the make sure to 35:56 give it the errors that you essentially 35:58 come across so what error is The Edge 36:00 function providing as to why it's not 36:02 working you can find this out by heading 36:03 over here to Edge functions and then if 36:06 you have any Edge functions within the 36:07 past 24 hours you'll basically see them 36:09 right here in the logs and then you'll 36:11 be able to see the error that it 36:12 provides as well you take that error you 36:14 give it to lovable and it's going to be 36:16 able to at some point after a lot of 36:18 back and forths generate an actual 36:20 solution for you so that's that then I 36:22 had to actually understand do you need 36:24 the signing secret or the API key it 36:26 tells you it needs the fullu API key but 36:28 that's not the case it's hallucinating 36:30 here it just needs the signing secret 36:31 then we finally fixed it so it works now 36:34 next up we need to make sure that all 36:35 new accounts have one free test credit 36:37 this was another functionality that I 36:38 was thinking to do this so basically the 36:41 default Credit Value when an account is 36:42 created should be one and it actually 36:44 did this a couple of SQL changes and 36:46 this is an important flow because how am 36:48 I going to lure users in and everybody 36:50 who's building an app needs to think 36:51 about what free value are you offering 36:54 first that's going to bring the user in 36:55 to showcase the value that you could for 36:57 them so that they can actually pay later 36:59 on because if you're just like this is 37:00 the platform pay to use it's not very 37:03 inviting your conversion rate is going 37:04 to be relatively low we did that then 37:07 we're essentially working on the 37:08 functionality so profile page the logout 37:10 button the different functionalities add 37:12 a reset password button and function to 37:14 log in the navigation bar itself now it 37:17 didn't look like this initially the 37:18 whole display was white but then after 37:21 and you could see it on another video 37:22 the first V1 of the actual app itself is 37:25 included on a YouTube video that I did 37:27 did which I'll include as a card above 37:29 or in the you can find it on my channel 37:31 and you can essentially see that there 37:33 was very different the UI was very 37:35 different I then request the dark mode 37:38 with the orange tint and basically 37:40 that's that some refactoring me actually 37:43 asking it what model are you on and it 37:45 revealed that it is a anthropic model so 37:49 I'm guessing it's I don't know one of 37:51 the clawed models basically proceeding 37:53 further more troubleshooting which you 37:56 need to get used to and then changing 37:59 the VA types to essentially these so 38:02 that it coincides with the back end that 38:05 we have right here with the actual data 38:07 sheet because the way it works is people 38:10 will specify the VA type and then it has 38:13 to coincide with the competencies that 38:15 we essentially have on our VA database 38:17 and it's going to pull 40 to 50 to 30 38:21 individuals that are relevant and send 38:23 that over directly to superbase I'll be 38:25 covering the make Basics further along 38:27 the video but that's the key basic of it 38:30 so we proceeded from there more SQL 38:32 changes then the key thing right here so 38:34 next up we need to do the following jobs 38:36 get posted by users and then they go 38:38 from moderation by admins when approved 38:40 the app should send a request to this 38:41 web hook containing all the job 38:43 information to make.com and this is the 38:46 key thing this is the communication 38:47 between The Lovable app itself that you 38:49 built and make.com so the app should 38:52 send out an email to the job creator 38:54 also saying your job has been improved 38:55 it should do two things communicate with 38:57 with the web hook itself as you could 38:58 see right here to create the web hook 39:00 you head over to web hooks it's going to 39:02 give you you're going to give that URL 39:04 to lovable and then it should also send 39:06 out an email to the job Creator saying 39:08 your job has been approved it recommends 39:11 that we use resent which is basically 39:14 just something that it's recommended 39:15 it's like send grid like a email API 39:18 essentially provider I tell it why 39:20 resend let's use send grid because I 39:22 don't have a resend account it proceeds 39:24 here I tell it let's use send grid I 39:26 provide it with my API Keys which you 39:28 add right here s GD API Keys page and 39:30 then you essentially proceed then I 39:32 started getting the problem of getting 39:34 failed to create job even when the 39:35 account has credits it fixed it Etc some 39:39 more troubleshooting we added the key 39:42 thing now one key thing with regards to 39:45 SD that I also recommend you do is it's 39:47 going to set some random from email like 39:51 notifications at your domain make sure 39:53 that you set the from email to an 39:56 approved from sender on send grid 39:58 otherwise your emails essentially won't 40:00 send out so that's another thing to 40:01 basically keep in mind then we proceed 40:04 some UI changes however this is not the 40:06 part where I actually optimize it for 40:08 Mobile use as you can see right here if 40:10 you click this button on lovable it's 40:12 going to showcase the mobile UI which is 40:14 very important to basically built out we 40:16 proceed and then one of the key things 40:18 and this is why I essentially gave up 40:20 with glide apps because you weren't even 40:22 able to set up the homepage I know I've 40:24 been like taking a big dump on glide 40:26 apps but man man these no code tools are 40:28 an absolute joke the Ai No code ones and 40:31 actually hiring a developer are good but 40:33 other than that oh my God I tell it 40:35 after login change the redirect to jobs 40:37 and not drops so as soon as somebody 40:39 logs in they get taken directly to the 40:41 jobs page and that's what's basically 40:43 done updating the routing so the routing 40:45 is let's say you're going to have the 40:46 URL and a Dash and then the actual app 40:49 page itself and then we fix that and 40:52 then nice now make the login page look 40:54 nicer so a couple of changes right there 40:57 mentioning what color Style I want the 40:59 UI to be in it does all the changes and 41:01 then it basically proceeds then I 41:03 basically specify that I want the page 41:05 to have a menu like this now Menus can 41:08 come in different forms initially it 41:09 just gave me all my options right here 41:12 however the most used menus right now 41:14 are the navigation bars that you can 41:16 have on top right here or something 41:18 that's on the side basically now on the 41:20 side it's good when you have a lot of 41:21 different options so like you have I 41:23 don't know 10 to 15 different pages that 41:25 people can navigate through and it's a 41:26 functional app however for something as 41:29 simple as this I just opted in for a top 41:31 menu like this and then on mobile 41:33 because you will have to do manual 41:35 mobile optimization for the app itself I 41:37 told it to create a sandwich menu that 41:39 opens up like that and then you could 41:40 basically use everything because 41:42 initially it's just going to Crunch all 41:44 the different options right up here and 41:47 you're basically going to have to fix 41:48 that yourself but navigation wise and UI 41:51 wise that's the approach that I 41:52 essentially went with so then moving 41:55 forward other than the UI it's itself at 41:57 some point additional UI changes remove 42:00 the purchase credits button Etc which 42:02 you're essentially going to have to do 42:03 in order to optimize the UI so far and 42:05 then most importantly the mobile 42:07 optimization now this again as I 42:09 mentioned is one of the key things the 42:10 app will not be mobile ready from the 42:12 GetGo you need to basically do mobile 42:15 optimization so you're going to have to 42:16 open it up and essentially tell it what 42:18 you want to switch and make sure that 42:20 it's mentioned that you want the change 42:22 directly on the mobile version otherwise 42:25 it's going to apply the changes to both 42:27 vers and you're going to essentially be 42:29 playing cat and mouse an infinite Loop 42:31 of cat and mouse couple of different 42:33 changes right here that it applied and 42:36 rounding Corners as well which 42:38 essentially just looks better so make 42:40 the black corners of the top nav menu 42:41 rounded 25 points couple of different 42:43 changes right there and that's it the 42:46 key issue the biggest troubleshooting 42:48 error that I essentially had with 42:50 lovable up to this point is after I set 42:53 it up and after I built everything on 42:55 versal I and after I added everything on 42:57 superbase and I added a custom domain I 42:59 realized I didn't have a reset password 43:01 flow which I advise you do before you 43:05 actually do the actual setup itself and 43:07 I advise you include it's very important 43:09 because a lovable might essentially 43:10 forget to tell you about it now the way 43:12 it works is very simple you would enter 43:14 an email right here so like anything and 43:16 then you would click reset password and 43:17 it would send the reset password link 43:19 directly to this email very simple some 43:21 things to basically keep in mind is that 43:23 lovable can build the reset password 43:25 flow for you but in the I think it's in 43:28 the project settings URLs in 43:32 authentication URL configuration you 43:35 need to add the site URL with the actual 43:37 custom domain otherwise it won't work 43:39 because the URL link will be sent from 43:42 super base directly to the email of the 43:45 individual requesting the password 43:46 resent that link needs to contain the 43:48 actual real domain that it's going to 43:51 redirect you too and then a couple of 43:53 redirect URLs that you could see right 43:55 here with the Wild Card up - password 43:57 and then the actual key URL itself if 44:00 you provide that you should have no 44:02 issue whatsoever and then it's going to 44:04 the thing will essentially work I might 44:06 create a whole separate video on that 44:07 because I actually ran into quite a lot 44:09 of issues but if you long enough you 44:11 should be able to solve it but keep in 44:12 mind that you do need to include it 44:14 because it's important for the user flow 44:16 and keep in mind that you might run into 44:17 some issues but it's all fixable don't 44:19 let that deter you and that's about it 44:21 that is with regards to my actual build 44:23 Journey the final product up to this 44:25 point essentially looks like this uh 44:27 single functionality posting jobs being 44:29 able to see different approved jobs that 44:31 have been approved that are not 44:32 necessarily yours but just to get a good 44:33 idea buying credits and then next up 44:36 what I'm looking to build is the chat 44:38 functionality so two different account 44:40 sets directly on this platform I want 44:42 worker accounts and then I also want so 44:45 I want two different accounts that'ss on 44:46 this platform I want worker accounts and 44:48 hire accounts the higher accounts can 44:50 post jobs and the worker accounts can 44:52 apply and communicate so the database 44:55 would also include let's say chats 44:57 worker profiles hirer profiles and then 44:59 be able to essentially communicate 45:01 together that's the further road map of 45:04 this actual app itself as well as AI 45:07 agents which should be relatively easy 45:09 to do because if it's a simple AI agent 45:12 where you can basically upload a list of 45:15 let's say 5,000 companies and then I 45:18 have a make.com or a Nathan Automation 45:21 in the back end that basically scrapes 45:23 and generates context about those 45:25 companies using AI agents it could be 45:28 pretty easy as as easy as essentially 45:30 just including AI agents here you select 45:32 it you upload the CSV you buy credit and 45:33 then that's it that's with regards to 45:36 that next up if screwed use cursor so 45:40 you might come to a point of where your 45:43 code is essentially ready it's being 45:44 Auto uploaded onto GitHub to auto upload 45:47 it you click on publish and then you 45:49 deploy it directly on GitHub you need to 45:51 connect your GitHub account in order to 45:52 do this and it pushes changes that get 45:55 automatically produced in versal however 45:58 you might come up up to a point I have 46:00 yet to come to that point yet but you 46:01 might at some point come to a point of 46:03 where you're essentially screwed and you 46:06 need another model to look at the code 46:08 what do you do in that case in that case 46:10 I think the best thing that you could do 46:12 is download something called virtual 46:13 Studio code so vfc and then use cursor. 46:17 a or cursor. comom to basically have 46:21 more adjustability of the code itself so 46:24 cursor works by downloading models that 46:26 directly into virtual Studio code and in 46:29 Virtual Studio code you're basically 46:31 able to troubleshoot and build 46:33 additional things now you'd have to tell 46:34 curser in the back end that you're also 46:36 using super base give it whatever it 46:38 needs to basically make the changes 46:39 itself but that is the key 46:41 troubleshooting strategy that I think 46:44 most people will basically use when 46:46 troubleshooting or when using AI coding 46:49 tools so that's with regards to that now 46:52 more details with regards to superbase I 46:54 know that the first time you open this 46:55 it might look like pretty weird or 46:57 pretty what's the word challenging to 46:59 understand you might feel like I'm never 47:01 going to understand this I'm just going 47:02 to use the AI but the UI is very 47:05 self-explanatory the table editor that 47:07 you have right here basically gives you 47:08 the ability to see all the data so like 47:11 profiles jobs Etc everything that's 47:13 posted you need this for the data of the 47:16 app itself it's honestly much simpler 47:18 than it seems the SQL editor which you 47:20 honestly won't be using that much 47:22 because lovable can basically run 47:23 commands directly through SQL through 47:25 the app itself but if you were to run 47:27 your own query if you do understand SQL 47:29 you do that right here the database 47:32 itself so here you can basically see the 47:34 schema and how everything is basically 47:37 sorted additionally authentication here 47:39 you're going to see all your users plus 47:40 how they're able to sign up and sign in 47:42 storage which I haven't really used Edge 47:45 functions which are actual functions of 47:47 the app itself that you're going to be 47:48 using which is pretty important and then 47:50 here you're also going to see the logs 47:52 of what went wrong as I showcased in my 47:54 journey real time which I personally 47:56 haven't used use reports logs and then 47:58 API docks very simple moving to make.com 48:01 or zapier if you're going to use it for 48:02 zapier I'd probably create another video 48:04 or you you can find like a lot of 48:05 demonstrational videos online for zapier 48:08 but the key elements that are 48:10 unavoidable is number one the web hook 48:12 you will always have communication done 48:13 through a web hook between the app 48:16 itself and the web hook there might be 48:18 maybe I don't know something else but in 48:19 most cases for Simplicity sake you're 48:21 going to use a web hook then for most 48:23 cases you will also use some sort of 48:24 database and you will you will 48:26 essentially connect it to some other 48:28 functionality that is included so in 48:30 this case we're using send grid to 48:31 basically connect it to a bigger 48:33 database and then send out emails most 48:36 cases that I've seen so far connected 48:38 directly to let's say chat GPT or some 48:41 other AI provider out there but your 48:44 flow would look something like this now 48:46 you might in some case also add like 48:48 flow control or router if you want if 48:52 function right so if you want like a lot 48:53 of different possibilities of what can 48:55 happen if a certain condition is met 48:57 that you would add right here with 48:59 filters right conditions text operator 49:01 equal to but it's honestly very simple 49:03 make.com is not that is not that 49:05 complicated however oops if you do find 49:08 it complicated head over to zapier it's 49:11 going to be more expensive for you if 49:12 you're not in a position of where you 49:13 can like dedicate 3 to four hours to 49:15 learn make.com cuz honestly that's all 49:17 it takes if you're not in a position 49:19 where you can do that head over to zap 49:20 here it's going to be easier but you're 49:21 going to pay more but that's with 49:23 regards to make and then last but not 49:25 least the land landing page now look you 49:28 can literally tell lovable to create a 49:31 landing page for you and it will and 49:33 you'll see the landing page somewhere 49:34 right here it's just going to be the 49:36 landing page itself however for 49:39 usability sake I decided to not go ahead 49:41 with that and I just created the landing 49:43 page on unicorn right here as you can 49:45 see so access our database post a free 49:48 job quick demonstration of some of the 49:50 VES we have how it works create profile 49:52 post jobs and then essentially hire 49:55 types of vas we offer are pricing and 49:57 then reviews very simple that's what I 49:59 would generally recommend for a landing 50:00 page and it's hosted directly on legacy. 50:03 inside inside high vaa now with mobile 50:06 functionality and talk.io for customer 50:09 support very simple that's what I would 50:11 use but again if you want something much 50:12 simpler just make it on lovable dodev 50:15 then versal which is the most important 50:17 one so for publishing you can 50:19 essentially learn all you need about it 50:21 right here so setting up a custom domain 50:23 cuz you won't run a SAS through a level 50:26 domain right it gives you the option of 50:28 using netlify or versal in my case I 50:31 used versal and the first thing is 50:33 creating the GitHub repository as you 50:34 could see right here you might have to 50:36 give it a view options for the repo the 50:39 specific code repo that you're working 50:42 with in that in that section which is 50:44 you might have to troubleshoot but it's 50:46 not so complicated set up versal so go 50:48 to actual versal make an account itself 50:51 connect your GitHub account because the 50:53 way it works is by getting the code from 50:55 the GitHub account and just deploying it 50:57 cons consistently every time there's a 50:59 certain change and adding the custom 51:02 domain as you could see right here the 51:05 way that you do that is by clicking on 51:07 settings and then heading over to the 51:10 domain section and you should be able to 51:12 add whatever domain you essentially want 51:15 to use right there very simple but 51:17 versal is the way that I recommend you 51:20 move forward then it gives you the 51:23 ability to create another branch called 51:26 Dev and the reason it tells you to do 51:28 this is so that you don't post updates 51:32 every single time an update is made on 51:34 lovable dodev because naturally that's 51:36 what's going to happen unless you do 51:38 this and lovable dodev might give you a 51:40 broken version of the app and then Verso 51:43 will essentially update that as well so 51:45 the best way to do that is by creating 51:47 this but I just created the main branch 51:49 itself and I know that if lovable gives 51:51 me a broken version I can simply go to 51:53 history and then restore from here and 51:55 this is a life saer tool because you can 51:57 click on any version that you've created 52:00 up until this point and just click on 52:01 restore so if version 156 is broken I 52:04 can basically just restore to5 that's 52:07 with regards to versal as well versal is 52:10 great so far my running costs for this 52:13 app is the cost for make.com which is 52:16 like $10 a month the cost for unicorn 52:19 which is like $40 a month and that's it 52:22 and I also paid $50 on lovable just to 52:25 increase the limits in total I've paid 52:26 like maybe you could say $100 on this 52:29 and lovable is not a recurring cost the 52:31 only recurring cost here is make maybe a 52:34 Premium plan on versal which is pretty 52:35 cheap and a Premium plan on super base 52:37 as opposed to paying $11,000 to a 52:40 developer that would build this out for 52:41 you which you can now build out for $50 52:43 basically that's essentially that I 52:46 think we've covered everything so we've 52:48 covered apis web Hooks and the journey 52:50 itself we've covered the marketing 52:51 options which we could cover right now 52:54 or in a separate video we've we covered 52:56 versal custom domain we've covered 52:58 building it out with lovable Etc that's 53:01 it guys if you want more details with 53:03 regards to the marketing options of this 53:04 I recommend you check out my main 53:05 Channel which is kill chalis k y r i l l 53:09 I'll link it somewhere in the comments I 53:11 release a lot of information there with 53:13 regards to marketing business automation 53:15 Etc I hope you guys enjoyed this if you 53:17 did make sure to like And subscribe and 53:19 stay in the loop for more videos but 53:21 that's essentially how to build with AI 53:24 how to build with lovable. Dev thank you 53:26 so much guys and I'll catch you on the 53:28 next one