How I Built and Deployed an App in 2 days with Lovable, Supabase, and Netlify

to create something on my own. I had ideas but did not have the time and resources to work on them.

The chance of developing apps or other software products for non-developers has greatly increased with the advancements of LLMs, as Andrej Karpathy also emphasized with the term “vibe coding”.

I wanted to take my chance with vibe coding and create a web app. This was more of an experiment to prove that I can build and deploy an app in 2 days. It didn’t have to be perfect, the minimum viable product would do the job.

In this article, I’ll provide a high-level overview of the process including some tips and tricks about the tools I used and how much I spent on them. If you’d like to see the end product first, it’s drawcraft.io.

I used Lovable, Supabase, and Netlify in this project.

• Lovable is a highly popular AI app builder.
• Supabase is a development platform handling all backend-related processes. The seamless integration between Lovable and Supabase is an important advantage.
• Netlify is used for deploying the app. It also handles domain name purchases (if desired).

Before I start using any of these tools, I watched a few Youtube videos on people using and developing with them. I’d like to point out that I don’t have any affiliation with any of these tools.

Building with Lovable

Lovable has both free and paid plans. The pro plan has multiple pricing options with different credit amounts. I purchased the cheapest one for $25 per month, which gives you 100 credits. You also get 5 free credits per day.

100 credit does not mean exactly 100 prompts but the number of credits you spend is directly proportional to the number of messages (i.e. prompts).

When you build with Lovable, it’s suggested to have a detailed first prompt with clear instructions. If you write a very simple first prompt (e.g. Build a calendar app), you’ll need to write a lot of messages (i.e. spend credits) to customize it. Also, adding complex features afterwards may be slightly more complicated than declaring them at first.

With that being said, here is the first prompt I used:

## Objective
Develop a web application that enables users to create customized drawing images using a large language model (LLM).

## Core Features

1. **User Input and Drawing Generation**
   - Users can input a description of the drawing they desire, such as "Bugatti car," "Farmhouse," "Father and Kid," or "Cristiano Ronaldo."
   - Users select a difficulty level for the drawing: Beginner, Medium, or Advanced. 
     - Beginner: Suitable for small children with simple, distinct lines.
     - Medium: Moderate complexity with more details.
     - Advanced: Highly detailed and complex drawings.
   - The application reformats the user's input into a structured prompt for the LLM to generate the drawing.
   - Users can view and download the generated image in PNG format.

2. **User Interface and Experience**
   - Design a clean and modern landing page, similar to a SaaS platform, using whites and soft colors for a minimalist aesthetic.
   - Ensure the interface is intuitive and user-friendly, facilitating easy navigation and interaction.

3. **Authentication and Subscription**
   - Implement user authentication and signup functionality.
   - Offer two subscription tiers:
     - **Free Plan**: Allows up to 3 drawings per month.
     - **Pro Plan**: Allows up to 20 drawings per month at a cost of $20 per month.

## Technical Requirements

- **Frontend**: Use modern web technologies to create a responsive and visually appealing user interface.
- **Backend**: Develop a robust backend to handle user requests, manage subscriptions, and interface with the LLM for drawing generation.
- **Database**: Implement a database to store user information, subscription details, and drawing history.
- **Security**: Ensure secure handling of user data and transactions, adhering to best practices in web security.

## Additional Considerations

- Optimize the application for performance and scalability to handle varying loads and user demands.
- Provide clear instructions and support for users to maximize their experience with the application.
- Consider implementing analytics to track user engagement and drawing preferences for future improvements.

The first design turned out to be pretty good but I had to make some adjustments. After the initial prompt, I mainly used messages with only one instruction. You can also edit the code on Lovable UI for making changes and these changes do not consume your credits.

Supabase integration

Although I wrote in my initial prompt to add authentication and subscription, it didn’t work because of lacking a proper backend. This is where Supabase came into play.

It’s very easy to add Supabase in your Lovable projects. You just create a Supabase account and follow the steps to integrate it to your project on Lovable UI.

Once Supabase integration is complete, Lovable can write the code for adding user authentication, creating database tables, adding edge functions to handle backend tasks.

One problem I had was that it was continuously sending requests to check user subscription status. I detected this problem by manually checking the network activity. I had to spend a few messages for Lovable to fix this problem. This could have been an easy fix if you are a developer. I could solve it on my own but had to spend some time on it. I just wanted to move fast and use Lovable for everything.

Supabase free tier limits were quickly consumed and I had to upgrade to a paid plan, which costs $25 per month. I think the problem I mentioned above consumed most of my limit.

GitHub Integration

Lovable makes it very easy to integrate your GitHub account. You can follow the instructions on Lovable UI to complete the integration and create the project in GitHub.

Important: Keep in mind that every change Lovable makes on your project is automatically committed to the default branch on GitHub. This is a two-way integration so if you make changes on the default branch using an IDE or GitHub UI, these changes are automatically applied to your Lovable project.

Another problem I had was about working with multiple branches. In Lovable docs, it’s stated that Lovable always commits to the default branch. The default branch was the main branch at first. However, when I created a new branch and set it as default branch, this change wasn’t reflected on Lovable. It kept committing to the main branch.

One of Youtube videos shows an option to change the branch on Lovable UI but I could not find it. It seems like Lovable UI changed after that. Maybe it doesn’t exist anymore. This wasn’t a blockage for me so I moved on but I definitely want to learn the solution to this problem.

Deploying the App

There are many alternatives to deploy your app. I didn’t give much thoughts to this step. I’ve seen a few people using Netlify so I just wanted to try it.

Netlify offers a free plan, which was enough for me. It gives you 300 credits and each deploy costs 15 credits.

Once you create an account, you can add your GitHub project on Netlify by following the instructions.

You can use a Netlify domain name for free or buy a custom domain name through Netlify. You can of course buy your domain elsewhere and use it on Netlify.

Important: By default, Netlify automatically deploys your site whenever you commit to your production branch. As I mentioned earlier, Lovable automatically push commits to the default branch. So if your default branch is used as your production branch, which is definitely not a good practice, whenever you make a change on Lovable, Netlify will make a deployment. The problem with this is you’ll quickly consume your free Netlify credits.

Lovable’s Performance

Lovable did a great job putting together an entire web app. However, the end product is not perfect. Once I deployed the site and started using it, I noticed some problems. The good thing is they were all minor problems and I was able to have Lovable fix them.

I also wanted to add some sample drawings to drawcraft.io. I tried doing it through Lovable by attaching drawings in the chat but it didn’t work. Then, I uploaded the sample drawings on GitHub UI and asked Lovable to create a “free sample drawings” box on the site using those images and it worked.

How Much I Spent

I spent a total of $102 to create my first web app. It’s a simple app that does a simple thing but my goal was to see if I would actually be able to create a functional website using AI-based tools.

It’s important to note that some of these spendings can be used for other projects. Now, it’s up to me to come up with more ideas and turn them into action.

Thanks for reading. Please let me know if you have any feedback.