I Built a Paid Web App Using Only Replit AI (Full tutorial)

Key Takeaways

In this video, I'm going to show you how to create a real working app that's ready for real paying customers with Replet. And don't worry, this isn't one of those I built a $100 million app in 5 minutes while running a marathon while blindfolded kind of videos. This is going to be a tutorial on how to create a real application that has functionality, a database, user authentication, and Stripe payments so you can actually charge for your working application. And at the end of this video, I'm going to deploy the app to a real domain live. So, if you stick around till the end, I'll reveal what the actual app is so you can go try it out yourself. So, here's the actual working app that I built in Replet and that I'll be walking you through in today's video. So, this app is basically a really simple online PDF editor. And I got the idea a few weeks ago when I had to edit a PDF. And I downloaded it and opened up Adobe Acrobat and was prompted to upgrade to $20 a month just to edit one PDF. So, I thought, there's got to be a better way. I don't want to pay $20 a month just to edit one PDF. And so I vicoded an entire PDF tool and thought, hey, why don't I turn this into an online service that others can use and I'll price it way lower than Adobe Acrobat for people that need access to a PDF editor but don't want to pay an Adobe subscription. So I created this app with a one-day pass, $1 to access all of the capabilities, or $5 a month or $50 a year. So as you can see, this has a full homepage. It has a pricing page. It has a login page. And it has Google authentication. So, I'll show you. I will actually log in here. And actually, I like the flow that I set up here. So, basically, I can drag and drop a PDF. And as soon as I do that, it prompts me to create an account to actually start editing that PDF. So, instead, I can go ahead and log in, use Google authentication to actually log into my account. And here we are. Here is my account. So, as you can see, I already have a few documents in here. I can go ahead and upload another one. Let's go ahead and upload that PDF. I can jump in here. And now I can actually use the very basic PDF editor. Now, this has things like text, sign, initials, image, checkbox, date, highlight, blackout, and form fill. So, I can actually create like a form fill. This is really why I wanted it in the first reason so that I could create these form fill objects. All of these can be resized. See, I can add my signature. So, it has all of this functionality. Just basically all of the really basic functionalities you would want in a PDF editor. And then I can go ahead and click save and then I can download this. So, I actually have it on my computer. As you can see, also I currently have a pro account and I can manage my payment methods, billing history. It is connected to Stripe. So once this loads, you can see my billing history. I used a coupon code. Um, so I didn't actually have to pay the $50 a year, but you can see my my next bill is due December 16th, 2026. This is a real working app with user authentication and subscriptions. So that is the app I'm going to be walking you through today. As you can see, I still have it on a replet.app domain. And so by the end of this video, I'm gonna launch it on a real domain. So you could actually go check this app out for yourself. So first off, I want to talk about before you even go to replet and tell it to start building your app. Before you do that, it's really about the idea and using AI to flesh out that idea and understanding what your first version or MVP is going to look like. So in this case, what I did is I got started with a blank Chat GBT screen and I said, "Hey, I want to create a web-based Adobe Acrobat clone. How long is that going to take?" And basically, I also want to charge $5 a month for people to use it. What am I going to need in order to do this? And so, it basically laid it all out for me. It said, "Hey, what is the scope of this build, right? Is it a lightweight PDF editor like an MVP? Are we just trying to do a form filling SAS or do we want like a full Adobe Acrobat style editor? Do we want a full clone?" And basically, I wrote back and said, "Hey, look, I don't want a full clone. I just want the basic functions, right? Like, we don't need any of the fancy stuff." And by the way, also uh Replet has this native Stripe integration. So that should probably make things easier. So what do you think about it now? And so I'm basically using Chad GBT as like my developer best friend that knows all things about developing and basically walk me through how I need to be thinking about this, how I need to structure actually building the app. And so it's giving me all of these instructions here. Next, I said, "Hey, here's the actual PDF features that I want. Is this doable on like the first go around? are these pretty simple? And it said, "Short answer is yes. They're all doable. Here's exactly how you would do each of them." It even gave me the the code. And then it actually said, "Hey, do you want like cryptographic signatures?" And I said, "Nope, I do want form fills, but cryptographic signatures are not important for me. I don't need like full docuign functionality." And so it said, "Okay, sweet. This is sort of what you need here." And I said, "Okay, great. This is your first step with Brelet." So, when getting started with Replet, they now have this design feature, which is an absolute game changer in my opinion because you can start designing all of the pages of your app and make sure you like the design. You don't have to waste a bunch of money and tokens on the actual agent that is going to try to build the app and design at the same time. So, I always like to start with the design first. And so, basically, I said, you know, I just want to get started with design. What type of pages do I need? and said, "Can you actually create me the prompt to create all these pages?" It said, "Great. Here's a prompt. You need a landing page, a login page, a signup page, a dashboard where you can see your documents, the PDF editor UI, so where you're actually editing like the actual app UI. You also need a account/billing page and a pricing page. And you can just go ahead and copy this entire prompt into Replet. So that's what I did. Then you can jump right over to Replet. Go ahead and paste that right in there. and click start designing. Amazing. So about three minutes later and let's check [snorts] 65 cents of agent use. We now have our full mockup of the actual app. So as you can see we have the landing page here. We have the pricing page. Um we have a login page. Uh and we'll ask it to add Google authentication to that later. Get started. And uh this is all good. We even have terms, privacy, and support. And then let's go ahead and check. And we have our dashboard. And let's go ahead and open the editor. Okay. And now we even have our editor. So, as you can see, none of this is actually functional. This is all just the design. And if you don't like the design and you don't like the way that it, you know, the the fonts and the colors, my favorite thing to do is just come over to Dribble here. Let's say, you know, we like this design. So, you can go ahead and pop this up. And you can just go ahead and screenshot jump back over to replet and drop in and then say make the design like this. Now I'm not going to do it because I have already tinkered with this design a whole bunch. So basically in the design portion of things right here, this is where you want to make sure that although it's not functional and these don't do anything yet, you want to make sure that everything that you want is here because later when we add the functionality, we want to make sure that all the design features are where we want them. The other thing that I might add here is when you saw my actual app, it had a box here where someone could drag in a PDF and that would basically start the onboarding flow. So, let's go ahead and ask it to add that. Can you add a box in the middle of the homepage that allows a user to drag in a PDF to upload it? And once they try to upload it, it kicks off the onboarding flow and asks them to sign up for an account to start editing that PDF. Hit send on that. Awesome. And there we go. As you can see, it added the box where I can drop my PDF. It even added a little animation when I scroll over it. So, at this point, if you're happy with the design, and I personally think this is okay, but I would definitely spend a little bit more time on the design here because uh you don't really want to be doing that later when you're actually trying to build out the functionality. So, this is a good time to maybe you want to add a blog section. Maybe you want to change up this font and the colors. This is the time to do it and use dribble if you're going to. But once you're actually ready to start building out the app functionality, this is when I went back to chatgbt and said, "Okay, I got all the pages built out and designed. They look great. Can you help me write the next prompt to start building out the app functionalities?" And so, it did just that. So it said you're upgrading existing design project into a full stack app. So in replet we are only using the design agent. And so the next step is actually to tell the replet agent to turn this into an actual app. So it actually has to start using the other agent to where it's going to build an actual application rather than just a design. So it tells it what to use on the front end, the back end, the database that it's going to use, authentication, documentation models, even gives it the PDF viewer and annotation data model. So I went ahead and copied all of this. And now I'll start showing you what it looks like in the actual replet that I actually built the functional app that you saw at the beginning of this video. So as you can see I had done all of the styling on here and then now I said okay now it's time to build this into a real app. You're upgrading the existing design project into a working full stack app. The UI pages are already designed. Now please implement the core functionalities as described in the attached description. So that's where I pasted the chat GPT prompt. And now I'm not going to sugarcoat this. This is the part where you're going to want to bang your head against the wall because you need to get ready to prompt a lot. So, this isn't like a 20 minute type of project. This is probably a multi-day project. At least it was for me. A few hours every day I would sort of sit down and say, "Okay, where was I at with the last time?" Right? This is when you're going to have to use the app after it says it built it. You're going to have to test all the functionalities. You're going to have to troubleshoot. And for most of the actual complicated building of when you're dealing with errors and building out some of the core functionalities, I recommend using the high or max autonomous agent. And that is because this is the most powerful agent and after it actually builds out the features, it will auto test the app as well. So, it's going to save you a lot of time. This is basically the most powerful agent that they have. However, the fast agent here is extremely helpful for making small changes. So, for instance, if I wanted to add a terms of service page like I have here. Um, so I went ahead and added all the terms of service. So, basically what I did is I went to chatbt and said, "Hey, can you make me a terms of service page, all of the copy for it along with, you know, inputting my domain and inputting all of my contact information." So, this is all ready to go. And then I went over here and I used the fast agent because it's much cheaper and it's much faster. So, as you probably know with building with Replet, if you're using the most autonomous and the highest level agent for the entire build, it can get somewhat expensive. And I will cover exactly how much this app costs to make here at the end of the video. So, make sure that you stick around for that. But this fast agent is extremely helpful for making small changes like that. So for instance, when adding a terms of service, this is where you just say add a terms of service page and use this copywriting. So that is one of the things that is super helpful when building with Replet. And the next thing that I want to talk about is using the roll back feature. So if you've ever used Replet and it has made a change and that change broke something and now you're saying, "Hey, go back and fix what you've done." It can get extremely frustrating when you start going down a path and it starts breaking and you said, "Why'd you break everything that was working perfectly? Why'd you do that?" So, the roll back feature here is your friend. So, right here, you can roll back to here. I had to do that a few times throughout this build just to make sure that just to roll back to where things were good and then start again from scratch. Okay. Now I want to talk about the big three of building an app and that is going to be the database that stores all of the information for your users. So that could be the actual things that they're doing on their app as well as their user and subscription and all of that good stuff where all of that data is stored behind your app. So you have the database, you have user authentication. So how are they actually signing up for your app? And half the internet uses Google. So, that's what I wanted to make sure that I had for this app. I wanted to make sure that when they signed up, they could just sign up with their Google account. And then three is going to be Stripe integration. So, basically being able to charge users to use your app and offer different plans. So, as you saw in my app, I allow someone to onboard for free, but in order to actually download the PDF, they do have to sign up for one of the paid plans, which is either $1 for 24-hour access, $5 for an entire month, or $50 for an entire year. So, all of that has to be integrated with Stripe, and you need to tell Stripe to charge them and what those subscriptions mean. And then also what user has a subscription and has access to certain features. Now don't worry, I know that sounds complicated and it is kind of complicated if you don't know how to code, but we don't have to know how to code because Replet knows how to code for us. So the first thing that I did is in that master prompt that I gave to Replet from chatbt when I asked for everything, I basically asked it to do everything all at once. But of course, it didn't do everything all at once because that would be kind of crazy to code an entire app in a matter of minutes. So once it built the master prompt and and went through the master prompt and built out a lot of those functionalities, I had to start doing a lot of testing. And what you need to do is ask Replet to do certain things or very specific things. So for instance, when I was testing the app early on, I said I just got this error and I just took a screenshot of it, right? is just this error unknown runtime error and I said also can you add Google authentication for user O and the great thing about replet is it makes Google authentication extremely easy so that's all you have to do input Google off it added Google off and fix editor functionality and we were off to the races but I said it just got the error again when I tried to drag a PDF into the box and then it went ahead and actually fixed it and throughout this instead of wasting credits on the replet agent. So like as you can see this costed me 84 cents. This one costed me 89 cents. And you know relatively speaking that is extremely extremely cheap, right? Like if I asked a developer to do all this stuff, first off I wouldn't hear back for a week and second of all they would have charged me probably thousands of dollars. But instead of wasting some of those dollars and cents on some of those requests, what I like to do is go back over to chatbt and I will say things like, "Okay, I've gotten pretty far on this Revit build. What but when I drag a PDF onto the page, it opens up the editor, blah blah blah. It's missing a ton of functionality. Can you help me make a prompt that will build all the functionality?" So went ahead and built out more of the functionality. And then basically I would prompt it anytime that I ran into an issue and basically see what it would say. Usually it would say a couple things like it could be this, it could be this, it could be this, but in order to actually know you have to do this. And so a lot of the times that would mean actually opening it up on uh a web editor, inspecting it, and then seeing what happens when I click on a certain button. Basically figuring out what what error code it's giving me. So that's how I did Google authentication. The database was already built in this master prompt because it just used the native replet postgress and that worked pretty seamlessly right off the bat. Now what wasn't as easy is Stripe, but in terms of setting up Stripe on an actual application, Replet made it extremely easy. So basically all I had to do here is say sounds good. Now to get my stripe billing set up and running, what do I need to do? So earlier on in the messages, I had said, you know, set up my Stripe integration. Then I actually had to set up a Stripe account. And I said, "Let me check on that for you." And basically walked me through all of the steps on how I can actually set up my Stripe to start collecting payments. And I didn't even need to go into Stripe and create the products myself. I basically just asked it, you know, are you connected to it? Is it already published? Let's see here. I was changing the logo. Okay. Okay, I think you're referring to the sandbox Stripe account. So, I added a coupon code. So, I basically asked it to create all of the products inside Stripe for me. And that's exactly what it did. So, I'll jump over to Stripe here. And as you can see, it actually set up all of the different products for me. So, on the pro plan, we have the $5 a month, which is recurring, the $50 per year, which is recurring, and then the $1 24hour access, which isn't recurring. It just gives you access to all the functions or all of the features for 24 hours. So, it went ahead and did all of that for me. So, the big three that I just talked about, which is database, user authentication, and Stripe setup, Replet made it extremely easy. Now, you do have to troubleshoot and reprompt it and tell it to fix all of the problems or errors that you come into. So that got me to basically where I'm at now. And that is I have deployed. And by the way, I had to start a new chat because basically the the chat was going on for so long. So I'm on a new chat now. But now the app is deployed like I showed you. So here it is right here. I can go to my documents, my account. And this is basically the process that got me to this working app. I sat in front of the computer for a long time. I used chatgbt and I basically just kept prompting when it ran into errors. Now, what I want to do before I actually make this go live and maybe start sending traffic to it or allowing users to access it is I do want to run an actual security audit on this. So the way that you can do that is we'll go to advanced settings in in this replet and then if you scroll down Replet actually has this pre-publishing security scan. Now it's in beta but it says before publishing your app run a security scan powered by our partner to identify potential vulnerabilities. Let's go ahead and check that and click publish. And so it's going through the provision and then it added this extra step which is the security scan which is what basically everyone talks about is the big downside of vibe coders is that we are vulnerable. We can leave our APIs exposed and people can access them. So this just adds that added layer of security. Now I don't really have any APIs or things that people could access. But this security scan just gives me sort of that extra level of comfort knowing that I had an agent look through the security and it passed all the tests there. So once this is all bundled and promoted and live, then I'm going to walk you through the next step of actually making this go live on a domain. Amazing. So it just finished up and let's go ahead and copy that domain one more time. And as you can see, we are live and so this is all good and ready for users. Now the last step that I have here is that I want to actually add this on a domain. So I no one's going to find this one. PDF editor front end nick47.replet.app, right? Like I need an actual domain here. So you can actually buy domains directly through replet which is super nice because you could go to another domain register, whatever you prefer, but then you have to sync up all the DNS and just point it over at this website. And it just makes it really easy to to do this right in replet. So I'm going to say PDF simple and let's see if we can get XYZ. PDFs simple.xyz. Amazing. $1.99. Let's go. PDF simple $1.99. That's pretty incredible. Okay, now this is probably going to take a few minutes to actually load up and connect to the website. So, I will see you here in a few minutes. Well, that actually took a little bit longer than a few minutes. It was probably about 20 25 minutes for it to load. But, we are officially live. It is now hosted on pdfsimple.xyz. So if you want to go check this app out for yourself. You can go to pdfsimple.xyz and you can actually sign up for a free account and then of course you can you can upgrade and you can use this very useful tool and drop your Adobe Acrobat subscription because who wants to pay $20 a month to edit some PDFs. So we are all set and we are all live here. So, that is the full build and walkthrough. Now, of course, this wasn't a I built a $10 million app in 5 minutes. This took me multiple days. I actually worked on this for over the course of 2 weeks. Now, I didn't work on it every single day. I found like 2 hours here, 2 hours here, but basically just prompting this to get it to exactly where I wanted it to. And the great thing is is, you know, all of the features that are currently in this MVP version will all get better with time. So obviously if I start to get some users and they start requesting features or uh of course I know some features that I already want to add to this but the most important thing is is get something out there that's functional can actually onboard users and actually see if this could be a real viable business and if people actually want to use an app like this. I recommend your next app idea commit to it. commit to a few days of building and actually seeing it through to get it into a production state so you can actually start getting users. And over time, you'll see that you'll actually, you know, start getting traffic. And the built-in analytics tool uh on this page is pretty awesome. You can see top browsers, top devices, uh top countries. It's basically like a mini version of Google Analytics, and it's already built in here. So, that is today's video. Thank you to Replet for partnering with me on this video. And if you want to try out Replet yourself and start building real apps that real users can actually use or even apps that you just want to use for yourself, like if you want to build a PDF app like this so that you can use it, go ahead, check out Replet. Use code Nick for 12% off your first month. It's free. Free money, right? If you're going to use it, you might as well use the discount. Lastly, I almost forgot here to show you actually how much this app costed to create because I know that's what everyone cares about. So, let's go ahead and look at usage and then let's look at published uh or let's look at apps. So, AI agent usage. We spent $71.73 on the PDF editor. So, if you ask me, that's extremely cheap to build out an MVP version of your first app that can actually take on users. So, let me know what you think in the comments. But as always, I appreciate you [music] and peace. >> [music]