Everyone is freaking out. I was, too, when I recently learned that AI can now be used to build fully-featured, beautifully designed user interfaces with APIs, S3 integration, Google authentication, and more.
This is how I’ve spent the last 15 years of my life — designing and building SaaS apps. I wasn’t concerned about losing my job to AI; that’s for the administrators, data entry people, and content writers (…right?).
I was wrong — or at least it appeared that way. I joined the freak-out gang and jumped aboard the doomsday train with them until I started digging into the various AI tools and learning more.
I recently heard someone say, with regards to humans vs. AI: “It’s evolution, not eradication.”
What are startup guys like me really good at? Pivoting, of course.
If you are freaking out like I was, then we have to reframe this “problem” and look at it in a new way. This is a huge opportunity for us as product designers, app builders and entrepreneurs as we venture into this new world of AI.
Now, I’ll get off my soapbox and talk about the main reason you probably landed on this article: how I built a SaaS app in less than 5 hours.
The Experiment Begins
Press enter or click to view image in full size
After hearing about these various fancy, AI-based app builders on Product Hunt and seeing what was possible, my first thought was to jump into ChatGPT to see if I could build an app from scratch by prompting and copying and pasting code. I already had a Plus subscription, so it made sense to see how far I could get, the time-consuming, grassroots way.
I started by telling GPT-4o that I wanted to build an app that allowed users to upload design screenshots and share them publicly for review and comments with clients. I knew what it would need: an S3 bucket, authentication, a modern, clean UI (using something like HeroUI), a database, and an API. I started prompting, and it outlined the process.
My First Attempt
Here’s how it went:
Hello. I’d like to create a new web app completely using AI that leverages a frontend and a backend. It will also leverage services from AWS, Heroku, Github, and potentially use Google Authentication. It will use Node.js, React and Tailwind. I will expect you to remember the app name, the structure of the files, the content of the files and I will want to be able to enhance it over time so it will need to have flexible components. Do you think you can manage this?
Of course, ChatGPT never says no.
The app will be called Rejavu, and it will be for designers to share screenshots with clients. Lets get started with the backend. I need to know the file structure, and the code for the files. We can start with at least getting the API to create and delete files. I guess we’ll need to be able to connect to AWS, and are we considering a database as well at this point?
After some back and forth, GPT explained how to set up the app with Node.js and that I needed to configure an Amazon S3 account, Git, Heroku etc. I knew how to do all of that, and setting up the local environment took some time, but once ready, I asked GPT to start generating the files.
The Hard Rule: No Coding
I specifically decided not to do any coding myself. My plan was to only copy and paste content into files — a hard rule for this experiment.
Press enter or click to view image in full size
What followed was GPT giving me the contents of files to create, for the API (which I tested in Postman and worked on the first try!), and for the React frontend.
When working with AI, you need to know what AI likes. I tried to use my preference of frontend framework, Vue.js and I wanted to use a specific CSS framework other than Tailwind. However, I learnt pretty early on it prefers to stick with what it knows best and has been trained on, so we ended up using React and Tailwind, but just customizing the CSS to be more modern.
It took me about 3–4 hours to build the app which didn’t end up looking that great, but it worked. I was able to upload and manage files, view thumbnails, and leave comments.
Press enter or click to view image in full size
It was a pretty simple app, and very impressive to be able to build what I did within a few hours. But there’s a reason why I gave up going down this path with ChatGPT-4o. It was super tedious and frustrating and I’ll tell you why.
The Frustrations of Using ChatGPT-4o
GPT couldn’t really remember my code. I expected it to somehow magically remember my entire codebase in its memory and if something was broken, like maybe the API returning an error message when uploading a file, I would expect it to know the file, reference the code and rewrite it. But the way AI works is it’s more like a canvas in a frame — sometimes the paint runs off the frame and you can’t see it any more.
GPT would often just completely rewrite and redesign components. Perhaps I wanted to add a delete action inside a context menu for a file. The AI would end up rewriting all of the code for the main component, removing the context menu and then dropping in ugly buttons for all the actions instead. This would be time consuming because you can’t just revert back to how it was, you had to prompt it again to rebuild that component to how you wanted it, even if you explicitly told GPT to remember things.
GPT doesn’t know your development environment. There were things going on that were causing errors because I had the wrong version of Node for example. I had to reference the error, have it diagnose it, then recommend an action. By midnight, I was exhausted, and even dark mode couldn’t save my tired eyes.
I haven’t even mentioned the time it took to create files, copy and paste the contents of the file, run migrations, run npm install and other commands in Terminal to get the app to work.
I was done. It was time to look again at the ‘fancy AI-based app builders’.
Bolt.new has entered the chat.
Using Bolt
Press enter or click to view image in full size
This is really where my ‘build a SaaS app within 5 hours’ experiment began. So lets roll back the clock and forget ChatGPT ok?
I had seen some sample apps that had been created with Bolt, and I had even messed with it myself before messing around with GPT as I mentioned earlier. I wasn’t convinced, and had this theory that these builders wouldn’t work because they are top-down rather than bottom-up when building the code.
What I mean is that my thoughts were, if you have something like GPT write individual files and work upwards from a foundation that you have established early on, it will be more scalable and the AI will have a better time helping you create your app. The top-down approach, in my mind, wouldn’t work because you create the prompt, build the app, then you have to basically re-build the app every time you want a change which would take forever.
It was also very expensive. I burned through the free tokens very quickly (within 10 minutes or so), so with my theory was lining up that this isn’t the way to go when building a full application and scaling it. I had dismissed Bolt early on as just a pretty shopfront for selling something else, e.g. their server business or whatever.
I was wrong, again. After deciding to invest some cash into the experiment, and after reading their docs and helpful videos on using Bolt efficiently, I was excited to get building a new app that I actually had a genuine use case for. A club membership management platform for my wife’s business.
I got prompting.
Here’s what I said:
Build a SaaS app for managing members of a club. The app will need to have a landing page with a logo, hero image and footer, which is fully customizable. There will need to be a login for a member portal, and a login for the admin portal. Users will need to have roles, such as Admin and Member, where Admin can access the admin portal and Member can access the Member Portal where they can manage their subscription and other settings like their Profile. The Admin site will need to have management for members, with charts showing useful information on membership, management for Email Campaigns, SMS Campaigns and management for the subscriptions. The app will need to integrate with Stripe, Twilio, and Sendgrid and these integrations will need to be manageable also… (prompt continued)
I knew what I wanted. Bolt also knew what I wanted, and built a framework pretty quickly. It did use a few million tokens initially to get the app going, but I was impressed.
Press enter or click to view image in full size
Press enter or click to view image in full size
The best part about Bolt was how quick it would create and write the files, plus it would always run migrations, restart the development server and even could notice when errors were getting logged in the console and recommend fixes.
I even found it pretty darn addictive. It would work so fast, and had very nice call to actions to take actions on building code that I would just click away and trust it to know what it was doing. Sometimes though it would get stuck in a loop and tell me it’s fixed the problem, but it hadn’t (usually because the file it was working on was not the same one as what was being served).
All of this would cause me to burn through tokens costing me money, which got worse as the project got bigger. My experiment was beginning to turn into a bit of a casino where I was pulling the arm of a slot machine trying to get the coins to line up, or rather, squash the bug. Another $20.00 token reload please cashier.
The other issue was, much like GPT-4o, that it couldn’t see my code or remember it. Once I asked it to rename a simple menu item in the Communications dropdown menu and it wiped out everything I had put together and redesigned it all. It did the same with a table view in another page where I just wanted a new button, and it redesigned everything for that section costing lots of tokens.
The solutions, I learned, where to make more modular components, lock certain files I didn’t want broken, use an instruction set (which you can write into a file in the codebase), and to not click the button that said “Fix Errors”, and instead actually paste the error with context and analyze it to recommend a fix rather than just making changes.
I spent a total of around $80 on building the app, and had the whole thing ready for deployment in less than 5 hours. That worked out to about $16.00 an hour, which makes for a pretty cheap full-stack engineer that works whenever I want it to.
So what’s next?
I’m going to deploy the app and integrate it with Twilio to test out the SMS Campaign functionality. I’m sure there will be additional bugs, and of course the requirements will grow as we use the app. But for $16.00 per hour this is a very good way to work.
However, the point of this experiment, as I mentioned right at the beginning of this article, is that my job will not be replaced. If anything I have just created a new job for myself managing an AI engineer. It still takes skill to prompt the AI, and it certainly requires experience of designing, scaling and maintaining web applications.
So, this brings an opportunity.
Previously my friends would ask me, “hey, can you build me an app that does XYZ?” and I would tell them “do you have $50k?”. Now I can tell them, “I can build an app for that!”.
Disclaimer: This article was written by a human, NOT with AI.