5 Tools I Use To Build Revenue-Generating AI Web Apps
Becoming a full-stack developer typically demands years of dedicated learning and practical experience — until today.
Before the popularity of AI programming assistants, developers needed a deep understanding of programming languages like JavaScript and familiarity with at least one web framework to build front-end UI and implement back-end logic. Not to mention the technical knowledge required to implement databases, storage solutions, and payment systems.
Times have changed. As a 30-year-old software engineer, I certainly wouldn’t want to return to the days of traditional, lengthy learning processes.
I’ve been wanting to write this article for months now, but I haven’t had the time until today. If you’re not tech-savvy or lack programming experience yet want to build web applications, this article is for you. I’m going to share five essential tools you should know to build a revenue-generating application. I’ll also walk you through the process of building these apps step-by-step.
Here’s a summary of the workflow I usually follow:
- Build the base application with AI tools Bolt, V0, or Loveable
- Add a database with Supabase. Use this platform to integrate user registration and authentication too.
- Implement the backend or features of the web app.
- Implement subscriptions or one-time payments through Stripe.
- Launch on Vercel and connect a custom domain.
Alright, let’s dive into the details.
1. Building the Application
The first step is creating the application’s basic structure — no backend or database just yet. Think of any app you’d like; I’ll use an image generator as an example. To design your user interface, tools like Bolt.new, Lovable.dev or V0.dev are excellent. This time, I’ll demonstrate using Lovable.
Design a website for AI image generation with:
Landing Page:
Modern hero image with clear CTAs.
Sign-up/login flow (no backend logic yet).
Dashboard:
Header with logo and user profile menu.
Image generation section (prompt input, generate button, image placeholder).
Gallery of previously generated images.
Profile Page:
User information (personal details, email, join date, credits, images generated).
General Requirements:
Modern, responsive design.
Placeholders for dynamic content.
Intuitive navigation and smooth UX.
Clean, well-commented code.
Scalable and maintainable frontend development.The first thing that I want you guys to remember is that if you decide to do a one-shot prompt to generate the app, try to be as descriptive as possible.
In this example, I have listed here all the pages needed for my app with a few general requirements at the end. Notice how detailed the instructions are, especially on the Landing page.
I have specifically indicated to “not implement the authentication logic and backend yet.” This is very important because if I omit this instruction, there is a tendency for the AI to implement it using a different solution.
So head over to Lovable.dev, sign up for an account for free, and in the prompt field, paste the prompt example above and press the enter key or click on the submit button.
Cool, you should be able to see all the requested pages, including the homepage, the login page, the register page, the main dashboard for image generation, and the profile page.
Now, we’re ready to integrate user registration and authentication.
2. Database integration
The next step is to find a way to authenticate users, keep track of their credits and images, and store the images on the cloud. To do this, we’re gonna need a popular database platform called Supabase.
Here’s what makes Lovable interesting. Since Supabase is deeply integrated into the platform, we can leverage Supabase’s authentication capabilities to allow user registration and authentication instead of implementing it from scratch.
Head over to Supabase.com, create an account, and set up an organization. To create one, go to the Projects tab and click on the “New organization” button.
Once the organization is set up, head back to your Lovable project, and on the upper right side of the menu, click on the Supabase button. Connect your Supabase account and try to create a new project.
Go back to Lovable, and you should see the new project we’ve just created under the list. Click on the connect button and notice that Lovable will start connecting to the Supabase project.
Once the connection is done, you should see a “Your app is now connected to Supabase” message. Now, in the Supabase menu, open the Authentication tab and look for the Signin/Signup menu. Make sure that the “Allow new users to sign up” toggle is enabled.
Go down to the Auth Providers and make sure to disable the “Confirm email” and the “Secure email change” toggles. I understand that these are good for security purposes but for us to keep things simple this time, we’ll disable the email verification.
Be sure to save the changes before you continue.
Another popular and more convenient way to sign up/login is through Google. We won’t be doing that right now, though, because there are a lot of things to consider when setting up Google authentication.
Go back to Lovable and ask it to implement the user registration and authentication.
Prompt: implement the user registration and authentication.
Watch Lovable perform the database creation and also add the signup/sign-in/signout functionality. Lovable is very cautious when it comes to making changes to the database. It asks for your permission to perform SQL commands like this, so if you think all looks good, click on the “Apply changes” button.
It’s gonna take a moment to apply the changes in DB. Once done, check in Supabase if a user table was created. You can verify if the tables are created on the Table Editor page. In the example below you can see that Lovable created two tables: profiles and images.
I’ve also tried to sign up using my email address and you can see that a new entry was added on the profiles table. Take note that these values can be manually updated, so be careful when deleting or modifying any value.
Okay, great. Now we can proceed with the image generation functionality.
Application Backend Implementation
The reason why I picked an image generator as an example is that I wanted to show you how you can leverage some of the best AI API providers like Replicate or Fal.
For example, Black Forest Labs is the company that created the Flux image models and one of the best ways to integrate Flux into your app is to use Replicate APIs. To do that, head over to replicate.com and look for the Back Forest Labs space. Let’s choose the Flux Schnell model as an example because it’s fast and it’s cheap.
Under the API tab, copy the sample code, and let’s use that to implement the image generation feature. Make sure to be descriptive in the prompt. Include the instructions to save the image to the database and show it in the image preview section.
import Replicate from "replicate";
const replicate = new Replicate();
const input = {
prompt: "black forest gateau cake spelling out the words \"FLUX SCHNELL\", tasty, food photography, dynamic shot"
};
const output = await replicate.run("black-forest-labs/flux-schnell", { input });
import { writeFile } from "node:fs/promises";
for (const [index, item] of Object.entries(output)) {
await writeFile(`output_${index}.webp`, item);
}
//=> output_0.webp written to diskNow, use this API endpoint to compose our prompt for Lovable.
Prompt: implement the image generator using Replicate’s API for Flux Schnell. Show the generated image on the screen and save it in the database too. ============= PROMPT START ============= import Replicate from "replicate";
Make sure to reduce the credits of the user after each image generation.
const replicate = new Replicate();
const input = {
prompt: "black forest gateau cake spelling out the words \"FLUX SCHNELL\", tasty, food photography, dynamic shot"
};
const output = await replicate.run("black-forest-labs/flux-schnell", { input });
import { writeFile } from "node:fs/promises";
for (const [index, item] of Object.entries(output)) {
await writeFile(`output_${index}.webp`, item);
}
//=> output_0.webp written to disk
============= PROMPT END =============Important: Never paste your API key on the prompt section. This variable is highly private. Wait for Lovable to request it. Once the backend is done, you may try generating an image from the Dashboard page.
Lovable will show you the error logs with a “try to fix” button, if there’s an error. Just click on that button and wait for the AI to provide a fix.
As you can see the image is successfully generated and shown on the screen. To confirm if the file is saved in the storage container and the database, check the Supabase’s Storage section and look for the content. The image file should be there.
Any errors Lovable detects can be quickly resolved by following its suggestions. Now, it’s time to work on the Payment system.
Stripe Integration
To monetize the app, integrate Stripe payments.
Head over to the Stripe website and log in with your account. At this point, let’s assume that you already have your Stripe account set up and ready to receive payments. While in development mode, it is important to set the app in Test Mode to avoid any real transactions from happening while still building the app.
Now, on the bottom left side of the screen, you’ll see a Developer’s button. Click on it and under the API keys tab, you’ll see your secret key. Copy that secret key and save it for later.
To create a product, open the Product Catalog page, click on the “Create Product” button on the upper right, and fill out the required fields. You can set whatever price you think is fair for the value of your product. Copy the price ID and save it for later.
Now, go back to Lovable and execute the prompt below:
Prompt: Help me add Stripe payments to my app. Use this price ID to redirect the user to the Stripe payment page: price_1QXXXXXXXXXXXXXXXX
Lovable will try to integrate this product into our app in the background. In the end, you should see a button “Add API Key” and this is the time to add the stripe secret key. Keep in mind to never paste the secret key in the chat interface.
Make sure to also click on the execute SQL button to make sure our database gets updated. And when Lovable asks for the secret key, paste the value copied from Stripe.
To confirm that the Stripe support has been added, you can verify in the Edge functions section. You should see the stripe functions in the list.
Every time the user clicks on the generate button with 0 remaining credits, a modal window will be displayed showing the user an option to buy additional credits.
If the “Buy credits” is clicked, the user will be redirected to the Stripe page to complete the purchase.
Note that since we are still in the Test Mode in Stripe, you can use temporary credit card information to avoid any real transaction from happening. You can always choose to switch to live mode later on when you’re ready to release the app.
There’s the image generator capability, it’s able to register and authenticate users, it’s able to save files, and update the database, and also now able to accept payments. This is already a fully working startup that you can deploy to the internet and generate revenue. You could be a millionaire in a matter of weeks.
Excellent, now the next step is to upload the source code to GitHub.
GitHub integration
GitHub is a website that hosts and manages code and allows users to collaborate on projects.
If you plan on deploying your app to the internet as a product, it’s very important that you store the source code somewhere like GitHub.
To do that, go to Github.com and create an account. Once done, go back to Lovable and click on the GitHub button on the upper right side.
Then click on the Transfer repository button and select your logged-in account. To check if the codes were migrated successfully to GitHub, click on the view on GitHub button. You should see the entire source code of your project.
This project is built with the following tech stack:
- Vite
- TypeScript
- React
- Shadcn-ui
- Tailwind CSS
On the GitHub page, you should see all the source code files like this. You can clone, fork, or do whatever you want with it.
Your project is now safe, even if you lose the project on Lovable, it’s fine because at least you have the source code safely saved in GitHub.
If you want to work locally using your own IDE, you can clone the repo and push changes. Pushed changes will also be reflected in Lovable.
The only requirement is having Node.js & npm installed.
# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>
# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>
# Step 3: Install the necessary dependencies.
npm i
# Step 4: Start the development server with auto-reloading and an instant preview.
npm run devAwesome. Now we are ready to deploy the web app.
Project deployment
If you truly want to deploy this as a product, it’s important to change the link of your project from Lovable app to your own custom domain. I am more familiar with Vercel so let me show you how you can do it there.
Head over to Vercel.com and create an account. On the overview page, click on the Add New menu and select Project.
At this point, we need to import the project from Github. So try to search for the project name. If the project is not visible, you might need to adjust the App permission. Click on the link and look for the project in your GitHub account.
Vercel will import your project and will perform a build to see if there are no issues. Once the build is successful, you should see the Status become “ready.”
Now click on the Domains button to add a custom domain to your app. You can pick a unique name like “image-generator-app.com” to give it a unique domain name.
Take note that adding a custom domain name is not free, the price depends on the domain name and extension like “.com” or “.ai”. A .com is usually cheaper than a .ai domain name.
It will also take a couple of hours or sometimes days before the custom domain takes effect. After that, you now have a fully working website that accepts user signups and payments. It’s already a business and you can continuously improve the app by adding more features.
Okay, so we are basically done. If you understood the steps I described in this article, you could start building your own product and start making money in the next few days or so.
Final Thoughts
I’ve been building apps with AI over the past couple of years, and these five platforms have always been my go-to even though I’m not a professional web developer. It’s amazing how AI tools let someone like me turn ideas into real products that actually make money. If you’ve read this far, I hope you’re inspired to give these tools a shot. Knowing how to use them feels like having a superpower to build anything you can imagine.
Stripe integration, especially, makes earning from your apps easy. It’s simple to set up payments, and you can quickly put a price on your creations and start earning money in days.
Remember, the tools I covered here are just the basics. They’re good starting points, but there are plenty of other options out there. You don’t have to stick with Lovable. You can use Bolt, Windsurf, Cursor, V0, or something else. For databases, you might prefer PostgreSQL, Firebase, or whatever suits you best. Payment platforms can also vary depending on your country. LemonSqueezy or PayPal might be better alternatives to Stripe. And for deploying your app, there are options like Netlify, AWS, or Azure instead of Vercel.
There are endless ways to combine these tools, and that’s what makes it fun. The important thing is to just start building. I hope you found this article helpful. If you want to read more stuff like this, let me know in the comments. And if you liked it, feel free to share!
This story is published on Generative AI. Connect with us on LinkedIn and follow Zeniteq to stay in the loop with the latest AI stories.
Subscribe to our newsletter and YouTube channel to stay updated with the latest news and updates on generative AI. Let’s shape the future of AI together!
Post a Comment