Vibe Coding on Lovable AI for Absolute Beginners (Frontend, Backend, Prompting - all of it)

0:00 Engineering colleges are still making 0:02 students practice skills that are no 0:04 longer relevant because the way we build 0:06 apps and websites has changed forever. 0:09 Let me teach you a skill that can help 0:11 you build apps without any coding. 0:13 Anyone at any age from any non-technical 0:16 background can learn this skill and 0:18 build apps using the concept of VIP 0:21 coding. Welcome to our no code app 0:23 development course for nontechnical 0:25 people. In today's episode 1, we will 0:28 teach you the basics of no code app 0:30 building using lovable AI. We will 0:32 assume that you know nothing about 0:34 coding or computer science and start 0:36 from absolute zero. In chapter one, I 0:39 will explain the basics of software 0:41 development and explain you fundamentals 0:43 as if you're a 10year-old. In chapter 2, 0:46 our industry expert Shawikroy who's done 0:48 his Mtech from IIT Gandhiagar will teach 0:51 you how lovable works and how do you 0:53 prompted to build a healthy recipe 0:55 generating app. In chapter 3, he will 0:58 take you through superbase that helps 1:00 you create the back-end infrastructure 1:02 of your app. Don't worry, it is not as 1:04 complex as it sounds. In chapter 4, I 1:07 will briefly explain how you can plan 1:09 your own upskilling and eventually sell 1:11 such apps to foreign clients as a 1:13 freelancer. Make sure you click on 1:15 subscribe right now because you are 1:17 learning from the cutting edge school. A 1:19 platform for businesses and 1:21 professionals to learn the skills of 1:23 future. So without further ado, let's 1:25 get 1:29 started. If you are not an engineer, 1:31 it's very important for you to 1:33 understand the basics of software 1:35 building and how exactly do you approach 1:37 no code AI building. Whatever I teach 1:39 here is simply a kickstarter course. 1:41 Your learning doesn't end here. It 1:44 actually just starts. Make sure you have 1:46 a pen and paper in front of you because 1:48 I will be sharing a lot of valuable 1:50 tips. Greg Eisenberg on YouTube 1:52 explained a very simple framework for 1:54 anyone planning to build a fresh career 1:56 in software development using AI. Let me 1:59 explain it one by one. You need to focus 2:01 on two important aspects. First aspect 2:04 is all about learning how to create a 2:06 product road map. The second aspect is 2:08 about understanding basics of product 2:10 building using AI. Let's start with 2:12 creating a product road map first. 2:15 Before we build anything, we need to 2:17 have decent enough clarity on what we 2:19 are building, who are we building this 2:21 for, and how will we be different from 2:23 others. To answer these three questions, 2:25 you need to focus on defining the core 2:27 problem statement that you're trying to 2:29 solve. For this video, let's take a 2:31 dummy problem statement. We will make a 2:33 healthy recipe generating app where as a 2:36 user you can tell the app what you like 2:38 to eat, your allergies, your basic 2:40 details, your deficiencies, and your 2:42 type of cuisine. Once you click on 2:43 generate, it will give you a 2:45 step-by-step recipe, the items that you 2:47 need to buy, and also give a YouTube 2:49 tutorial to watch. Now, the problem 2:51 statement is that people do not know how 2:53 to make healthy and simple food for 2:55 themselves. So, they need an app where 2:57 they can put their details and get 2:58 simple and customized recipes. This 3:01 answers what are we building and who are 3:03 we building it for from a very 3:05 superficial level. The answer to how 3:07 will we be different from others is not 3:09 important to us right now because this 3:11 is a beginner's level exercise. But 3:12 traditionally it's extremely important 3:14 for you to do a proper competitor 3:16 analysis using websites like mobile M O 3:19 BB I N. Now once you have some direction 3:22 the next step is to create a PRD which 3:24 is a product requirement document which 3:26 details all the features you will have 3:28 on this web app. Now I'm pretty sure 3:30 you're wondering that an why are we not 3:32 just directly jumping into building an 3:33 app? Folks, trust me before we start 3:36 building even a single button, we need 3:38 to finalize the core fundamentals of 3:40 what are we building and how should we 3:42 build it. We need to finalize the 3:44 tiniest of details like what platform 3:46 are we creating this app for? What are 3:47 the kind of features this will have? 3:49 Will my customers use this on their 3:51 laptop or on their phone? What kind of 3:53 features will they like? Are there any 3:55 competitors who are doing something 3:56 similar so we can take inspiration from 3:58 them? And most tutorials that I see on 4:00 YouTube only teach you how to use an AI 4:03 tool and build a front end. But 4:04 honestly, that is not as valuable as you 4:06 would think. The real skill is to 4:08 recognize a gap in the market, create a 4:11 product plan, and then use your creative 4:13 thinking to find better solutions, 4:15 analyze your competition, and then use 4:17 AI to fasttrack your building processes. 4:20 For this episode, as I told you, I'll 4:21 take a very simple problem statement. As 4:23 non-technical beginners, we will make a 4:26 recipe app that our customers can use on 4:28 their laptop and their phones using 4:30 their web browser. To get our features 4:32 and PRD, we will use Gro 3 which is 4:34 currently available for free. Once we 4:36 have a PRD, we will use Gro 3 to get 4:39 guidance on creating our backend as 4:41 well. Now, if you're wondering what is 4:42 backend, don't worry. I will explain you 4:44 everything in just a few minutes. This 4:46 is the prompt. I am using lovable AI and 4:49 superbase for back end to build a simple 4:51 and easy to use web app. I have never 4:54 done any coding before. I am a 4:55 non-technical person. Here is my app 4:57 idea. And if you want to explore other 4:59 app ideas, this is where you can 5:00 actually fine-tune and have a different 5:02 idea. We will make a healthy recipe 5:04 generating app where as a user you can 5:06 tell the app what you like to eat, your 5:08 allergies, your basic details, your 5:10 deficiencies, and your type of cuisine. 5:12 Once you click on generate, it will give 5:13 you a step-by-step recipe, the items you 5:15 need to buy and also give a YouTube 5:17 tutorial to watch. This is literally 5:18 what we had explained in the beginning. 5:20 So, I am setting the same context for my 5:22 AI tool. Otherwise, how will Grock even 5:24 know what I'm trying to build. Later on 5:26 in the prompt, I will say I want you to 5:28 support me throughout this conversation 5:30 because this will help you come back to 5:32 this conversation anytime you get stuck 5:34 with lovable or superbase. First, let's 5:36 make a detailed PRD for me so that I 5:38 have clarity on what we need to build. 5:40 This is the prompt that you need to copy 5:42 paste into your Grock. And by the way, 5:44 you can paste the same prompt in other 5:46 tools like chat, GPT, Claude and Gemini 5:48 as well. The difference won't be that 5:50 much. And I'll paste the prompt in 5:52 description as well. Let me show you how 5:53 to run this prompt on Grock itself. All 5:56 right. So here I am on grog.com and I am 5:58 using the free version. I haven't even 6:00 logged in. So what I'll do is I'll just 6:02 copy paste the prompt and I'll press 6:03 enter. So as you know within seconds gro 6:05 has understood what we need to do and it 6:07 has tried to create an overview the 6:09 goals the key features and this is where 6:11 you can have a proper discussion with 6:13 grock and actually understand what you 6:15 really want. So if you feel that there 6:16 are certain things that you want to 6:18 delete or certain things that you want 6:19 to improve you can simply have a 6:21 conversation with grock and actually get 6:23 the prompts one by one. So let's just 6:24 say I'm pretty happy with what I have 6:25 right. So I will say can you give me a 6:28 simple prompt to share in lovable to get 6:32 started. So yeah, now Grock has given me 6:35 the prompt. It has given me a list of 6:36 bullet points as well. And when Shaveik 6:38 does the demo, he will actually show you 6:39 how this works and how you can just copy 6:41 paste it and get your prototype sorted. 6:43 Another cool thing that you can do is 6:45 that can you refer some competitors or 6:49 apps that do something similar so I can 6:53 take inspiration. And by the way, if you 6:55 create an account on Grock, you will no 6:57 longer have any limits on this. We've 6:58 made a detailed video on how Grock 7:00 works. I'm just showing you how the free 7:02 version looks like. So, as you can see, 7:03 there's Yumi, there is Mime, there's 7:05 Super Cook. All of these things, these 7:07 all of these different applications will 7:09 help you understand what kind of 7:11 features are they working on because it 7:12 makes no sense to build something that 7:14 has already been built, right? If you 7:15 want to make something for your clients, 7:17 you have to make sure that it's unique 7:18 and useful enough. Now, once your PRD is 7:21 ready, you can now use Grog to create 7:23 prompts for Lovable. The issue is just 7:26 learning how to make PRDS and using 7:28 lovable will not help you build real 7:30 apps. That is why you need to work on 7:32 the second aspect of product building 7:34 which is understanding the basics of 7:36 product building using AI. Here we'll 7:39 cover some basic concepts like front end 7:41 and back end. So don't worry it's 7:42 extremely simple but very very 7:44 foundational for your success. So what 7:47 exactly is front end? So as I told you 7:49 we're making a recipe generator. 7:51 Whatever you see on the screen when you 7:53 actually use the application, this could 7:55 be the text, the buttons, basically 7:57 everything visual in front of you is 7:59 called the front end of your app. And 8:01 this front end is usually coded in 8:03 languages like JavaScript and CSS. Now, 8:06 you don't need to learn any of these 8:07 languages, but it's very very important 8:09 to know what they do individually. So, 8:12 let's first understand JavaScript. 8:14 JavaScript is a programming language 8:16 used to build logic for websites and 8:18 apps. Now, as you already know, a lot of 8:21 websites are usually developed in this 8:23 language called HTML and CSS. And HTML 8:26 CSS are like the bricks and cement that 8:29 you use to build a house. But JavaScript 8:31 is almost like adding wiring and 8:33 plumbing to your house. It is JavaScript 8:36 that actually makes your house function. 8:39 So, it basically is used to make the 8:41 entire website more interactive and 8:44 useful. But when websites become really 8:46 big and complex, JavaScript alone gets 8:49 very messy and hard to manage. It's 8:52 almost like doing the wiring and 8:53 plumbing for a huge hotel that has 8:55 hundreds of floors and thousands of 8:57 rooms. This is where ReactJS comes in. 9:00 The JS in React actually stands for 9:02 JavaScript. And ReactJS is a JavaScript 9:06 library made by Facebook. Now, let me 9:08 explain why did they even make this. 9:10 This JavaScript library is like a 9:12 pre-built house creating kit. So 9:14 developers can save time. It basically 9:17 helps you build user interfaces in a 9:19 very clean and reusable way. User 9:21 interface is basically what you see. 9:23 Your entire front end is actually just 9:25 the user interface. The entire button 9:28 system, the text and everything that you 9:29 click on actually comprises the user 9:32 interface. Now just like Lego blocks, 9:34 ReactJS helps you make UI using small 9:37 reusable blocks called components. Using 9:40 ReactJS, you'll be able to break your 9:42 website into small small components like 9:44 a button or a header and a card. And 9:47 each component has its own logic and 9:49 design. So you don't need to build these 9:51 things from scratch. Now, as I told you 9:53 in the beginning, your house is made up 9:55 of bricks and cement. And in a web app's 9:57 case, these are HTML and CSS. HTML is 10:00 something that we don't need to deep 10:01 dive into. But let's understand what is 10:03 CSS. CSS stands for cascading 10:06 stylesheets. It's used to make websites 10:09 look more beautiful, clean, and 10:11 organized. So, as I said, when you're 10:13 building a house structure, it's almost 10:15 like you use HTML to create the basic 10:17 skeleton of how the house looks like. 10:19 And then you make it useful using 10:21 JavaScript. But just a structure alone 10:24 with pipes and plumbing and wiring will 10:27 look like a boring cement box. This is 10:29 where CSS comes into the picture. CSS 10:32 gives style to your plain boring looking 10:34 website. It is CSS that controls your 10:37 app's colors, layouts, fonts, and 10:40 spacing. Without CSS, your web apps will 10:43 look like a word document from 2005. So, 10:46 in short, when we prompt lovable, the AI 10:49 will create our web app using JavaScript 10:51 and CSS. I'm explaining these things so 10:54 that when Shawik explains you, you don't 10:56 freak out when you see all of that code. 10:58 Just like ReactJS, there are multiple 11:00 libraries that web developers use like 11:02 Vue.js and Angular. But as beginners, 11:04 you don't need to worry about them right 11:06 now. Now that this is done, let's 11:08 understand what exactly is the back end 11:10 of your web app. Your back end is 11:12 everything that happens behind the 11:14 scenes of your website or app. It's 11:16 almost like the kitchen of your 11:17 restaurant. Your customers never see it, 11:19 but that is where all the action really 11:21 happens. In fact, it is the kitchen that 11:24 runs the business and not the exterior 11:26 or the design of the restaurant. If your 11:28 kitchen is not organized, nothing can 11:30 stay stable. Just like that, more than a 11:33 great front end, it is your back end 11:35 which forms the backbone of your web 11:37 app. Most AI tools usually just create a 11:39 front end. But in today's episode, 11:41 Shawik will explain you how to connect 11:44 superbase to lovable for creating your 11:46 back-end infrastructure. Now, within 11:48 backend, we will cover four basic terms. 11:51 Database, server, authentication, and 11:54 APIs. Don't worry, these terms sound 11:56 very complicated, but at this point, 11:58 because of AI, you don't need to build 12:00 all of these things from scratch. All 12:02 you need to do is improve your 12:04 vocabulary and understand what these 12:06 things do. Let's start with 12:07 understanding a database. Your database 12:09 is a place where all of your data and 12:12 information is stored and retrieved. 12:14 Think of it like a digital notebook or 12:16 an Excel sheet. Remember that we're 12:18 building a healthy recipe app. So let's 12:20 say that users can come here and search 12:22 healthy recipes, save their diet plans, 12:24 and even login to track their progress. 12:26 All of this information needs to be 12:28 saved in a database. When a user 12:31 searches for a high protein breakfast 12:33 option, our app needs a database to pull 12:36 all of this information. So basically, 12:38 our database will act like a 12:40 nutritionist's file cabinet, which will 12:42 be filled with every user's health 12:44 record, recipes, and plans. If this is 12:47 clear, let's understand what is a 12:49 server. A server handles all requests 12:51 from the app and gives proper responses. 12:54 It's like having a digital chef who can 12:56 take your order, look into the kitchen, 12:58 understand where the item is in the 13:00 database and actually serve the dish. 13:02 And in this case, the dish is data that 13:05 we have requested from the server. Then 13:07 let's understand authentication. 13:09 Authentication makes sure that only the 13:11 right person can access their health 13:13 data. This is pretty straightforward. So 13:15 let's understand what is an API. API 13:18 stands for application programming 13:20 interface. It allows two different apps 13:22 or systems to talk to each other. So 13:24 imagine that you're sitting in a 13:25 restaurant. API is like a waiter at this 13:28 restaurant. You call the waiter, tell 13:30 him your order, and he takes it to the 13:32 kitchen. The chef cooks it and the 13:33 waiter brings back the food to you. In 13:35 the tech world, this waiter is your API. 13:38 Because as a customer, you're not 13:40 talking directly to the chef or to the 13:42 staff which is working in the kitchen. 13:44 Your duty is to simply explain to the 13:46 waiter what you want. The waiter will go 13:48 pass on the instructions, get everything 13:50 processed and bring it back to you. I am 13:53 explaining these basics because if 13:54 you're a non-technical person, you won't 13:57 feel confused when Shawik is explaining 13:58 you how lovable works. Because without 14:01 understanding these core basics, it 14:03 makes no sense to learn no code 14:05 development. In fact, this entire 14:07 practice of coding with just a prompt is 14:09 called VIP coding. However, VIP coding 14:12 alone will not give you any tangible 14:15 results until unless you yourself have 14:17 understood the basics of product 14:19 building, customer research, and design. 14:21 Now that this is done, we will move on 14:23 to learn about lovable.dev. Currently, 14:26 there are many no code AI builders in 14:28 the market. The most popular ones 14:29 include lovable.dev, bolt new and 14:33 replet. So, let me now invite our 14:35 industry expert Shawik Roy. Shawik has 14:38 completed his MTech and computer science 14:39 from IIT Gandhiagar. He's previously 14:42 worked on AI and machine learning 14:44 research papers and has three years of 14:46 experience in building AI tools. Shawik, 14:49 welcome to the cutting edge school. 14:50 Thank you An. Let's get 14:55 started. Hello everyone, my name is Sig 14:58 and today we'll learn how to use Lovable 15:00 to create web apps. Open any web browser 15:02 like Safari, Google Chrome or Edge and 15:05 make sure you're connected to the 15:06 internet and then go to 15:08 lovable.dev. This is the screen that 15:10 you're going to see when you open the 15:12 app. Let's get familiar with the 15:13 interface. The first step is to create 15:15 your account. On the top right, you can 15:17 see sign up. So, go ahead and click 15:19 that. So, when you click sign up, you'll 15:22 be presented with three options. One is 15:24 to connect with GitHub or sign up with 15:27 Google or just use your email and 15:29 password. So I'm going to go ahead and 15:31 I'm going to click sign up with Google 15:33 and you can see this your email will 15:35 come up here. So go ahead click that and 15:38 go ahead click on continue. Okay. So now 15:40 you have to fill up some basic details. 15:42 Go ahead and fill what best describes 15:44 your role. Software developer where do 15:46 you work by myself? Personal projects. 15:48 I'm going to select beginner because 15:50 we're just learning how to do coding. So 15:52 beginner I want to learn how to build 15:55 web apps. How you found us? You can just 15:58 say YouTube and click on continue. Okay, 16:00 perfect. Now our account has been 16:02 created and now I'm going to show you 16:04 all these details in the interface. So 16:06 now that your setup has been done, we're 16:08 going to go to lovables interface and 16:11 we're going to check out some features. 16:13 The first thing that we'll do is we'll 16:14 go to support and here you can see three 16:16 options. One is ask the community, 16:19 second is docs and the third is premium 16:21 support. So you can go ahead and click 16:23 on ask the community and join lovables 16:26 discord servers. You'll find other 16:27 people like you who are building 16:29 something. If you click on 16:30 documentation, Lovable has very good 16:32 detailed documentation on how you can 16:34 start with your journey and you'll be 16:36 able to see what other people have built 16:39 and go ahead click on quick start 16:41 creating your first project. They have 16:43 videos and explained how you can start 16:46 creating a project on lovable in premium 16:48 support. If you're using a premium plan, 16:50 if you've paid for lovable, then you 16:52 will directly get support from their 16:54 team. One of the things that I wanted to 16:56 mention is if you click on ask anything 16:58 and you want to understand something 17:00 from the documentation you'll be able to 17:02 search it directly here. So instead of 17:04 searching about uh lovable on chat GPT 17:07 or on cloud any other app go ahead and 17:10 use this feature because this will tell 17:12 you directly from the docs used by 17:14 lovable for example how many 17:16 integrations does lovable have. So it's 17:20 going to search through its internal 17:21 documents and it's going to give you an 17:23 answer. So you can see that based on the 17:25 documentation I can see that we have 17:26 GitHub, Superbase, Stripe, custom 17:28 domains. So by integration what I mean 17:31 is lovable connects to all these 17:34 different tools that will allow you to 17:36 have different functions. In chapter 3 17:38 we're going to cover superbase. Stripe 17:40 is used for payments and similarly we 17:42 can also create custom domains like if 17:44 you need the name of your website to be 17:46 something specific then you can go ahead 17:48 with custom domains. If you click on 17:50 launched, this will take you to a 17:51 different page and you can see what 17:53 other people have built. They submit 17:56 projects and lovable hosts all these 17:58 people's apps. So you can see that some 18:01 people have built chat PDF uh recipe for 18:04 your kitchen your rules. So if you click 18:06 on any of these, let's say if I click on 18:09 chat PDF and this is just a screenshot 18:12 and then you can go ahead and click on 18:14 visit and these are all apps that have 18:16 been created by other users using 18:18 lovable. You can go ahead and try using 18:21 this or you can also come here and see 18:23 other apps right let's go back to the 18:25 homepage. So that was about launched. 18:27 Now if you click on learn again you'll 18:29 be taken to the documentation. So I 18:31 would highly recommend you to check out 18:33 the documentation of lovable when you 18:35 are building something. This will help 18:36 you to understand how different 18:38 integration works and what you can do 18:40 with lovable. This is work in progress 18:42 since lovable is new. They're updating 18:44 their documentation continuously. So 18:46 everything that you see today might not 18:48 be the same one year from now. So I 18:49 would highly recommend people to start 18:51 getting the habit of reading 18:53 documentation. Okay. So we have covered 18:55 these threes and now if you click on the 18:57 lovable symbol here you'll be taken back 18:59 to the screen on the bottom if you 19:01 scroll down you'll be able to see these 19:03 four options on under my project all the 19:06 projects that you build will come here 19:08 right now we don't have any projects u 19:10 if you click on latest you'll find other 19:12 projects that people have done and uh 19:14 this is less than a minute ago so a lot 19:16 of people have been using loable and 19:18 they're creating apps if you click on 19:19 featured you'll see one of the best 19:21 projects that people have done have been 19:23 featured Ed by Loveville. One of the 19:25 things that I want to mention is if you 19:27 see this green symbol here, it means 19:29 it's connected to Superbase. In chapter 19:31 3, we will understand what Superbase is. 19:33 So, right now, let's move forward with 19:35 templates. So, templates is something 19:37 that will help you to start your product 19:40 journey. So, you can go ahead and look 19:42 at any one of these landing pages or 19:45 website design and understand how some 19:47 people have built these designs and you 19:49 can also use them if you want or you can 19:51 start from scratch. In our use case, 19:53 we're going to start from scratch. But 19:54 if you want, you can go ahead and if you 19:56 want to create a creative portfolio, you 19:58 can click on this template and you can 20:00 use that. If I scroll down, you will 20:02 find this at the bottom. This is the 20:04 pricing plan. So, for starters, you can 20:06 pay $20 a month and that will give you a 20:09 higher limit. So, right now, we just 20:11 have five prompts. On top of your daily 20:13 limit, you'll get 100 more per month. 20:15 And similarly, you can choose the one 20:17 you want. And let's go back to uh the 20:21 bottom under product. You can see that 20:23 there's an option called hire a partner 20:25 and become a partner. I wanted to 20:27 highlight this about lovable. How you 20:30 can hire a lovable partner as well. So 20:33 this is basically people or agencies who 20:35 have been using lovable and they will 20:37 charge you some money to build the 20:39 application that you want. This has been 20:42 like a marketplace, a new marketplace 20:44 that's not getting so popular as of now, 20:46 but in the future it might become a 20:48 thing. So you can only find a few 20:50 lovable partners right now and you can 20:52 also apply to become a partner. So go 20:55 down, you can click on become a partner 20:58 and they will have a form for you to 21:00 start. So if you click on apply as 21:03 partner, it'll take you to a type form 21:05 and then you can apply to lovables hire 21:07 a builder program. Before that, you need 21:10 to know how to use lovables. So, we'll 21:12 go back to the UI again and check out 21:16 other options. Now that you're familiar 21:18 with lovables interface, let's 21:20 understand how to structure an effective 21:22 prompt to get the best output. We can't 21:25 expect the AI to give very good results 21:27 if the prompts are not well defined. 21:29 Like we say in computer science, garbage 21:31 in, garbage out. For consistent 21:33 outcomes, it helps to structure your 21:36 prompt into clear sections. A 21:38 recommended format given by lovable uses 21:41 these four labeled sections. Context, 21:44 task, guidelines, and constraints. 21:47 Context gives background or the bigger 21:49 picture. For example, we're building a 21:52 project management tool for tracking 21:54 task and deadline. This sets the context 21:57 or the stage for AI task. It states 22:00 exactly what you want done. Now, 22:02 example, create the UI for the project 22:05 creation page. guidelines specifies how 22:08 to approach the task or any preferences. 22:11 Example, use a clean design following 22:14 material UI principles and ensure it's 22:17 mobile responsive. Constraints declares 22:20 any hard limits or must not. Example, do 22:23 not use any paid libraries or do not 22:26 alter the login page code. If you use 22:28 these four label sections provided by 22:31 lovable, you'll be able to get good 22:32 outputs and writing effective prompts 22:34 will help you get better results as your 22:37 app. One of the examples that I'm going 22:39 to show you, we have already seen that 22:41 an wrote this prompt and gave it to 22:43 Grock 3. So what we're going to do is 22:45 we're going to refine this prompt and 22:46 we're going to do the same in Gro 3 and 22:48 see what prompt we need to give to 22:50 lovable. So the goal that we're trying 22:52 to achieve is we're building a healthy 22:54 recipe generating app where the user can 22:56 tell the app what they like to eat, the 22:58 allergies, basic details, deficiencies, 23:01 and the type of cuisine. So once they 23:03 click on generate, it will give them a 23:05 step-by-step recipe, the items you need 23:07 to buy, and also a YouTube tutorial to 23:09 watch. So let's go ahead and open Grock. 23:13 So once you go to your new tab, go to 23:16 Groc. You can click on grock.com and you 23:18 can click on sign up. I'm going to click 23:20 on sign up with Google. So let's copy 23:23 paste this 23:26 prompt. So as you can see this is the 23:28 basic prd that Grock is generating for 23:31 us. What we essentially want is an 23:33 enhancement on top of it. This is a 23:36 particular prompt that lovable team has 23:39 given. And what I'm going to do is I'm 23:42 going to use this as a context or as a 23:44 reference to Grog to tune my prompt 23:46 according to this. So what I'm going to 23:48 do is I'm going to tell Grog that okay 23:51 this is great now convert this into a 23:53 detail prompt for level it's a no code 23:55 app builder with the following template 23:57 okay so this is the prompt that we have 23:59 gotten detail requirement for level the 24:02 app view so I'm going to just copy and 24:04 paste it one of the other things that we 24:06 can also do is write shorten the prompt 24:10 uh with technical details and we're 24:12 going to use the think mode here this 24:14 looks good let's copy this go back to 24:18 And now this is the point where we start 24:20 prompting. So what I've essentially done 24:22 is I have a basic idea that I want to 24:25 make a healthy recipe generating app. I 24:27 use gro to refine the prompt and now I'm 24:29 pasting that prompt into loable. So now 24:32 loable is going to write some code and 24:34 meanwhile that's happening I'm also 24:36 going to walk you through some of the 24:38 tools that you might see on the UI here. 24:40 So if you click on this particular 24:42 button here on top on this dropdown you 24:44 can see that you have a daily credit 24:46 limit of five. What that means is like 24:48 you can use five prompts after that your 24:50 limits are going to be exhausted. So you 24:52 might have to subscribe to the paid 24:54 plan. So by default your projects is 24:56 going to be a public project. Anyone can 24:58 view and remix. What this means is 25:00 everyone uh who's unlovable or anyone 25:02 can go to this project and they can 25:04 build on top of the app that you have 25:07 built. So if you click on go to 25:09 dashboard it's going to take you back to 25:10 your dashboard and this particular 25:12 project is going to be there. If you 25:13 click on project settings you'll see 25:15 that the project name has been defined 25:17 wholesome culinary magic and the owner 25:20 this is I think our username. We can go 25:23 ahead and change that as well. So you 25:25 can see the text tag has been defined as 25:27 vit react shaten and ts means typescript 25:30 messages count one all edit done u this 25:34 one. So if you go to the visibility 25:36 part, you'll need to you'll need to be a 25:39 starter user which is $20 a month to 25:41 make it private. These are all the 25:42 options for project settings. And let's 25:45 see what we have done. So this 25:47 particular button will help you to see 25:49 the code that lovable is writing for 25:51 you. But we don't want to see the code. 25:53 So we can click on this one. Okay, it's 25:55 still spinning up the preview. We'll 25:57 find this. So if you click on this hide 25:59 sidebar, it's going to hide the sidebar 26:00 for you. If you click on view history, 26:03 you're going to see all the versions 26:06 that Loable has created till now and 26:08 it's still working on the first one. So 26:10 as you prompt more and we're going to do 26:13 that in this free version. We're going 26:14 to exhaust all five prompts. We'll be 26:16 able to see five versions. Okay. So it 26:18 took some time to generate this output 26:21 and sometimes you might get an error. 26:24 Don't be disheartened because in coding 26:26 and especially in VIP coding you'll have 26:28 to prompt again and again to solve this 26:30 error. So click on try to fix. See what 26:33 the error is. You can click on show 26:35 error and it will show you the error 26:37 that it has. It has a lot of errors. 26:40 Let's let lovable fix it for us. So it's 26:43 working on the code and meanwhile you 26:45 can see all these files have been 26:47 created. So as you can see that we have 26:49 finally gotten an output and this took 26:51 some time. So in case if you're not 26:53 getting an output it might be because 26:55 the servers are overloaded. So just try 26:57 refreshing that page and this is the 26:59 output that we've gotten. So earlier it 27:01 ran into a few errors and you can ask it 27:04 to resolve itself and this is the output 27:06 that we have gotten. Looks very good. If 27:08 you want to look in uh a different tab, 27:11 you can click on open preview in a new 27:13 tab. And if you want to see how it'll 27:14 look on the phone, you can click on this 27:16 button and it will switch to mobile 27:19 preview mode. I'm going to go back to 27:20 the desktop one and I'm going to see how 27:22 it looks. After you've gotten the basic 27:24 UI, you want to understand how you can 27:28 connect the back end as well. We're done 27:30 with the UI part. It looks good. Now, we 27:32 need to test our functionality. So, 27:34 let's see what else we can add here. 27:36 Your personalized healthy recipes. 27:38 Favorite food. Let's go here again. 27:40 Spinach dislike food. Onions. Okay. 27:44 Allergies. I'm going to say that I have 27:46 gluten allergies or something. Yeah. 27:48 Cuisine type Indian. And deficiency say 27:52 B12 or something. Activity level 27:54 moderately active. 27:56 Yeah. Okay. So you can see that it's 28:00 giving you a result like golden 28:02 turmeric, lentil curry. This is what we 28:04 can prepare. Nutritional info. It gives 28:06 you calories, protein, carbs, fats. Wow, 28:09 this actually pretty good. So you can 28:11 understand that uh it's going to take 35 28:13 minutes. Indian recipe, medium shopping 28:16 list. These are the things that you need 28:17 to buy to make this recipe. Let's see 28:20 what we have done till now. We have the 28:22 Meditarian chicken quinoa bowl, ginger 28:25 sesame. Go to generator. What we can do 28:28 is we'll try to add some more 28:31 functionality into into this one and 28:33 we'll try to create a profile. So this 28:35 basic structure looks pretty good. Uh 28:38 let me go back to loable here. So let's 28:41 first understand and summarize quickly 28:43 what we did. We had this prompt um a 28:46 very simple prompt that we had given. We 28:48 refined it with grog 3. We enhanced it 28:50 and um we got this particular prompt and 28:54 I pointed this out and there was some 28:56 errors and it finally created this uh 28:59 nice looking UI. Now I'm testing the 29:01 functionality the functions which are 29:03 not working. I'm going to prompt that 29:05 and I'm going to try to fix that. Okay. 29:07 So this is what our product looks like 29:10 and understand that I had given a prompt 29:12 to focus mostly on the UI first because 29:15 if we have the front end developed then 29:17 we can focus on the back end logic right 29:20 so let's go back to the prompt that we 29:22 had created and understand that use 29:25 lovable components focus on dashboard 29:27 future features as placeholders so a lot 29:30 of these features if I go back to the 29:31 app here right edit profile or save 29:34 changes these features are not working 29:36 right now because we've just focused on 29:38 the UI and we just wanted a basic a 29:41 fully functional app right so right now 29:43 let's try to give a user sign in let's 29:46 continue so I'm going to go ahead and 29:48 I'm going to ask use superbase for 29:52 authentication and also add two options 29:56 so I'm going to use sign up with Gmail 30:00 and email password okay so we're going 30:04 to go ahead to chapter three in a bit 30:07 and we'll try to understand what 30:09 superbase is. Okay. So I've written this 30:11 prompt to add superbase for 30:13 authentication and add two options. One 30:15 is to sign up with Gmail and the other 30:17 one is to sign up with email and 30:19 password. Right? So I also want the 30:22 other application I mean the features to 30:25 start working. But let's just focus on 30:27 authentication first. Right now we do 30:29 not have people who can sign up to our 30:31 app. So I want that to happen and see 30:34 what we can do. So I'm using Superbase 30:37 for authentication and let's see what it 30:40 gives. So it's telling me that it 30:41 requires authentication components and 30:44 integrating with 30:47 Superbase. Superbase is an open-source 30:50 backend as a service that provides 30:52 authentication, database, Postgress SQL, 30:55 storage and realtime capabilities. So 30:58 we're going to learn how to set up 31:00 Superbase account and how to use that in 31:02 lovable. So what it does it it helps 31:06 lovable users by handling data storage 31:09 authentication and other back-end 31:11 functionalities without requiring manual 31:14 setup. So it's a really good win-win 31:17 situation for new developers because 31:18 they don't have to go through the hassle 31:20 of setting up all the tables by 31:22 themselves and creating all these 31:24 things. So we're going to look at how to 31:26 set up Superbase now. Okay. So let's 31:29 see. First we need to click on this one. 31:31 So click on superbase here and it's 31:33 going to say connect superbase account. 31:36 Click on connect superbase. So now it's 31:38 asking you to create an account here. So 31:40 you have an option to create an account 31:42 with GitHub or you can use your email 31:45 and password. I'm going to use the sign 31:47 up option and I have two options. One is 31:49 with GitHub and the other one is with 31:51 email. So I'm going to use my email and 31:53 I'm just going to create a password. 31:55 Okay, let's see. Okay, sign up is 31:59 complete. So, check your email to 32:01 confirm. Okay, I'm going to go to my 32:03 email and I'm going to confirm that 32:05 you'll find an email from Superbase. 32:07 Click on confirm email address and it 32:10 should lead you to the dashboard. Okay. 32:13 So, before you go to the dashboard, this 32:14 is an important step. You need to create 32:16 an organization and under that 32:18 organization, you need to create 32:19 projects. So, I'm going to say AI with 32:22 Roy and type of organization personal 32:25 and you can go ahead and choose your 32:27 plan. I'm going to click on free right 32:28 now and go ahead click on create 32:30 organization. Okay. So now I need to 32:33 name the project. I'm going to call it 32:35 lovable healthy recipe generator. Okay. 32:39 You can name your project whatever you 32:41 want. And you need to give a strong 32:44 password. My case I'm going to give the 32:46 same password as before. Yeah. And you 32:49 can select the region. So whichever is 32:51 closest to you. I'm going to select 32:53 South Asia Mumbai. And I'm going to 32:55 click on create new project. Okay. So 32:57 this is the homepage that you'll see on 33:00 your Superbase account and you can see 33:03 on your left this is the navigation 33:05 panel and you have table editor, SQL 33:08 editor, database authentication, storage 33:10 and all these things, right? So if you 33:12 click on table editor here right now 33:14 there are no tables and we just wanted 33:17 to connect lovable with superbase and 33:20 lovable will create those tables for us. 33:22 So let's go back to lovable again. Click 33:24 on superbase. Connect superbase again. 33:26 Now it's asking us to authorize it. So 33:28 go ahead and click on So it will show 33:31 you the organization name that you just 33:32 created. Click on authorize lovable. And 33:36 this is done. Okay. So it's showing you 33:38 that your connection is successful. And 33:41 now you go back to project. If you click 33:43 on superbase again, now it's showing you 33:45 the organization name. And you need to 33:48 connect to the project. So we just 33:50 created loable healthy recipe generator. 33:52 So click on connect. Okay. So let's go 33:54 back to the project and let's see it's 33:56 got this sign in and sign up UI created 33:59 for me and yeah or connect with Google. 34:02 Now I don't have the tables created for 34:05 me. Let's go back to Superbase here. I 34:08 don't have any tables. So you will need 34:10 a database to store your values. Right? 34:13 So when your users sign up you need to 34:15 store those values or the recipes any 34:18 kind of data you need to store it. So 34:20 let's go ahead and ask level to create 34:22 tables. Create tables for users for user 34:26 signups and creating and they should 34:30 have a saved recipes table linked to it. 34:35 Create these create these two tables. 34:39 Let's see. Okay, so I'm asking loable to 34:42 create these tables for me and it's 34:44 going to write all these SQL queries and 34:46 it's going to push it to superbase. 34:47 Right. So if you want you can go ahead 34:50 and look into it, but if you don't 34:52 understand it, don't worry. We're just 34:54 going to accept all the changes and 34:55 we're going to it's going to summarize 34:56 it what it's doing. So it's going to 34:58 create a profiles table and it's going 35:00 to create a saved recipes table. Right? 35:02 This is what we wanted. What's the 35:04 profile table doing? It's linking 35:06 superbase built-in authentication user 35:08 table. And this is linked with user ID. 35:11 The second one, the save recipes. Okay. 35:13 a trigger that will automatically create 35:14 a profile when a user signs up. Right? 35:18 So, it has a realtime functionality for 35:20 both these tables. So, let's click on 35:22 apply changes. SQL already executed. And 35:25 let's check our daily credits. So, we 35:28 still have three credits left. And let's 35:30 see if we can get to some nice 35:33 functionalities before we run out of 35:34 credits uh in the free account. So, it 35:37 says the SQL migrations have been 35:39 successfully executed. It's updating the 35:42 code to use a configured superbase 35:44 project for authentication. If you want 35:45 to see the code, go ahead and click on 35:47 this button and it's waiting for ST 35:50 sandbox to start. And here you can see 35:53 all these integrations and you can see 35:55 under superbase, this is the file. If 35:58 you click on integration, this is where 35:59 all the superbase code will be. Just to 36:02 show you the context, um this is uh the 36:05 superbase URL. This is the Superbase key 36:08 that it has automatically linked to my 36:10 account. Okay, in case if you want to 36:13 look further into the data and how it's 36:15 building these pages, go ahead and do 36:17 that. Okay, let's see the preview. It 36:19 shows that to test the authentication, 36:21 try signing up with email password. Try 36:23 signing in with Google. Okay, we need to 36:25 do both of that. So, let's do sign up 36:27 first. I'm going to do a sign up with my 36:30 email. Let's check it out. So if I 36:33 choose the email option, I think I'm 36:35 going to receive an app an email to 36:37 confirm my identity. So let's select the 36:41 same thing. All right. So we have 36:44 clicked on create account and it says 36:47 verification email sent. You can go back 36:49 to the authentication here. We can click 36:51 here and configure email providers. So 36:54 here you can just deselect this one 36:57 confirm email. So users will need to 36:59 confirm the email address while signing 37:01 in. And go ahead and click on save. So 37:03 now I don't think we need to confirm the 37:06 emails. So this is just for testing. So 37:08 I'm not going to write too much. I'm 37:10 just going to say abcad at the rate 37:13 example.com. Yeah. Okay. That's perfect. 37:16 So authentication part is now working. 37:18 Click on log out. Let's see if it works. 37:21 Yeah, this is working. I've just given a 37:24 very basic password. So we were able to 37:26 use authentication and let's see if this 37:28 is added to our authentication. Okay. 37:30 Yeah, we can see 37:32 abcexample.com and it's been confirmed 37:35 last signed in. So when you're testing, 37:37 I think it's better to just give uh this 37:40 option. So you go to authentication, you 37:42 click on this and you click on configure 37:45 email provider and it will give you with 37:47 this options from email. when I click 37:50 generate recipes. So what I'm trying to 37:53 do here is I'm trying to add my OpenAI 37:56 API key into this one. So when I click 37:59 on generate, so let me just go in and go 38:03 into the account here. Okay, once I'm 38:06 in, so I want to generate recipes 38:09 through OpenAI or through the API used 38:12 in OpenAI. Okay, what I'm going to do is 38:14 I'm going to click on when I click 38:16 generate, use my OpenAI API key to 38:21 generate AI output for recipes. Okay, 38:25 let's see. So, I think this will be our 38:27 last prompt until we exhaust the daily 38:29 limits. I also wanted to show you how 38:31 you can connect your OpenAI API key. 38:34 It's a paid version, but I'm still going 38:37 to show you how it works in creating 38:39 your account and creating OpenAI API 38:42 keys. I'm just going to search for 38:44 OpenAI API keys and go ahead click on 38:49 OpenAI platform or this one. I think the 38:52 first one. So click on login I guess and 38:55 you can login by Gmail. Okay. So this is 38:58 the API keys page. You can click on 39:01 create secret key and you can then write 39:04 my test key and just give whatever name 39:06 you want. So just say lovable testing 39:10 lovable app. Yeah. and you can click 39:13 project and then you can create your 39:15 secret key. Okay, so this is the only 39:18 time that you can see this key. So you 39:20 won't be able to view it again. So 39:22 please do not share your API keys with 39:25 anyone. So you can click on copy. You 39:27 can go ahead and click on click add API 39:29 key and you can paste your API key here. 39:32 Click on submit. API key is added 39:34 successfully. And now it's going to 39:36 create that functionality for you. So 39:38 it's creating a superbase edge function 39:40 to handle the OpenAI API calls and 39:43 update the front end to use it. So what 39:46 it's basically doing is it's doing some 39:48 sort of edge functions here in 39:51 Superbase. For now just for simplicity 39:53 just understand that it's going to help 39:55 you to connect OpenAI's API with your 39:58 front end. So all we need to care about 40:01 is making sure we know how to create 40:03 this API key and we click on done. So 40:06 the other thing that you might need to 40:08 check is your billing because this is a 40:11 paid version. So yes, of course you'll 40:14 have to check how much usage you have 40:17 and you can check the total number of 40:18 requests to these APIs, total spends and 40:21 things like that. Okay. So one last 40:24 thing that I want to mention is you can 40:27 click on publish to publish your 40:30 application. So right now, let's let 40:32 this last final feature to get done and 40:36 then we're going to publish this app and 40:38 it's going to use its own URL. So you 40:41 can go to this URL with your phone and 40:43 you can essentially use this 40:44 full-fledged web app on your phone as 40:47 well. So you can also connect to a 40:49 custom domain. So I'm going to click on 40:51 publish here and I'm going to check this 40:54 URL. This is just the preview. Okay. So 40:58 I've put my OpenAI API key. I wanted to 41:02 show you a similar experiment that we 41:04 were doing with a paid account from 41:06 OpenAI and how it looks. So I'll go back 41:09 to another lovable here and I'll show 41:11 you the work that we had done. So you 41:15 can go ahead and check this out. So what 41:18 this does is it's the same thing. It's a 41:20 healthy recipe generator. And I also 41:22 have this button that I created. It's 41:24 called OpenAI API tester. You can just 41:27 click on test API and it's going to test 41:29 if the OpenAI API is working or not. 41:32 It's working correctly. So I'm just 41:34 going to check the API keys and here I'm 41:38 just going to check on logs or usage I 41:41 think. Yeah. So total request is 12 and 41:44 tokens uses. Yeah, 1200. So I can just 41:47 check if I've used my API key. Only 12 41:50 calls had been made so far. So I'm just 41:52 going to write the same thing here. I 41:54 think I'm going to just write chicken 41:57 deficiency, vitamin D, allergies, dairy, 42:01 cuisine, Indian. Let's select this one 42:04 and click on generate recipe. So, I'm 42:08 showing you this example because this is 42:10 what it would look like if you have 42:12 connected your OpenAI API key with this. 42:15 So, it's going to give you that shopping 42:16 list. It's going to give you the 42:18 ingredients you need to get, cooking 42:21 time, how many people it'll serve, and 42:23 then you can go ahead and create a to-do 42:25 list like this as well. You can also 42:27 copy to clipboard and the entire 42:29 shopping list will be copied and you can 42:31 write whatever you want because it's 42:33 directly connected to OpenAI and you can 42:35 save your recipes here. The login page 42:38 is created. So this is how you would 42:40 create a fully functional app. So that 42:42 was a short tutorial on how to use 42:44 lovable and superbase. Multiple lovable 42:47 projects can share the same superbase 42:49 backend making it possible to create 42:51 various front-end interfaces for a 42:53 single database. Finally, I'll give you 42:55 some points to troubleshoot some common 42:57 issues you might face while starting 42:59 your journey as a VIP coder. When the AI 43:02 misunderstands your request, break your 43:04 request into smaller and clearer parts. 43:07 Provide an example of what you want. 43:10 Explain your goal, not just the feature. 43:12 When the result doesn't work, ask the AI 43:15 to explain how the solution works. Test 43:17 one feature at a time. Be specific about 43:20 what isn't working as expected. When you 43:22 get technical jarens and you don't 43:24 understand that, ask for explanations in 43:27 simpler terms. You can use the template 43:29 which says, "Explain to me like I'm 43:31 five." You can request for analogies to 43:34 similar. You can ask, "What would this 43:36 look like to a user?" That was a short 43:39 course on how to use lovable and 43:41 superbase. I hope you enjoyed. But 43:43 folks, remember that this crash course 43:46 is just to give you a head start. You 43:48 cannot expect to learn some basics and 43:50 start earning money. So to give you a 43:52 clear road map for the next 30 days, let 43:55 me bring back 43:59 an. So, if you're a non-technical person 44:02 watching this right now and you're 44:03 wondering 44:05 coding, just be patient. This is not a 44:08 core coding course. This is you 44:10 understanding how to use AI and how to 44:13 direct these tools and eventually hire a 44:15 team of developers to build apps for you 44:18 using these no code tools. The truth is, 44:21 you cannot stop here and you also cannot 44:23 expect to earn money after watching just 44:25 one video. If you really want to build 44:27 amazing stuff, you have to level up. 44:30 Developers, product managers, and 44:32 designers, all of them are slowly 44:34 becoming into this one single role 44:36 called product engineer. And Twitter has 44:38 been talking about this for a very long 44:40 time. Some companies are also calling 44:42 these people as product builders. It's 44:44 almost like becoming a very hybrid Swiss 44:47 army knife of a person who can manage, 44:50 code, and design and using AI tools and 44:52 not actually learning things from 44:54 scratch. So they would learn the first 44:55 principles, build their vocabulary, 44:58 understand what does what and then learn 45:00 AI tools that can help them build things 45:02 fast. Now this entire journey starts 45:05 with you learning the basics of coding 45:07 and product development which are all 45:09 the first principles and it doesn't have 45:11 to be intense but you need to learn all 45:13 of the first principles that have been 45:15 going on for a while. AI can help you 45:17 sort this out very easily. In fact, 45:19 we've made multiple tutorials on chat 45:21 GPT, GPT bots, and Grog. And in every 45:24 case, I remind you to paste complicated 45:26 documentations and ask AI to explain it 45:29 to you as if you're a 10year-old. So, if 45:32 you're having a difficult time 45:33 understanding a certain topic in back 45:35 end, just copy paste documentations or 45:37 you can upload a PDF and ask Chad GPT to 45:40 explain what you do not understand. 45:42 Break down each and every concept till 45:44 it finally clicks. In a span of 2 to 3 45:46 months, you will start making sense of 45:48 things faster than ever. Once you're 45:51 comfortable, don't just sit and practice 45:53 alone in your room. Go out and intern at 45:55 a small agency. There's tons of AI 45:57 automations and entertain agencies out 45:59 there. So many people are looking for 46:01 young talent who is experienced in 46:03 things like lovable. Get real world 46:05 experience because when you work under a 46:07 team, when you actually see how tools 46:09 are built, your learning speed doubles. 46:12 Watch what they do. ask questions and 46:14 try to contribute as a beginner and do 46:16 this internship for at least 3 to four 46:18 months. Then once you have practical 46:21 experience, start building internal 46:23 tools for yourself and that agency which 46:25 you're working for. Each time you build 46:27 something, try to upload it to GitHub in 46:29 case you have not signed an NDA. 46:30 Otherwise, you can make your personal 46:32 projects and start uploading your 46:34 progress on LinkedIn and GitHub. Over 46:36 time, your GitHub profile and your 46:37 LinkedIn profile will become your living 46:39 breathing portfolio, which will help you 46:41 get more opportunities. There's a very 46:43 high chance that whatever you learn 46:45 today will get outdated tomorrow. So, 46:47 make sure that you stay in touch with 46:49 all of our latest tutorials. In the next 46:51 3 years, if you start today, you'll be 46:54 one of those rare people who will have 3 46:56 years of experience in VIP coding. Do 46:58 not let this opportunity go to waste. 47:00 Every month, we are seeing new tools, 47:02 new APIs, new frameworks. So I'm telling 47:05 you this beforehand that what works 47:07 today might become outdated tomorrow. 47:09 We've already explained the future of 47:11 work in one of our videos based on the 47:13 World Economic Forum's report. I would 47:15 strongly suggest you to watch that 47:17 entire video. I will share the link in 47:19 description. I hope this course helped 47:21 you get more confidence with VIP coding 47:23 and no code development. Let us know in 47:25 the comment section if you want us to 47:26 make more such videos. If you want us to 47:28 train your company on AI tools, then 47:30 send us an email on 47:32 collabate.com. We're also launching our 47:35 advanced courses for professionals on 47:37 genai and UX design. The weight list 47:39 form is in description. I hope that 47:41 you're taking care of your mind and 47:43 body. This is your do anchara signing 47:45 out. If you enjoyed this video, then do 47:47 check out this video of the same series. 47:50 I am sure that it will help you even 47:52 more.