Transcription
These two no-code tools 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 told you that these two services can be combined, and this combination in terms of quality will be simply unbeatable? 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, in principle, this number of requests is enough, but for full-fledged work, this will be extremely insufficient. At the same time, under the hood, Lavable has very high-quality settings, rules, which allow it to create very high-quality, beautiful applications based on references, literally from one prompt, without any additional settings. And this is, in fact, just ideal for beginners, for those who are trying, getting a feel for no-code development, and do not want to dive deep into it yet. And we take this wonderful feature of Lavable. 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, Cursor, and refine it there to perfection. You will ask me a reasonable question: "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 in Lavable, you will get only 400 requests to the neural network, while for $20, 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 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 will specifically not describe any complex prompt now, so that you can see in real time how cool Lavable handles the task, the task of creating just a cool, cool design, a cool service, literally from one simplest prompt. Let's write "create a full copy." A copy of what? Let's choose some Russian service that is well-known. I tried to do Yandex Food here. Let's do Avia Sales. Avia Sales. 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. It will think now, create, plan what it wants to do, and think about how it will implement it. By the way, I already wrote about this combination in my Telegram channel. And there I was also advised to test a service called Bolt. In principle, you can also transfer a project from Bolt to Cursor. But personally, I like how Lavable makes the design, how it makes 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, Lavable made us a nice logo. Lavable made the header. All animations work. The Login and Registration buttons, the layout is the same as on the real Avia Sales. The ability to choose from where to where. Even the city change functionality is present. The calendar component is connected. Find tickets works for us. Listen, even the ticket search functionality works. It's clear that the visual is not yet the same as AviaSales. Let's give it a reference. But you can already see that the visual is very pleasant, and this is just wonderful. Let's give references 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 place 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 visual 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 and authorization page yet. So, and a screenshot of this page. Let's ask it to refine the visual. Refine the visual in accordance with the attached screenshots. And let me also add the Avia Sales logo. Unfortunately, it turned out that the SVG vector format is not supported, so what am I doing? I am converting SVG to PNG format and I will upload this logo as a PNG image. And in principle, that's it. Now, with a couple of prompts, we will bring our service to an acceptable state so that we like it visually. And then we will upload it to Cursor. By the way, pay attention that there is a switcher here between the viewer, between the browser, and between the code that the neural network wrote for us. That is, if you understand it, you can go in and fix something manually, but this requires a subscription. Approximately like this, everything looks now. I was not satisfied with the visual. I made several edits, in particular, I colored the header, colored some texts. 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, everything is very cool for us. Let's click "Find Tickets." Here. This is how the ticket selection looks. In principle, it is very, very similar to the visual that AviaSales provides us. So, unfortunately, none of this is clickable, but we didn't have the task of adding 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 GitHub. So. And a repository was automatically created for us. You can see the notification here in the bottom right and a 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 they have described the stack on which the project works. They have described the instructions for cloning the project to yourself. So, in principle, here is our entire project. We can take it for free. So, now it's time for us to move to Cursor. Let's open Cursor, click on the "clone repo" button. And we need to paste the link to our repository here. So, the link is here. We can copy it from here. Or go to GitHub. And we can get the link from here. Open "code." And here it is in the "clone" section. Here it is. HTTPS. Link to our project. Click on the corresponding icon, go to Cursor. 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 run this project locally on our device. Press Ctrl J or Command J to open the terminal. Or click on this middle icon. It opens the terminal at the bottom. The terminal is, roughly speaking, a command line where we can execute commands and manage the project in some way. In this case, we only need to execute one command now. And it looks like this: npm or npm install. Let's do npmii. This command will now install all the necessary packages, all the necessary dependencies, so that our project works. After all dependencies are installed, enter the command npm run dev to run our project in dev mode, that is, development mode. Here. And a list of links appears, which we can follow to open our project locally on our device. Press Ctrl or Command if you are on MacOS, and hover over the link, click on this link. Here's even a hint, command + click to follow this link. Here. 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 will copy it now and point it with an arrow. I will use Claude 4 Sonnet. I will point it right here, add a screenshot to the context and write the edits. The block with inputs is overlapping the text. So. 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 the 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, here privacy mode is enabled, then 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 create an authorization and registration page in accordance with the existing styles. So, in principle, Cursor has worked. Let's see what it has done 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. 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 doing a fake account creation. 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. Because now we have done the front-end part. This is just a shell, and under the hood, there is absolutely no logic, no database where, for example, registered users can be saved. And, well, there is nowhere to get information about flights, and so on. 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 comprehensive course on no-code development of sites and web applications using the Cursor program. And in this course, we go from simple to complex. We go from a regular website on 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 simply not hacked. And we will lay out and write a calorie counting application using neural networks from a photo based on a ready-made Figma layout. 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 foundation for no-code development is provided directly in the course, so you don't have to worry about it at all. Follow the link in the description, enter the promo code "summer" when paying, and get a 52% 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 with the backend now. 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. But, um, they are not yet in Lavable, because we, uh, have not yet pushed the new changes back into our repository on GitHub. And to do this, you need to either use commands, I'll show you which ones now, git add . to commit all your files, all changes, 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. And with the Git push command, we send all these changes to our remote repository. And after that, all these changes will also be pulled into Lavable. But we can do it simpler. We can ask our neural network to take all the changes and push them to the repo, well, to the repository. And in principle, Cursor will execute all these commands now. 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, that's 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. 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. Go to the Extensions tab here and you will enter the store of all extensions. And you need to download the "Continue" extension and the "R Code" extension here. Go to the page, click on the blue "install" button. And these extensions will appear here in the layers panel. Here they are. In principle, from here we can open them and work with them. But I am 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, R Code is the main extension that I use to generate code. It also has modes for asking questions, for designing, and for programming directly. Here in the settings, you can specify your provider. There are a large number of providers, including Open Router. And there is also the possibility to use free neural networks, for example, free Deepseek V3 and even the thinking model R1. And yes, through this extension, all my work happens. And what I like about R 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 in the case of indexing, the neural network 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. Here we will analyze all this in more detail. 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 Open Router for autocompletion. And yes, everything will work great for you. And in principle, these two extensions work very well. Be sure to use them, be sure to watch the next video, where we will analyze this in maximum detail. That's all from me. Be sure to give this video a like, subscribe to the channel. A cool animation plays when you subscribe. You can check, it's not clickbait. Here. 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 an absolutely 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. All materials, all links are in the description to this video. Take it and act.