Transcription
These two tools for no-code development are simply impossible to beat. And with their help, you can implement very, very beautiful websites and applications, without code and without additional preparation. And I am now talking about the services Lavable and CRSOR. And you are probably used to hearing about them separately. But what if I tell you that these two services can be combined, and this combination in terms of quality will be simply invincible? Lavable is an online service for creating websites and web applications using neural networks. It has a free tariff, which gives five requests per day, but no more than thirty requests per month. And, let's say, um, in order to test the service, in order to get a feel for this no-code development of ours, in principle, this number of requests is sufficient, but for full-fledged work, this will be extremely insufficient. At the same time, under the hood of Lava, there are very high-quality settings, rules, which allow it, literally from one prompt, without any additional settings, to create very high-quality, beautiful applications based on references. And this is, in fact, simply ideal for beginners, for those who are trying, feeling out no-code development, and do not want to dive deep into it yet. And we take this wonderful feature of Lavable. Uh, we create our project here. We create its base here. Thanks to Lavable's internal settings, our project turns out to be beautiful and functional. And then we transfer our project to the second service, to Cursor, and refine it there to perfection. You will ask me a reasonable question: "But why not just buy a tariff in Lavable and use only it, since it is so cool? Why all these movements?" Um. The fact is that for 100 dollars in Lavable, you will get only 400 requests to the neural network, while for 20 dollars, that is five times cheaper, you will get as many as 500 requests, 500 fast requests to neural networks and an unlimited number of slow requests. That is, in this case, having exhausted all your resources, you will not be left with nothing, with a half-finished project. Well, if you don't consider paid options at all, or just want to try this no-code development of ours for now, I will also tell you at the end of the video how to get a free analogue of Cursor, which in some moments is even better than the original. Well, let's start. And we are already in the Lavable service. And if you still don't have an account here, then be sure to go through a simple registration and you can start with me. I specifically won't describe any complex prompt now, so that you can see in real time how cool Lavable handles the task, the task of creating a cool, cool design, a cool service, literally from one simplest prompt. Uh, let's write "create a full copy." A copy of what? Let's choose some Russian service that is well-known. Here I tried to do Yandex.Eda. Let's do Avia Sales. Avia Sales. Uh, yes, be sure to buy advertising from me, AVIA Sales. And maybe we'll make a full clone live. And look what's going to happen now. I sent my simplest prompt to Lavable, and now it will see what to do. Uh, it will think now, create, yes, plan what it wants to do, uh, and think about how it will implement it. Um, by the way, I already wrote about this combination in my Telegram channel. Uh, and there I was also advised to test a service called Bolt. Uh, in principle, you can also transfer a project from Bolt to Cursor. Uh, but personally, I like how Lavable does the design, how it does the visuals, more. I will leave links to both services in the description, of course. And also in the description, you will find a link to my Telegram channel. I write a lot of interesting things there. Subscribe. Oh, well, cool. Look, uh, it made us a nice logo. Lavable made the header. All animations work. The Login button, registration, the layout is the same as on the real Mafia Sales. The ability to choose from where to where. Even the functionality of changing the city is present. The calendar component is connected. So, find tickets works for us. Listen, even the ticket search functionality works. It's clear that the visuals are not yet the same AVIASALES. Uh, let's give it a reference. But you can already see that the visuals are very pleasant, and this is just wonderful. Let's give refs. Uh, to the service. I'll take a screenshot of what I want to see now, or maybe even upload a full logo. Here's the first screenshot. I just do Ctrl C, Ctrl V and paste the screenshot directly into the chat. And now I'll take a screenshot of the flights page so that the neural network understands, more or less, what visuals we want from it. That is, I am satisfied with the functionality of what was done here. Everything is functional, everything works, everything is clickable, sorting works, filtering works. It is for this approach to work that I like Lavable. Well, yes, we haven't reached the registration authorization page yet. So, and a screenshot of this page. Let's ask it to refine the visuals. Uh, refine the visuals in accordance with the attached screenshots. And let me add the Avia Sales logo as well. Uh, but, unfortunately, it turned out that the SVG vector format is not supported, so what do I do? I convert SVG to PNG format, and as a PNG image, I will upload this logo now. And in principle, that's it. Now, in a couple of prompts, we will bring our service to an acceptable state, so that we like it visually. So. And we will already upload it to Cursor. By the way, pay attention that there is a switcher at the top between the viewer, between the browser, and between the code itself that the neural network wrote for us. That is, if you understand, you can go in and fix something manually, but for this, a subscription is required. Approximately like this, everything looks now. I was not satisfied with the visuals. I made several edits, in particular, I colored the header, uh, I colored texts in some places. So. And, in principle, this is how it works now. We have one small visual bug, but, in principle, in terms of colors, in terms of composition, we have plus or minus everything very cool. Let's click "find tickets." So. This is how the ticket selection looks. In principle, it is very, very similar to the visuals that AVIASALES provides us. So, unfortunately, none of this is clickable, but we didn't have the task to add clickability here. After our project is ready, we click on this icon, this is the GitHub icon, and click on the "Connect GitHub" button. Of course, you must have a registered GitHub account, but we'll pretend you do. I think you'll figure out how to register on the GitHub service. So. And a repository was automatically created for us. You can see the notification here in the bottom right and the link to clone this repository. What is a repository? A repository is, roughly speaking, a folder with files somewhere in the cloud on the internet, on GitHub. And now we can pull this folder with files to ourselves directly into the Cursor program and continue working on this project there. You see that the stack on which the project works is described here. The instructions for cloning the project to yourself are described, yes. So, in principle, here is our entire project. We can take it for free. So, now it's time for us to move on to Cursor. Let's open Cursor, uh, click on the "clone repo" button. And we need to paste the link to our repository here. Uh, so, the link is here. We can copy it from here. Or go to GitHub. And we can get the link from here. We open "code." And here it is in the "clone" section. Here it is. HTTPS. The link to our project. We click on the corresponding icon, go to Cursor. Uh, and paste our link here at the top. Click "clone from URL." So. And let's choose where we want to copy our project. Okay. We have pulled all the files from GitHub. Now we need to somehow launch this project locally on our device. Uh, press Ctrl J or Command J to open the terminal. Or click on this middle icon here. It opens the terminal at the bottom. And the terminal is, roughly speaking, a command line where we can execute commands and somehow manage the project. In this case, we only need to execute one command now. And it looks like this. npm or npm install. Let's do npmii. Uh, this command will now install all the necessary packages, all the necessary dependencies for our project to work. Uh, after all dependencies are installed, enter the command npm run dev to launch our project in dev mode, that is, development mode. So. And we get a list of links by which we can go to open our project locally on our device. Press Ctrl or Command if you have MacOS, and hover over the link, click on this link. Here's even a hint, command + click to follow this link. So. And our browser opens. And this is our project locally. Here, localhost with port 8080. And now we can make local changes to our project. And let's do the following. Let's fix this visual bug. I'll copy it right now and point it with an arrow like this. So, I will use Clot 4 Sunnet. I'll point it right here, uh, add a screenshot to the context and write the edits. The block with inputs is overlapping the text. So. Uh, well, in principle, you know what else I wanted to do? I want this block with inputs to match the width that we have in the header. If I'm not mistaken, 1368 pixels. So let's ask to remove this margin. Also with a screenshot. Remove the margin from the block with inputs on the main page. So. And let's make changes. We don't have an authorization and registration page yet. Let's write "create an authorization and registration page." So, the code base is being indexed. Let's wait for the indexing to complete. Indexing is necessary for Cursor to understand what project it is working with. For this, your code is partially sent to Cursor's cloud. So-called embeddings are created there. And then, if you have privacy mode enabled, then yes, if privacy mode is enabled, your code is deleted afterwards, and only these embeddings, file names, at most, remain in Cursor's database. So. Let's wait for indexing. So, I asked the neural network to fix the bug with the overlapping input block, asked to remove the margin, and asked to lay out the authorization and registration page in accordance with the existing styles. So, in principle, Cursor has done its job. Let's see what it did for us. But I see that the bug has indeed been fixed, and the indents have indeed been corrected. Now there is a page for login and registration. Well, yes. Login and registration. I see that the styles of our application are used. This gray color was on the flights page. Let's try to register. Stanislav test. Um, let's see if there are any required fields. Yes, it is a required field. So, test@gmail.com. Okay. Password. Oh, my dear. It even did checks. Okay. And that's it, we are creating a fake account. Of course, an account will not be created for real. And in principle, I could now generate some simple API, write in Cursor, in the same way, so that the front can interact with the back. So. Because now we have done the front-end part. This is just a shell, and under the hood, it has absolutely no logic, no database where, for example, registered users can be saved. And, well, there's nowhere to get flight information from, and so on. So. But if we delve into all this now, the video will stretch for an hour. And probably there is no point in this as such, because the development of a full-fledged backend, a full-fledged service, a web application, using Cursor, I teach in my most complete course on no-code development of websites and web applications using the Cursor program. And in this course, we start from simple to complex. We go from a regular website in HTML, CSS, and JavaScript to a full-fledged web application, to the frontend and backend. It also covers database testing, debugging, and, of course, the emphasis is on security, ensuring the security of your web application, so that you are literally, well, just not hacked. So. And we will lay out and write an application for calorie counting using neural networks from a photo, based on a ready-made mockup from Figma. And most importantly, this course is aimed at beginners, and you don't even need to have any technical knowledge of frontend and backend, because all this necessary base for no-code development is given directly in the course, so you don't have to worry about it at all. Uh, follow the link in the description, enter the promo code "leto" when paying, and get a fifty-two percent discount on payment, on the course payment. The promo code will be valid for only 3 days, 3 days after the release of this video. So, sign up for the course and enjoy the content. Therefore, yes, as I said, we will not extend the timing now with the backend. We will not touch all this, because we have already touched authorization and registration, and, I think, quite successfully. So, authorization and registration work locally. Uh, but, um, they are not yet in Lavable, because we, uh, have not yet pushed the new changes back to our repository on GitHub. And to do this, you need to either use commands, I'll show you which ones, uh, git add . to commit all your files, all changes, so, add them to the commit. enter the command Git Commit with the -m flag and specify a comment in quotes. For example, "added authorization and registration." This comment will be displayed directly on GitHub, on GitHub. And with the Git push command, we send all these changes to our remote repository. So. And after that, all these changes will also be pulled into Lavable. So. But we can do it simpler. We can ask our neural network to, uh, take all the changes and push them to the repo, well, to the repository. And, in principle, Cursor will execute all these commands now. So. And we also cover the basics of working with Git for no-code development in the course in a separate module, so you don't have to worry. So, in principle, git status, git commit, and all changes are pushed to the repository. After that, we can go to Lavable. And let me refresh the page just in case. And we can see if the changes have been pulled. Let's try to log in. Yes, both authorization and registration work. Well, great. Approximately in this way, you can create a cool visual in Lavable and then refine it, polish it in Cursor. And, by the way, not only in Cursor, as I promised, now I will tell you about a free alternative to Cursor. First, you will need a free open-source code editor called Visual Studio Code. The link to it will also be left in the description. Let's go to its website, click on the button, and download the program for your operating system. After installation, after opening the program, you will see a similar interface. Yes, Cursor is very similar to Visual Studio Code, because they are literally two identical programs. Cursor is a fork of VS Code. Uh, let's go to the Extensions tab here and get to the store of all extensions. And you need to download the Continue extension and the r code extension here. So. Let's go to the page, click on the blue "install" button. And these extensions appear here in the layers panel. Here they are. Uh, in principle, from here we can open them and work with them. Uh, but I'm used to having all these tools on the right side, so I open the right bar and just move these tools with the mouse like this into the tabs. So, uh, rcode is the main extension that I use to generate code. It also has modes for asking questions, for designing, and directly for programming. Here in the settings, you can, yes, specify your provider. There are a large number of providers, including Open Router. And there is an option to use even free neural networks, for example, free Deepseek V3 and even the thinking model R1. So. And yes, through this extension, all my work happens. And what I like about code, unlike its analogues, is the presence here in the experimental tab of the ability to index your own code base, just like in Cursor. This significantly improves the neural network's responses, especially in large projects, when, well, in projects where the neural network can get confused. Because the neural network, in the case of indexing, will search for code not only by file and directory names, but by the meaning of the code, so to speak. But this is already the topic of the next video. Be sure to watch it. A hint will appear in the top right corner now, if I'm not mistaken, and also in the description of this video. We will analyze all this in more detail there. You may notice that the Continue extension also has a chat, also has an agent mode, the ability to install various neural networks from various providers, including OpenAI. But I absolutely do not like how this application, how this extension works in terms of code generation. But here you can install autocompletion. Well, you can connect a free model from OpenRouter for autocompletion. And yes, everything will work great for you. And, in principle, these two extensions work very cool. Um, be sure to use them, be sure to watch the next video, in which we analyze this in maximum detail. That's all from me. Be sure to give a like to this video, subscribe to the channel. A cool animation plays when you subscribe. You can check, it's not clickbait. So. And click on the bell. Unfortunately, no animation plays when you click the bell, but you can imagine it in your head. This greatly boosts the channel, and this is a completely new channel. This is the second video on the channel, and you will help me a lot with these actions. It costs you practically nothing, and it will be very pleasant for me. Here are all the materials, all the links are in the description to this video. Take it and act.