Make Web Apps in minutes with this new tool

This new feature from Replit called the Replit Agent has just changed the game and made it super easy for anyone to be able to make a web app. So if you've ever had an idea for a web app that you think would be cool or useful or just something that you wanted to make, but you weren't sure how, you thought it was too hard or it would take too long, then this Replit Agent is going to be absolutely perfect for you because it allows you to create web apps in literally under 10 minutes. If you haven't seen me before, my name's Rory Ridgers and I'm passionate about AI and helping business owners to implement AI into their business. So if that's something that you're interested in, then do consider subscribing and sticking around for the video. So in this video, I'm going to be using Replit's new AI agent to make me a web app that's going to help people to track all of their expenses. So you'll be able to sign up, make an account, and then set your monthly income and set your fixed bills, you know, like your rent, your car insurance, things like that. And it's going to generate a graph, so it's going to minus your income from your fixed costs and tell you whether you're in the green or in the red. It's going to give you a graph to help you visualize it, and then also it's going to allow you to put one-off expenses in. So anytime, you know, you go out to dinner with friends or you buy a new t-shirt or a new jumper or something like that, then you'll be able to log back in and log these one-off expenses, and it will update the pie chart and update your dashboard to tell you if you're in the green or red still. Okay, so this is us inside Replit. As you can see, we've got the Replit agent here. And something to note is that this is only for paid plan users at the moment because it's sort of early access. So do bear that in mind if you're going to be following along with this video. So we're just going to dive straight into it. I've already prepared a prompt, so I'm just going to paste that in and I'm going to sort of talk you through what I've included in there. Okay, so basically what I've said is I want to make a web app that works as an expense tracker. I want to use it to be able to input their monthly expenses, and underneath the inputs is a paragraph automatically updates display the results. In the input section, there will be a field for the name of the expense and then a field for the price, and then also a field for the category. And these categories are going to be things like groceries, utilities, leisure, clothing. And then I also want users to be able to make their own custom categories, so for any other type of expense that they might want to put in there. And then I've just said that I want the pie chart to update and show sort of percentages so users can see where they're spending the most amount of money. And then I also want a feature where the users can set a fixed monthly income, and that will sort of set as a fixed variable unless the user of course wants to change it. And then they can also set fixed monthly bills, so things like car insurance, rent, those type of things, they can set them as fixed costs. Then what's going to happen is all the one-off costs and all the set monthly costs are going to be taken away from the monthly income. It's going to update the pie chart and it's also going to give a number, and that number is either going to be in the green or in the red. So yeah, that's the prompt. We're going to hit start building. And to begin with, the Replit agent is just going to sort of come up with a plan on what it's going to do, and it's also going to give me some options of features that I might want to include in this web app, and it just gives us the option to select them so that we can add them into our web app. Okay, so this is what it said to me, that I'm working on a detailed plan for an interactive expense tracker, and it's given us some optional extras. It said implement user authentication for personalized expense tracking, add a data export functionality, create monthly yearly comparison charts for expense analysis, implement budget setting and alerts for overspending. So for this one, we're just going to add the implement user authentication location for personalized expense tracking. We're just going to add that one. We can come back later and add in these other things, but for now we just want to keep it simple. But we want users to be able to sort of make an account and they have their data saved. So we're going to tick that, we're going to click Approve Plan and Start, and then it's just going to build us sort of an initial prototype. And the initial prototype is never going to be right first time, you're almost always going to have to work on it, but that's fine. I'm going to show you how to do that, so don't worry. Okay, so it's building it right now, and as you can see, it's kind of cool, the process that you can see that it takes, because it shows each step of what it's doing. And the thing that really sets this Replit agent apart from other AI agents that can code is able to do sort of almost everything in the backend, like it's able to set up databases, install dependencies, things like that, that a lot of these other AI agent, AI coding assistant sort of things can't do, but the ReplAgent can do all of that. So you don't have to worry about pretty much anything really. You just have to prompt it and tell it what you want. Okay, so this is what it's come up with first. Obviously there is an issue here, but I'm going to show you what to do when things like this come up. So we've got just a title here and then a sidebar. So the sidebar is working. You can see we've got the admin expenses, uh, fixed monthly costs. We can either tick these expenses to be fixed monthly costs or not. And then a new category. And the setup— set income bit isn't there. So this is just the initial prototype, obviously, so it's not quite how we want it. So what we're going to do is we're going to copy and paste this. And as you can see here, the Replagent has asked us a question. It says, is the Expense Tracker web application loading correctly? Can you see the title Interactive Expense Tracker and the sidebar for adding expenses? I'm going to say yes, it's Loading. So this is one of the things that the Replit agent does. It will ask you questions on the things that is made. It will make an iteration to it and it'll say, can you test out this part? And then you've got feedback to it, what happens when you do that. So that's all I've done there. I've just said, yeah, I can see the sidebar and I can see the title, but on the main section it gives me this error. Then it should be able to— as you can see, yeah, I've identified the issue and I'm making the necessary changes to resolve the error. Okay, so now this is the second iteration it's given us and it's just said same thing. Is Expense Tracker web app loading correctly? Can you add an expense and set the monthly income without any errors? So as you can see, this time it's loading correctly. So let's try and add an expense. So we're just going to say dinner with a friend. Let's say that cost $30. Category, we're going to put other for now, then hit add expense. Expense added successfully. Let's see if we can set the monthly income. So we're going to set it to, let's just say, $2,000. Update income. Income updated successfully. Okay, so as you can see here, we've got our income at $2,000, and then we've also got our total expenses so far. It's just at $30, which was dinner with friends. It's given us a balance of $1,970. And then our expense distribution, which at the moment is 100% other, which was just what I put for the dinner with a friend. So now I'm going to see if we can set a fixed monthly cost. So I'm going to say rent, and our rent is $700, let's say. We're going to add the new category and just call it bills, and then set this as a fixed monthly cost and see if it works. Okay, so it's added it. I think I might have accidentally not clicked add new category, so it has just saved it as other. But it's successfully looking the income and logging all the expenses and taking it away and giving us a number. It's given us expense distribution, which is good. And then the expense lifts, very simple here. Yeah, perfect. So we're just going to say yes, it's all working correctly. So I've just said yes, it's all working correctly. And as you can see up here, this is just the sort of checklist that the Replit agent is doing. So all I had to do was build this initial prototype and then implement the user authentication. They're the only things on this checklist. So it's just finished building the initial prototype, and now that we know that's all working, it's going to try and implement the user authentication. Okay, so this is what it's given us. It's just the same title, and it said please log in or register. And if we come over to the sidebar here, we can register or log in by creating a username and a password. So I'm just going to do that quickly. So I've just set a username and a password. I'm going to hit register, see what happens. Registered successfully, please log in. So I should be able to just hit login. Okay, logged in successfully. Okay, so now we're getting this after we've logged in, which probably isn't what we want. So I'm just going to copy that, come over to the Replit agent. The Replit agent said, can you verify if the login and registration functionality is working correctly? Please try and register a new user and then log in with the created credentials. So I'm just going to say It let me— it let me register a user. So I just said it let me register as a user and then log in, but when I logged in on the main page, I got this error. And I've just copied and pasted the error over to it. So it should be able to fix this pretty easily. Let's see what it comes out with. Okay, so this is what it's given us. It's taken us back to the login screen and it's just asked if we can try and register and then log in. We shouldn't need to register this time, but we'll see. We should just be able to log in and then try and add an expense, set an income, and set a fixed monthly expense as well. So let's try and do that. So first I'll try and log in with the old credentials I used and see if it's remembered. Yeah, okay, so it's remembered. Logged in successfully. And now again, I think this is the same error as before, not too sure. We're just going to copy and paste that. We're going to say it let me log in. But I got this error on the main page. Let's see what it comes out with. Okay, so again, it's taking us to the same thing, asking us to log in and just test everything out again. So we're going to do that. I'm going to hit login. Okay, so it's logged us in properly. Let's see if now we can sort of set an income, add some expenses, and see what happens. So for the first expense, we're just going to go rent again, add the amount to 700. Category. Let's add a new category and call it Bills. It's a fixed monthly cost. And then Add Category. Hopefully it should— this work. Yeah, so you can see Category Bills added successfully. I'm gonna hit Add Expense. And that, yeah, looks like it's gone through perfectly. So you can see now our balance is -700, and our— all of our expense distribution is just on Bills. So now we're going to see if we can set a monthly income. Again, we're just going to go 2,000, update. Income updated successfully. Okay, but now we've run into a bit of an issue. It's updated our income, but then it's got rid of our monthly costs. So obviously that's no good. Let's again try and see if we can add a monthly cost. So it's already got the data in here. Let's see if we can just hit add expense. Yeah, okay, now it's reversing. It's got rid of the income and added the monthly cost. So let's just say that to the Replit agent. So I've just said to the Replit agent, when I set a monthly expense, it went through, but then when I set the income, it took off the monthly expense. And then when I tried to expect set the expense again, it took off the income. So basically it's only let me do one or the other, which isn't what we want. So let's see if it can come up with a plan to fix this issue. Okay, so again, taking us back to the login page. Let's log in quickly. Okay, so it's logged us in fine, and this time it's actually saved our monthly income. That's a good sign. Let's see if we can add the rent again. Okay, so I've done rent, $700, and the category is bills, and I've ticked the fixed monthly cost box. So let's add the expense and see if it still keeps our income this time. Okay, it has. So total expenses, $700. Income, $2,000. And our balance is $1,300. The expense distribution is all on bills. We got the expense list, that's perfect. So let's now see if we can add a sort of one-off expense like dinner with friends like I tried last time. We'll try that again. Dinner with— okay, so I've done dinner with friends, the amount was $30, the category is leisure, and then I'm going to tick off monthly cost because it was just a one-time cost. Then we're going to hit add expense, and then as you can see, it's updated. The total expenses is $730, our balance is now $1,270. And expense distribution, we can see 4.11% leisure and 95.9% bills. Okay, that's perfect. So I'm just going to say to the Replit agent, yes, it's all working perfectly. So I've just said to it, yes, it's all working perfectly. Let's see what it comes out with now. Okay, so now it's given me the option to deploy it, but there are a couple things I want to tweak with it. So I'm going to see how it handles that. I want to change sort of the layout and the feel of it a little bit, and we're going to see if it lets me do that. Okay, so I'm logged in now here, and one of the things I want to change is I want to have the one-off expenses right on the main page so you don't have to open the sidebar. And I want to keep the sidebar just for the fixed variables, so the fixed income and the fixed expenses, so that it's more accessible for the user. And I also want to bring the pie chart back up to the side because I liked it there. So we're just going to say that to it. Okay, so I've just said to it, can you move the one-off expenses to the main page at the top so it's more accessible and keep the sidebar only for the fixed cost and the fixed income? Also, can you bring the pie chart back up to the top to the right of the summary and the balance? So just around here. I liked it when it's there. I don't like the fact that now you have to scroll down to see it. It's just annoying. So we're just going to hit send and see what it comes out with. Okay, so this is what it's come out with. I've just logged in again, and as you can see what it's done is it's given us 3 tabs. So Add Expense, Manage Income, and Dashboard. I actually quite like the way it's done this. I think it looks quite nice and it's really accessible. One of the things we can do to see this better is we can hit New Tab here, and then we can open it in a new window so we can see it properly and fully. So I've just gone ahead and logged in, and then this is what we see here. All this sidebar is now is just for me to log out, but you can see this is the main thing. We've got Dashboard, Add Expense, and Manage Income. This is very cool. I like the way this looks. So at expense, you can see this is really, really easy. If you want to add a new category, it's just down there and we hit add category. The expense name in here, the amount there, and then the manage income, obviously super simple. So we're just going to add some more costs and then see what it looks like. Okay, so I've just gone ahead and added a couple more expenses. We've got rent, dinner with friends. I've put car insurance as a set monthly cost, $100. We got some new clothes for $70, and then we got a parking ticket for $50. So you can see here, it's visualized it on the pie chart. It's given us a balance. We're in the green. We're on $1,050. Our total expenses are at $950. Our total income is at $2,000. So this is working really well. This is almost exactly what I want. There are a couple more things. I think I want to stylize it a little better and make it look a little bit more modern. I'm going to go ahead and prompt the Replit agent to do that, and I'll come back when it's done. Okay, so this is what we've got at the moment. I could play around with it a little more and try and get it perfect, but for now this is just a simple example of what this ReplaAgent can do. So it's kind of what we've got: add expense there, manage income, and then the pie chart, and then all the expenses listed there. It's really quite simple and only took a couple prompts for it to kind of start looking like this. So, and now I would deploy this, but it costs extra, and as this is just an example, there's not really any real need for me to pay to deploy this, but If you were to deploy it, all you would do is come over here, set your deployment, and choose which configuration you'd like. And then you just scroll past all of this and come down here and click deploy. And that's really all there is to it. Okay, so now if you're following along, you should have your own expense tracker web app or software. And if you weren't following along with me, then you should know now how to use the Replit agent, and you should now be able to create some of those web app or those software ideas that you had before that you didn't really think were possible, or you think would take too long to do. Now you should be fully equipped to be able to do them. So as always, thank you for making it to the end of the video. And if you do want to work with me so I can help implement AI into your business, then check out my website or just drop me an email and we can have a conversation about how we can implement AI into your business and help you. And if you did enjoy this video, then do consider subscribing and putting any video suggestions that you'd like to see in the comments.