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

to create something by myself. I had ideas but didn’t have the time and resources to work on them.

The possibility 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 desired to take my likelihood with vibe coding and create an online app. This was more of an experiment to prove that I can construct and deploy an app in 2 days. It didn’t should be perfect, the minimum viable product would do the job.

In this text, I’ll provide a high-level overview of the method including some suggestions and tricks in regards to the tools I used and the way much I spent on them. If you happen to’d prefer to see the tip product first, it’s drawcraft.io.

I used Lovable, Supabase, and Netlify on 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 a vital advantage.
• Netlify is used for deploying the app. It also handles domain name purchases (if desired).

Before I start using any of those tools, I watched just a few Youtube videos on people using and developing with them. I’d prefer to indicate that I don’t have any affiliation with any of those tools.

Constructing with Lovable

Lovable has each free and paid plans. The professional plan has multiple pricing options with different credit amounts. I purchased the most cost effective one for $25 monthly, which supplies you 100 credits. You furthermore may get 5 free credits per day.

100 credit doesn’t mean exactly 100 prompts however the variety of credits you spend is directly proportional to the variety of messages (i.e. prompts).

Whenever you construct with Lovable, it’s suggested to have an in depth first prompt with clear instructions. If you happen to write a quite simple first prompt (e.g. Construct a calendar app), you’ll need to write down quite a lot of messages (i.e. spend credits) to customize it. Also, adding complex features afterwards could also be barely more complicated than declaring them at first.

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

## Objective
Develop an online application that permits users to create customized drawing images using a big language model (LLM).

## Core Features

1. **User Input and Drawing Generation**
   - Users can input an outline of the drawing they desire, akin to "Bugatti automotive," "Farmhouse," "Father and Kid," or "Cristiano Ronaldo."
   - Users select an issue level for the drawing: Beginner, Medium, or Advanced. 
     - Beginner: Suitable for babies with easy, distinct lines.
     - Medium: Moderate complexity with more details.
     - Advanced: Highly detailed and complicated drawings.
   - The appliance reformats the user's input right 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, just like a SaaS platform, using whites and soft colours for a minimalist aesthetic.
   - Make sure 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 as much as 3 drawings monthly.
     - **Pro Plan**: Allows as much as 20 drawings monthly at a price of $20 monthly.

## Technical Requirements

- **Frontend**: Use modern web technologies to create a responsive and visually appealing user interface.
- **Backend**: Develop a sturdy 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 applying for performance and scalability to handle various loads and user demands.
- Provide clear instructions and support for users to maximise their experience with the applying.
- Consider implementing analytics to trace user engagement and drawing preferences for future improvements.

The primary design turned out to be pretty good but I needed to make some adjustments. After the initial prompt, I mainly used messages with just one instruction. You can even edit the code on Lovable UI for making changes and these changes don’t devour your credits.

Supabase integration

Although I wrote in my initial prompt so as to add authentication and subscription, it didn’t work due to lacking a correct backend. That is where Supabase got here into play.

It’s very easy so as to add Supabase in your Lovable projects. You only 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 constantly sending requests to envision user subscription status. I detected this problem by manually checking the network activity. I needed to spend just a few messages for Lovable to repair this problem. This might have been a straightforward fix should you are a developer. I could solve it by myself but needed to spend a while on it. I just desired to move fast and use Lovable for all the pieces.

Supabase free tier limits were quickly consumed and I needed to upgrade to a paid plan, which costs $25 monthly. I feel the issue I discussed above consumed most of my limit.

GitHub Integration

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

Vital: Consider that each change Lovable makes in your project is robotically committed to the default branch on GitHub. It is a two-way integration so should you make changes on the default branch using an IDE or GitHub UI, these changes are robotically applied to your Lovable project.

One other problem I had was about working with multiple branches. In Lovable docs, it’s stated that Lovable at all times commits to the default branch. The default branch was the foremost branch at first. Nevertheless, after I created a brand new branch and set it as default branch, this modification wasn’t reflected on Lovable. It kept committing to the foremost branch.

Certainly one of Youtube videos shows an option to alter the branch on Lovable UI but I couldn’t find it. It looks as if Lovable UI modified after that. Possibly it doesn’t exist anymore. This wasn’t a blockage for me so I moved on but I definitely need to learn the answer to this problem.

Deploying the App

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

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

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

You need to use a Netlify domain name without cost or buy a custom domain name through Netlify. You possibly can after all buy your domain elsewhere and apply it to Netlify.

Vital: By default, Netlify robotically deploys your site at any time when you commit to your production branch. As I discussed earlier, Lovable robotically push commits to the default branch. So in case your default branch is used as your production branch, which is certainly not an excellent practice, at any time when you make a change on Lovable, Netlify will make a deployment. The issue with that is you’ll quickly devour your free Netlify credits.

Lovable’s Performance

Lovable did an important job putting together a complete web app. Nevertheless, the tip product just isn’t perfect. Once I deployed the positioning and began using it, I noticed some problems. The great thing is that they were all minor problems and I used to be in a position to have Lovable fix them.

I also desired to add some sample drawings to drawcraft.io. I attempted doing it through Lovable by attaching drawings within the chat nevertheless 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 positioning using those images and it worked.

How Much I Spent

I spent a complete of $102 to create my first web app. It’s an easy app that does an easy thing but my goal was to see if I’d actually have the ability to create a functional website using AI-based tools.

It’s necessary to notice that a few of these spendings may be used for other projects. Now, it’s as much as me to provide you with more ideas and switch them into motion.

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