How To Vibe Code for Beginners(Lovable Tutorial)

0:02 [Music] 0:09 [Music] 0:26 manual coding is a do you think 0:28 that's because of painstaking m of time 0:30 it takes to find the missing 0:32 semicolon or is it because you 0:34 eventually run out of the names for 0:36 variables for the record coding may look 0:39 cool especially when you do it while 0:40 wearing a hoodie but it leads to all 0:42 kind of suffering and loneliness due to 0:43 long working hours and there is barely 0:45 any work life 0:46 balance false 0:49 advertising the truth is there is 0:52 something weirdly satisfying about it 0:54 and I need to do something to take my 0:55 mind off it easy enough except I need an 0:58 idea 1:01 I don't drink so I'm not at all 1:03 intoxicated and it's a little past 10: 1:05 p.m. I've got a bunch of my cohort stent 1:07 CVS opened up over here some of these 1:10 people have pretty impressive 1:11 backgrounds Shri rames my cooh hounder 1:13 sitting here had the idea of creating a 1:15 discovery platform for our students 1:17 think LinkedIn meets perplexity where 1:19 our cohort grads could get discovered by 1:20 recruiters through natural language 1:22 search like find me someone who build RG 1:24 apps are looking for flux Lowa experts 1:27 good call Mr shev 1:30 yeah it's on I'm done watching useless 1:32 tutorial videos and fake demos so I have 1:34 decided to build something we actually 1:35 need something that solves our own 1:40 problems let the hacking 1:44 begin so let the hacking actually begin 1:47 if you want to see more videos like this 1:49 in your timeline hit the like button and 1:51 subscribe to 100x engineers in this 1:53 video we are going to teach you how to 1:55 go from idea to application in about 30 1:59 minutes and and this video is useful not 2:01 only for the non-coders out there it's 2:03 also useful for the coders among you who 2:05 would like to learn AI assisted coding 2:07 the tool we're going to be using in this 2:08 video to build out this application is 2:10 called lovable you simply go to lovable 2:12 dodev and you should see a page like 2:15 this and just like the homepage says 2:17 it's idea to app in seconds and I 2:19 actually love the tagline as well which 2:21 is lovable is your superum full stack 2:23 engineer okay so here's how we're going 2:25 to do this we'll start by defining the 2:27 idea of the application that we're going 2:28 to build after that we will make 2:31 comparisons on how much time and money 2:33 it would cost an actual product team a 2:36 traditional product team in order to 2:37 build out this application versus how 2:40 much time and money it would take 2:41 sidhant and I to make the same 2:43 application using lovable and then we'll 2:45 compare the two and we'll see what comes 2:47 out of it now since we've gotten that 2:49 out of the way let me tell you guys what 2:51 the idea is now I've seen a lot of 2:54 videos online where people talk about 2:55 building an app using Ai and stuff like 2:58 that building AI agents using no code 3:00 tools and all that but a lot of these 3:02 ideas I don't find it very useful I 3:04 don't find any actual real world 3:06 application of these ideas so we wanted 3:08 to work on an idea that actually 3:10 required solving we wanted to work on a 3:12 real problem statement so we took a 3:14 problem statement that we were facing 3:15 over here internally at 100x Engineers 3:17 itself so here's the idea we wanted to 3:20 make a discovery platform for the 3:21 graduates of our 6mon long applied AI 3:24 boot camp program so we wanted to create 3:26 a discovery platform where all these 3:28 applicants could get discovered by 3:29 recruiters and recruiters can find it 3:32 easy in order to discover these 3:33 applicants as well and the way we are 3:35 enabling all of this is via natural 3:37 language so imagine if LinkedIn and 3:39 perplexity got together so what if you 3:41 could search for certain skills and 3:43 certain um parameters using natural 3:46 language what if I could type something 3:47 like I need a video editor that knows 3:50 blender and after effects and has 2 3:52 years experience and it just filters out 3:54 all those people for me so I basically 3:57 am searching through a database using 3:59 natural language right so this is 4:01 something that we wanted to build out 4:03 here at 100x because we have one of the 4:04 largest AI Builder communities in the 4:06 world and we wanted to make it easier 4:09 for ourselves and as well as our 4:11 students in order to find Opportunities 4:13 and also in order to make it easier for 4:15 recruiters to find the right talent in 4:17 the talent pool that we have over here 4:19 so that's fundamentally the idea I hope 4:21 you've gotten a gist of it now before we 4:23 get into the actual building I want to 4:24 show you what the final result actually 4:27 looks like so we have the platform over 4:29 here it has an authentication page where 4:31 you have to type in your email ID and 4:33 password and when I click on 4:35 login I get into a page like this now 4:38 here you can see a bunch of profiles 4:40 there are a bunch of skills the projects 4:42 that theyve worked on their interests 4:44 Etc and then here we have a search bar 4:46 so let's say I want to 4:49 type I need an 4:52 engineer who can code 4:55 in Python and I just press enter 4:59 and now I can just explore individual 5:01 profiles by clicking this button and as 5:04 a recruiter if I like a profile I can 5:06 get in touch with an applicant over here 5:07 and that's that so we're using this 5:10 application as an example in order to 5:12 show you what the behind thes scenes 5:14 process looks like and you can use this 5:16 knowledge in order to translate it into 5:18 your own ideas you can build your own 5:20 applications and you can do that within 5:22 similar time frames that we're doing it 5:24 over here as well so sidhant what are 5:26 the steps that is required for me to get 5:28 from idea to app a over here so you need 5:31 to follow a four-step approach step 5:33 number one get the PRD product 5:36 requirement doc so whatever ideas you 5:37 have you convert that into a very 5:39 specific detailed product requirements 5:42 step number two you start building by 5:44 front end step number three you build 5:46 the back end step number four you add 5:48 the llm integration which helps you 5:50 search your profiles through natural 5:52 language and then finally you deploy 5:54 right and finally you deploy it yes all 5:56 right so let's start with step one PRD 5:59 which is the product requirement 6:00 documentation I'm assuming this is a 6:02 document where you have all the 6:04 stepbystep process of what the 6:05 dependencies are what kind of uh 6:08 functionalities you need what kind of 6:09 features you need Etc right exactly 6:11 exactly so whenever you have an idea and 6:13 you want to convert that into an 6:14 execution we have specific departments 6:16 in the company to basically build a 6:18 particular piece of that uh problem 6:20 statement for example we have product 6:22 team which takes the requirement 6:23 understand what user wants and convert 6:25 them into detailed requirements then we 6:27 have technical team/ engineering team 6:29 which basically convert these 6:31 specifications into a code and then we 6:33 have like testing team which basically 6:35 test everything and then we have 6:36 deployment so now what we need to do 6:39 here is we need to simulate everything 6:42 in one process and hence I have created 6:44 a prompt which I spent last 6 month uh 6:47 fine-tuning it this is called your AI 6:49 CTO you can throw your core ideas here 6:52 and it will ask you all the questions 6:54 and he fetch all the required details so 6:57 that it can generate a master plan which 6:59 has all the these things by the way guys 7:00 for those of you watching this video we 7:02 are sharing this prompt with all of you 7:04 guys for absolutely free we're putting 7:06 it in a link in the description you can 7:08 use it for your personal projects you're 7:12 welcome all right here's the prompt you 7:14 are a professional CTO who is very 7:16 friendly and supportive so you gave it a 7:17 personality your task is to help a Dev 7:20 understand and plan their app idea 7:22 through a series of questions so you're 7:24 basically asking me to ask you questions 7:26 Begin by explaining the developer that 7:27 you'll be asking them questions okay ask 7:29 questions one at a time in a 7:31 conversational manner 7:32 okay use the developer previous answer 7:35 to inform your next question here you're 7:37 taking advantage of context your primary 7:40 goal 70% of focus is to fully understand 7:43 what the user is trying to build at a 7:45 conceptual level the remaining 30% is 7:47 dedicated to educating the user about 7:48 available options and their Associated 7:50 pros and cons very nice so you're 7:52 basically using AI to better inform the 7:55 person who's using this and also to help 7:57 them build out the master plan 8:00 I can see how specifically you've 8:01 written this prompt like you have these 8:03 very specific numbers and it is very 8:05 reminiscent of code where you have to be 8:07 kind of specific so it's almost like 8:09 you're using English to write code 8:11 exactly exactly and and this is a result 8:13 of like generating multiple MVPs 8:16 throughout last 6 month because every 8:17 time I generate something I find out 8:19 okay I could have asked this particular 8:21 detail in the prompt first then I go 8:23 back and add those details and that's 8:24 how I got all the 12 Steps so I in your 8:27 last prompt I think that is very evident 8:28 which is generate the master plan MD 8:30 file this should be a high level 8:33 blueprint of the app including app 8:34 overview and objectives target audience 8:36 core features and functionality high 8:38 level technical stack recommendation so 8:39 you've covered pretty much everything 8:41 right so let's just copy this okay so 8:45 let's just paste this over here and 8:47 press 8:48 enter for this you can use any of your 8:51 preferred LM in this case we are using 8:53 Char gpds over all right now we just put 8:56 our idea across right yes so I'll just 8:59 type it okay so here's my prompt I'm 9:01 building a discovery platform where 9:03 users upload their profiles skills 9:05 experiences projects Etc and recruiters 9:08 can search through it and find the right 9:10 Talent using a search bar powered by 9:12 natural language cool all right 9:16 yeah okay so the model is asking me 9:19 questions that sounds like a great 9:20 concept let's dive a bit deeper who do 9:22 you envision your primary users are you 9:25 focusing on specific industry or 9:26 professions or do you want this platform 9:28 to be more General 9:33 okay so after a series of questions 9:35 which actually lasted about 15 minutes 9:38 we have a master plan. MD file so it 9:42 shows the app overview and objectives 9:44 the target audience the core features 9:45 and functionality which is mainly what I 9:47 wanted to 9:48 see so it basically has the signup 9:51 process what are the features that are 9:53 going to be there how is the search 9:55 going to happen how the recruiters will 9:57 contact the graduates what the 9:59 moderation 10:01 levels and then it gave us a stack 10:04 recommendation so for front end it's 10:05 asking us to go with react view or 10:07 angular for a responsive card- based 10:11 UI uh it's giving us suggestions on 10:13 backend uh what llm to integrate for the 10:16 search engine and then finally the 10:18 database and it also gave the values of 10:21 the user tables as 10:23 well pretty 10:25 neat okay so that's the end of Step One 10:28 this master plan and PRD took us 15 10:30 minutes San from your experience how 10:32 long does it take for actual product 10:33 teams in order to make something like 10:35 this so it usually takes somewhere 10:37 around 2 to 3 days because it involves 10:39 like lot of back and forth with their 10:40 teams so yeah two to three days for this 10:44 quite a difference already let's move on 10:45 to step two which is front end all right 10:49 how do we get started with front end 10:51 okay so now you have the master plan and 10:53 you have all these development phases so 10:55 we'll go one by one and as we see phase 10:57 number one is building the UI X so we'll 10:59 copy this entire master plan and ask 11:01 lovable to build the uiux for our 11:04 application so I've just copied the 11:06 entire master plan that we've received 11:08 from lovable and I'm going to paste it 11:10 over here I need to mention that build a 11:12 phase one all right build phase one of 11:17 this which is the UI 11:20 yes all right so we have some tailin 11:23 CSS it's writing code pretty 11:27 fast so by default lovable use react 11:30 wheat HTML CSS as the front end text 11:33 Tack and this is what it is using and 11:35 Tailwind for styling one more 11:37 interesting thing uh which I like about 11:39 lovable here is that instead of 11:41 depending completely on a no Cod tool 11:43 like which I have used a lot of noode 11:45 tools in the past in this case because 11:47 it is generating code you can also 11:49 involve your developer and your 11:51 engineering team and you can share the 11:52 code base with them so you can actually 11:54 collaborate with a no code person as 11:56 well as with engineers and yeah you can 11:58 build applications that's a pretty good 12:01 response by just the prompt that we've 12:03 given so I think we've given a pretty 12:04 damn good prompt right there and this is 12:06 only one single prompt yeah this is just 12:08 one single long prompt and we've already 12:10 gotten most of it I like the UI of it 12:13 like it actually has some Shadow it's 12:15 very clean it's very clean yeah it does 12:17 yeah it has some Shadows I like the 12:19 curvy uh cards over here it's nicely 12:22 played around with the colors it's very 12:24 clean awesome okay so we let's actually 12:27 test this out and see 12:30 um I want to 12:33 hire an 12:36 engineer who is skilled in AWS because I 12:40 can see someone right here who is 12:41 skilled in 12:42 AWS no Engineers found matching your 12:45 okay that's weird why so the thing is 12:48 because you have asked it to build the 12:49 phase one and it has just written the 12:51 front end code what you need right now 12:54 is to integrate the backend 12:56 functionality where you need a system 12:58 that can store all the backend profiles 13:00 of your students and then this can 13:02 integrate with llm as so there are no 13:05 backend databases where it can actually 13:07 search and fetch the data from basically 13:09 so you need to sear up the back end 13:10 first which which includes like setting 13:12 up your database uh your profile 13:14 creation step so that's the next step uh 13:17 in our process all right so step two 13:19 done just like that yes exactly in one 13:21 single prompt you're done with step 13:22 number one all right since we're done 13:24 with step two it's time for time 13:25 analysis it took 13:27 us lesser than than 2 minutes in order 13:30 to get a UI like this it's roughly 2 to 13:32 3 minutes that's all it basically took 13:34 us in order to do this how long does an 13:36 actual product team take in order to go 13:38 from the idea to this phase the front 13:41 end phase so usually it takes 3 to 4 13:43 days as UI designers develop the mockups 13:45 then give it to uh engineers and they'll 13:47 basically come up with requirements and 13:49 limitations and then they implement it 13:51 right so 3 to 4 days versus two to three 13:54 minutes there we have it all right step 13:56 three back end what should I do so if 13:59 you read out the response by lovable you 14:01 can see it's saying given your Project's 14:03 requirement for authentication profile 14:05 management and search functionality 14:06 integrating superbase for backend 14:08 Services is highly recommended now 14:10 lovable comes with a tight integration 14:12 with superbase which means you don't 14:14 need to actually write code you need to 14:16 you don't need to like uh you don't need 14:19 to like spend so much time into 14:20 integrating a third party service they 14:22 have an integration built-in and you can 14:23 just click a button and you can 14:25 integrate your entire back end for the 14:27 audience who does not know what super 14:29 bases can you quickly explain what what 14:31 it is if you want to create and fetch 14:33 profiles like this you need to store 14:35 them in a database think of database 14:38 like having an fancy Excel sheet where 14:40 you can store all the information and 14:42 superbase is a free and open-source 14:44 version of it where you can build all 14:46 these databases for your full stack 14:48 application right so it's like a freely 14:50 available database that you can plug it 14:52 into your app as a back end yes all 14:54 right so I'm going to type build the 14:56 back 14:57 endend with 15:00 with super 15:02 base okay so lovable says that it has a 15:05 native integration with super base and I 15:07 can already see a superbase button over 15:08 here so I'm guessing it's got something 15:10 to do with that so yes the first step is 15:13 to create a superbase account and you 15:15 can click on this superbas integration 15:16 docs they have a very detailed 15:18 step-by-step tutorial you can follow 15:20 here and you can create your account in 15:22 this case I already have my own account 15:24 so I can just log to superbase okay so 15:26 I'm just going to click on superbase 15:28 here here's the 15:30 website so I have already logged in here 15:32 but for you you need to log in and 15:34 follow the steps after that you can see 15:36 something like this click on dashboard 15:38 so as you can see I already have lot of 15:39 projects here but if you are logging in 15:41 first time so first you need to create 15:43 the organization so write the name of 15:45 your organization so I'm going to call 15:49 it lovable 15:51 app okay yeah so you can keep the free 15:54 plan so super base offers the free plan 15:56 and you can pretty much build your 15:58 entire application with this all right 16:00 I'm just going to type in a password yes 16:03 all right now we have a bunch of API 16:05 keys so now as you can see you have 16:07 bunch of things here and if you are 16:09 actually building this entire app 16:10 without using loveable so you need to 16:12 you need to perform multiple steps you 16:13 need to copy these API key you need to 16:15 connect it need to create tables write 16:17 some SQL but the best part is because we 16:20 are using the loveable so it will 16:22 automatically connect and do all these 16:23 steps for us and it'll save even more 16:25 time so let's go back to lovable okay 16:31 and this time you can click on super 16:33 base MH and add another 16:36 organization 16:38 okay I'll click on I'll select the 16:41 organization right which is you can 16:42 select the organization which we just 16:48 create so as you can see click on this 16:51 and you will also see your project so 16:53 you can click on 16:54 connect and that's it yes 17:00 okay so it already automatically wrote 17:02 The Prompt for us please connect my 17:03 superbase project yes okay so now it has 17:08 started and the super base is connected 17:10 so basically all the things all the 17:12 steps adding Integrations API key is 17:14 basically has done okay so s are we 17:16 fully done with back end over here no 17:19 not yet uh it has given us few 17:21 suggestions and this is a very important 17:23 part we need to set up an authentication 17:25 system so that not any random person can 17:27 come and create the profile right so we 17:29 only want our cohort students to sign up 17:31 for this uh website and that access 17:34 needs to be restricted basically exactly 17:36 and that's what we're going to do next 17:38 you can just continue with this and 17:39 because it has already mentioned that 17:41 these are the steps you need to take so 17:43 you can pretty much like ask it to 17:45 create the authentication system at user 17:47 login okay so create an au system and 17:54 user login that's it 17:59 okay should I click on apply changes yes 18:02 so it's first shown us a bunch of code 18:05 which is basically creating the 18:06 necessary data set tables and uh what is 18:10 doing right now it's basically writing 18:12 some policies similar to like you 18:14 writing some set of rules that who can 18:16 view what kind of uh tables and who has 18:19 what kind of access to your Excel sheets 18:21 it is basically writing all these set of 18:22 rules right and the best part is you can 18:25 also update any time uh if you want to 18:28 make some changes if you're a developer 18:29 maybe you wanted to get it reviewed by a 18:31 developer you can just share this file 18:33 and they can make changes and they can 18:34 start building with you okay so let's 18:37 actually test it I can see a sign in 18:38 button over here I'm going to sign up 18:42 for 18:45 this so as you can see it is saying 18:47 please check your email to verify your 18:49 account and uh I'll show you my email as 18:53 well so this is the email we just 18:55 received from super base to confirm our 18:58 sign up process 18:59 however because we are in the 19:00 development mode and we don't want to 19:02 create unnecessary friction to have so 19:04 many emails in my inbox so we want to 19:06 disable this email verification and you 19:08 can do this by going to the Super based 19:10 dashboard so let's do that first over 19:13 here uh you can go to the superbase 19:15 website okay and uh click on this 19:21 authentication so let's click on sign in 19:23 and sign up okay uh go to 19:26 email and just uh disable able the 19:29 confirm email and the secure email 19:30 change okay and I'll and just sa it save 19:34 it okay by the way you can also add 19:37 multiple other email authentication 19:39 providers such as Google Facebook so 19:40 superbas has all these providers if you 19:42 want to add right okay so now we're back 19:46 over here yes so now we can like start 19:48 testing it you just you just signed up 19:51 so can you sign in again okay just add 19:55 the same email 20:02 and we're in so Sid are we finally done 20:05 with the back end now yes so we are done 20:07 with the back end and we're done with 20:08 the step number three and we can now 20:10 move to the last step which is LM 20:12 integration okay so step three is done 20:14 time for time analysis the backend 20:16 process here roughly took us around 20:19 10ish minutes I'm not sure how it's How 20:22 much it's really going to come in post 20:23 production but here while sitting here 20:25 it it actually took us about 10 10ish 20:28 minutes 20:29 uh how much time does an actual product 20:30 team take for all 20:33 this um for creating the database for 20:36 the super base integration for to create 20:39 an O system and all that so usually it 20:41 takes 2 to 3 days because you need to 20:43 set up the database you need to write 20:44 SQL create some policies build 20:47 authentication and maybe like for some 20:49 cases it can even take more than 3 days 20:51 but that's the usual time right so 20:53 roughly 3 days yes versus 10 minutes 20:56 awesome all right so step four is the 20:58 llm integration and this is the part 21:00 where the search tab should actually 21:03 start working right when I type I want 21:05 Engineers skilled in this thing who has 21:07 X number of years of experience and all 21:09 that and it should give me the profiles 21:10 exactly what should I do right now so 21:12 yes this is the time to integrate llm 21:14 and we will be using open AI to 21:16 integrate llm here so we will be using 21:19 in context learning and let's understand 21:22 that what does this mean so llms have 21:24 this capacity to take certain amount of 21:26 input and this is is known as your 21:29 context window for example you can 21:31 upload 100 Pages maybe like thousand 21:33 pages of books and PDFs onto the llm and 21:37 because the capacity to take these 21:39 inputs has increased in past couple of 21:42 years we can now put all the profiles 21:45 what our students has in this case we 21:47 have uh 100 profiles on our database and 21:50 we can put that inside the context 21:52 window and then we can ask llm anything 21:55 so it'll just act as that llms has 21:57 learned all the data database of our 21:59 students and we can just ask any 22:01 question to it so it's basically like me 22:05 copying all my student data here 22:07 uploading that onto chat GPT or some llm 22:10 and just asking like hey who is the best 22:13 NLP engineer here or who is the best 22:15 tensorflow person over here exactly 22:17 exactly okay now one thing to note here 22:19 that this is not the most scalable 22:21 approach because as you scale your 22:22 database you will hit the context window 22:24 and then you won't be able to like 22:25 perform the search however because we 22:28 are building this as an MVP and we have 22:29 only 100 profiles so it is like very 22:32 much apt for our use case all right what 22:34 should I do next so let's write the 22:36 prompt and ask lovable to add open AI 22:38 llm integration and use the method in 22:41 context learning all right so I've 22:44 basically written integrate openai API 22:47 to help me search through the database 22:49 via Inc context learning yes okay so as 22:52 you can see it has started writing the 22:54 open a code but one thing you need to 22:56 add here is your open AI key okay 22:58 because openi is a paid llm and uh it 23:01 needs to monitor how many requests you 23:03 are sending so you need to First create 23:05 the API key uh to do that let's go to 23:08 open 23:09 API okay so click on quick start uh this 23:14 is the entire guide but you can first 23:16 click on create an API key in the 23:18 dashboard so this is the dashboard as 23:20 you can see I already have one key in 23:22 your case you won't have anything so you 23:24 need to click here create a new secret 23:26 key give it some name 23:30 and keep everything as default just 23:32 click on create secret key so here is 23:34 something which you need to keep in mind 23:36 always never share your API keys on any 23:38 public platform or with anyone because 23:40 this is linked with your account so you 23:42 will get charged for whatever you say 23:44 somebody will be doing through this so 23:47 let's copy this and go back to our 23:49 lovable and you can see here there's an 23:51 option to add API key and then you can 23:54 submit okay now can we test it yes can 23:57 you 23:59 create 10 fake 24:03 profiles of developers 24:07 with various skill sets and populate the 24:12 data base with it all right so these are 24:15 the 24:16 profiles mobile developer devops 24:19 engineer so you can review all these 24:21 profiles and you can then click on apply 24:23 changes okay now one thing which I 24:26 really like about this approach is that 24:28 because backend and databases are very 24:30 sensitive so L before making any change 24:33 it basically asks for a review so in 24:35 this case also before adding anything to 24:37 database it asks for the review and once 24:39 you have reviewed this then you can 24:40 basically give it a command nice so it 24:43 found some issues uh now this issue is 24:46 basically because we have an 24:47 authentication system and now we created 24:49 some new profiles so it is like kind of 24:51 rewriting the policies which it wrote 24:53 for the authentication so I'll click on 24:55 apply changes again yes all right it's 24:58 says it was successful and I can try the 25:00 search 25:01 functionalities okay now it looks like 25:03 there are a bunch of profiles over here 25:07 so it's definitely added the profiles in 25:09 our database and I think if we go to the 25:11 table editor we can also see those 25:13 profiles the cool part here is that we 25:14 haven't touched the super based 25:16 dashboard once and it basically created 25:18 the files it added policies and update 25:20 everything so let me 25:22 see I I'm 25:25 hiring an engineer 25:28 who is skilled in 25:32 AWS 25:39 okay all right so we are done with all 25:42 the four steps now can we take this to 25:44 production so the final step to push 25:46 this to production is to deploy our 25:48 application and how do and lovable by 25:51 the way also has an integration U you 25:53 can just do one click and uh find this 25:56 button called is it just publish yes 25:59 just click on publish um so you have two 26:01 options either you can make a public 26:03 which means anyone in the world can 26:04 access it otherwise you can do it for 26:06 the private in this case we can make it 26:07 public and uh just click on deploy all 26:13 right all right while it's deploying we 26:15 are at the end of step four which is 26:19 time for time analysis this entire llm 26:22 integration part took us roughly around 26:26 7 8 minutes yes while 26:28 doing the entire API integration and 26:30 debugging and all of that kind of stuff 26:33 so how long does an actual product team 26:35 take to do something like this so this 26:37 is comparatively an easier task for a 26:39 developer it would take somewhere around 26:40 3 to 4 hours to integrate everything and 26:42 test it out yeah okay so 3 to 4 hours 26:45 versus 7 to 8 minutes yes nice now the 26:49 app has been deployed as well we can 26:51 actually go to this link and we can 26:54 check it 26:56 out all right right that's a clean 27:00 looking app you know what let's actually 27:02 calculate the time it took us to do this 27:04 entire thing we got all the way from 27:06 idea to product in about 25 minutes 27:09 using lovable now if you compare that to 27:12 an actual product team from the 27:13 timelines that sidhant actually gave us 27:15 so it's going to take 11 days for an 27:17 actual product team in order to build 27:18 something like this so that's 11 days 27:20 versus 25 minutes that's the difference 27:23 that we've been able to achieve using 27:24 lovable and I'm a person that doesn't 27:27 really code a lot and I had sadan here 27:29 to assist me and and we achieved all of 27:31 this without me having to write a single 27:33 line of code over here now let's do a 27:35 cost analysis we by the way are on the 27:38 $20 plan of lovable so that's all we 27:41 basically spent in order to get this 27:42 entire thing done and we also have a $20 27:44 plan of chat GPT so our cost in order to 27:47 build this app in 25 minutes is about 27:50 $40 that is roughly 3,200 Indian rupees 27:54 now an actual product team by the way we 27:57 went on the internet and searched early 27:59 rates for a product manager a frontend 28:01 Dev and a backend Dev these are rates 28:04 that we' verified across the internet uh 28:06 and we've basically taken the minimum 28:08 hourly rates of all these roles and 28:10 since this project is being done in 10 28:12 Days by an actual product team that's 28:14 about an 8 hour workday times 10 which 28:16 is 80 hours but roughly it's going to 28:19 cost about 28:20 $16,250 for an actual product team to do 28:22 this in 10 days and by the way this is 28:25 the price in North America when when you 28:28 actually do the same job in a country 28:30 like India it's probably about 20 to 30% 28:34 of the American cost so again uh the 28:37 cost falls down to somewhere around $3 28:39 to $4,000 which in Indian rupees it is 28:41 about 3 to 4 lakhs there is a huge cost 28:45 difference that you can see right here 28:47 itself I mean the the price difference 28:49 is actually 100x it's $4 versus $3 to 28:53 $4,000 we didn't plug in 100x over there 28:56 it just happened so coincidence all 28:59 right so that's how you get from IDE to 29:02 app within 30 minutes I I hope you 29:04 learned a bunch of new stuff during the 29:05 entire process San's Master prompt that 29:09 he took six months to create we are 29:11 giving it away for free there's a link 29:12 in the description that you can use if 29:15 you happen to create outputs uh do share 29:18 it with us do tag at the rate 100x 29:20 Engineers on Instagram or LinkedIn or 29:22 Twitter wherever you guys happen to 29:23 share it until next time signing off