Transcription
Good day everyone and welcome to the Replet tutorial for beginners. So if you've ever wanted to start coding right from your browser without installing anything, Replet is one of the easiest tools to begin with. In this video, I'll take you through a full beginner's tutorial, how to create code and deploy your projects step by step.
All right, so as an introduction, this is our website. Now I'm just going to tell you what Replet is, and then we will continue on with creating our first account and I'll show you how to use it. So Replet is an online coding platform that lets you build and run code in dozens of programming languages, from Python and JavaScript to C++, HTML, and even frameworks like NodeJS. It's free, beginner-friendly, and perfect for learning and prototyping quickly.
All right guys, and just like I said before we begin using uh this service, let us of course create an account first. So for that, on the top right, click on sign up, and in here we have a few ways to sign up. We can continue with Google, which is the most common way. It's very easy. If you have your Google account, for example, logged in into your browser, you can easily just press this button and use that account to sign up and then continue. If you've already been coding and you have experience with GitHub and you have a GitHub account, you can continue with GitHub. And uh two of the last uh options for us is you can continue with X, formerly known as Twitter, and email and password. So now uh let us choose the proper way, whichever you wish to sign up.
Okay. So for example, if you want to uh continue signing up with uh GitHub, as you can see, GitHub by replet would you like would like a permission to okay. And now let us authorize, and we'll be redirected. And as you can see, just like that, in just a few seconds, our account is created. Okay. And as you can see, uh we have the same page, but now we have a different interface. So pretty much when you create an account, you will have, of course, full functionality of replet's uh so that you can start pretty much creating code and uh, you know, as you can see, describe your idea of what what you want to build. So we can start building.
And on the left panel, we have our apps that we have created, along with the homepage. We have published apps. These are pretty much the ones that you've created and if you've published them, uh if they are fully developed and are ready to be used. This is going to be our tab. Uh we also have integrations, uh something we will talk about later. So this uh service supports integrations, many of them. So as you can see, we have uh the Postgress uh QL uh replet database that can be connected, app storage, authentication, and domains. And below, as you can see, we have a whole bunch of other connections and integrations that we can connect, for example, Asana, influence, uh we have Notion, OneDrive, even Spotify, even YouTube. So if you wish to connect your accounts, uh you can do that.
And in usage, now this will basically tell us how much uh basically resources we've used, and also the billing will be displayed in here, I suppose. So depending on your plan, if you have a free plan, you can see how much of free stuff you've used and actually understand if you need to buy a premium or not. And also guys, if you're looking to install this application and the service to your PC, as you can see, it has install rebblelet on. And we have a phone. Uh I'm not really sure for which platform this is. Oh, it's for both. Okay, so it's for Android and Apple. And we have also the desktop version. All right. But as you can see, the interface is pretty much the same. So if I go back here, yeah, it's not really that much different. So maybe for the speed's sake, you can yeah, grab yourself a desktop application. Just press on the button whether you're on Mac, Windows, or Linux, and grab yourself an application. If you're on the phone, for example, you can grab it for your iPhone or your Android phone, whichever model you have.
And from here, guys, you can pretty much uh start from scratch, which will be just typing in your prompt in this fields and the chat field. And you can create your, for example, web app, as you can see, data app. You can even create a game, which is awesome, where you have uh agents and automations as well. Or you can also start with an idea. As you can see, we have here these small little templates that can be used to start. So, if you open them up, for example, you start chat. And as you can see, it's writing in uh filling in for us automatically the prompt uh based on that little template. So, what's this going to be? It's going to be a sketch canvas uh where users can draw together on shared boards. Interesting.
And as you can see, before it actually starts creating our uh sketch canvas, it actually asks us some questions. So as you can see, uh let me clarify a few important details before proposing a plan. So basically, the AI is asking us questions about the details on what uh exactly we want. So if this is a sketchboard, so for example, it asks, uh since this is a multi-user collaborative app, should um uh users be able to create accounts? So pretty reasonable uh question, or should this be just simpler, for example, anonymous sessions with temporary boards? So I'm just going to uh respond by points. So the point number one and the question number one is whether to have the live accounts that will pretty much have the info in them, or should we have a uh pretty much anonymous sessions. I will just say anonymous sessions. Okay.
And now getting to point number two and the question is, so for generating abstract brushstroke our images, do you have a preference for how this should work? So it asks if we want to use an AI image generation, and of course, it gives us the choice for which AI uh will be used, generate procedural/algorithmic images on the client side, no external API, or use a simple approach with pre-made patterns. So let us go for the first one. I mean, AI can generate the images for us easily these days. So let us go with the option number one. And now point number three, it asks us, real-time drawing a sync between users, a websocket-based synchronization acceptable, or do you have other preferences? So let us let us just say, yeah, let's have a sync. Okay. And just press enter. Now we have answered its questions, and now let us see what it's going to create.
So guys, also at any time, uh as you're creating your pretty much pretty much first project, you can also see what's happening, right? So as you can see, we are planning now. So this is the first stage, so basically where you explain what you want, add some details, etc. And then the step number two, which is final, of course, is to be creating the actual uh building, sorry, the actual uh what is it for us, the actual sketch canvas. And as you can see, now it tells us that um it found the integrations, and now let me propose a comprehensive plan. So this is the plan. If you wish to read this whole thing, you can. If you're, you know, serious about building a project, you absolutely should. And of course, you can uh at any time change your plan, right? As you can see, you can just message the agent once again. If you have any suggestions or corrections, or you want to completely maybe redo it from the scratch, you can just change plan and of course go through all the points again and then uh provide what you actually want.
And what do we have? I've created a feature list based on your request. If everything looks good, we can start creating. So in here, we have two choices. We have build an entire app, which is 28 plus minutes. And we have start with the design. So best if you want agents to build out the full functionality of your app, or if you want a design prototype first, then iterate on visuals and features. So uh for the sake of saving time for this particular video, I'm just going to choose start with a design and then start designing.
And now guys, in terms of the interface, let us discuss. So on the left panel, you have your files tab also, and in here the chat where you can see and write, type in your corrections and suggestions. In the center, we have the code, which will appear after the project will uh will be created. And on the right, if you press on this button, we have our files. If you wish to browse them, you can go ahead and do that. And let us now wait until our um app or canvas will be generated.
And also guys, if you're willing to pay for premium, that's also available. You can also also take a look. So for example, we have monthly plans, replet core, and teams. If you're a solo dev, I would recommend just uh uh grabbing the $25 one. We have the agent. Uh we have live apps, unlimited private apps, uh credits, and pay as you go for usage. Also, if you want to learn more, you press on here and you can actually see which kind of uh features and benefits you're getting. Okay, so we get the hardware, of course, that will generate uh our apps and other projects, storage, as you can see, AI models, security, so you can read these out. But if you're using uh the free version, just make sure that you're getting the most out of it because of course, these guys, they have to make money, and they won't put all the best features in the free plan, which is understandable.
Okay, as you can see, it's now creating images. So, it's creating a beautiful real-time collaborative drawing application. That's great. So, we can see what's happening. Okay, so I suppose we have our preview loading up very shortly. So, what do we have? This is a visual preview of your application's building blocks. Interesting. So, as you can see, we we can see our um always forget what it what it is. Drawing application with several sophisticated features. Sketch canvas. Okay. So, our sketch canvas is building. All right. As you can see, we have our buttons being created, which is cool. Also, you can resize, as you can see, guys. If you wish, that's no problem. I'm going to just close that. So let us just wait now.
All right. So pretty much as you can see now, our sketchboard is generated, and now it's up to you what you want to do next. So for example, our AI is talking to us now. It says that it's it created a visual preview. If everything looks good to you, I can start building the functionality of your app. So you can just keep keep um the iteration of design. So if you wish to customize it further and go ahead and you know, maybe add something or change something, you can just keep iterating. Press this button, provide what you want, and then, you know, after you're finished, click on build functionality. So as you can see, the functions are not possible to interact with yet. So if I'm clicking on the elements, nothing's happening. So that's why we need the functionality. I'm just going to press build and let us wait now.
All right. So, if you wish to get the API key, uh we should already have a tutorial on that. If not, just let us know in the uh comments below and we'll make one for you. All right, I'm going create this key. See that? And then insert it and continue. All right, as you can see, guys, we already have the buttons and stuff, so it's doing its work. We even have a switch toggle between light and night uh modes. That's really good. That's great. So, let us wait a bit more.
All right. So, it seems like there's been some kind of error, but I guess we did end up with some kind of application here. So, our uh canvas sketch canvas is somewhat functioning. For some reason, it tells me that agent encountered some kind of error while running. We are investigating the issue, and now they're telling me to buy the premium. Okay. So yeah, pretty much guys, you can just go ahead and publish this like this. Uh you just type in your uh for example, app name. So like this. Yeah. And oh, we we need to upgrade to even publish. Interesting. So basically, this is not a free service, guys. Not a free service. You need to uh pretty much buy the premium to have more actions. Yeah. As you can see, the agent agent usage is 100% used. So the usages are not enough probably for me to basically create the app uh completely, which is fine.
So, uh yeah, guys, that's pretty much how you do it. And just like I show showed you, you just um upgrade the uh to the premium subscription and then press on publish. And after this, you'll be able to publish your uh your app or whatever you're creating. And you're pretty much done.
And also guys, one of the best parts about Reb is real-time collaboration called multiplayer mode. You can click on invite button at the top right, which is right over here, and share the link with a friend. They can edit code with you live, just like Google Docs coding. You can even chat inside the editor while coding together. Great for pair programming or teaching. So press on this, as you can see, multiplayer. You add people by username or email, and then just invite them, and you can code together. You can also create a private link as so. And now you can just, yeah, send it to them, and they join you.
And also guys, if you wish to download your project, you can also click on this files section, and in here, you just click on three dots, and you can download a zip. So pretty much, you're downloading the code for this app, and if you wish to work with this app somewhere else, you can do that. And that's pretty much it, guys. That's your full beginner's guide to replet. You've learned how to create projects, uh, collaborate live, and even deploy apps, which we did at the end, even with trouble. If you found this tutorial helpful, make sure to leave a like and, of course, subscribe for more in-depth coding guides. And I'll see you in the next one.