Lovable.dev: How I Built a Working App with AI in 12 Prompts in 2 Hours

Creating digital products is difficult, especially without full-stack development experience.

I used to have it like this: I had plenty of ideas, but it would take months to code them, or I would have to hire a developer.

I remember spending half a year and over $10K to create an educational startup, only to realize in the end that the idea wasn’t very good.

Now everything is simpler — AI tools and no-code platforms allow you to build an MVP in just a few hours.

If you're an indie hacker or solo entrepreneur with a bunch of ideas but are intimidated by technical details — testing an idea is now easier than ever.

In this article, we'll explore a service that can help with this — Lovable.dev.

Using it, I built a simple app in just 12 prompts and 2 hours – Quests.

What is Lovable.dev?

Lovable.dev is a platform for creative professionals that lets you quickly launch fully functional SaaS products without complex development.

It operates in a chat-based format: you simply describe what you want to create and watch your app come together in real time.

You can specify the desired interface design, the required functionality, add authentication, or connect third-party services via API.

The platform will clarify the details and generate a ready-to-use app that you can publish and use immediately.

Lovable.dev simplifies the journey from idea to working product by removing technical barriers and allowing you to focus on the creative side.

What can you do with Lovable.dev?

Lovable.dev combines code generation, design, and integrations on one platform.

• Rapid prototyping: lets you assemble a working app mockup in minutes and test hypotheses.
• Real-time preview: changes in code and design are reflected instantly, making adjustments and improvements easier.
• Database integration: no need to set up a server or database separately — everything is available in one place, with the option to choose a provider (e.g., Supabase).
• AI-assisted development: AI helps automatically generate code, fix errors, and optimize your app's logic.
• Version control integration: projects can be easily linked to GitHub, giving you full access to the code, enabling teamwork, and allowing deployment on any server.

All of this without having to write code yourself.

Examples of projects built on Lovable.dev

I've seen a wide variety of projects created on Lovable.

As always – some are cringe-worthy, while others are fascinating.

For example, one service allows you to generate coloring pages for children based on a personalized request.

I've also seen a website that generates audiobooks for children based on parents' requests. For narration, the voice is generated using ElevenLabs.

Another service is an alternative to AlsoAsked and AnswerThePublic.

It gathers keywords and questions that users ask on Google, Reddit, or Quora.

It builds mind maps and helps with writing articles.

And that happens too.

What does Quests do?

Quests is a service for creators and entrepreneurs that offers a new challenge each day to foster creativity, overcome creative blocks, and approach tasks from a different angle.

After completing a challenge, you can share your result on X and see how others have tackled it.

It's a mix between Wreck This Journal and BeReal.

The service is fully automated, synchronizes with a database, and requires no constant oversight.

When I was working on an article, I wanted to create something interactive — so you could click around and see the result immediately.

What is Lovable suitable for?

Lovable is ideal for quickly turning an idea into a working product.

Examples show that you can build almost anything with it — from prototypes to fully functional web applications.

The main advantage of Lovable is the quality of its code and the ease of integrating standard web functions, allowing you to focus on core business logic rather than routine tasks.

What is Lovable not suitable for?

Now, let's talk about its limitations.

Lovable is not suitable for:

Non-web applications

1. Native mobile apps.
2. Desktop applications.
3. Command line tools.
4. System services.
5. Static websites (instead, use static site generators).

When there are complex backend requirements

1. Heavy server processing.
2. Complex microservices architecture.
3. Need for specific backend frameworks.
4. Custom server configurations.

For projects that depend on a specific framework

1. Next.js applications.
2. Gatsby sites.
3. Angular apps.
4. Vue.js projects.

Do you need to know how to code to use Lovable.dev?

While Lovable simplifies the development process, basic knowledge of web applications is helpful.

Understanding terms like “backend”, “database”, “API”, and “authentication” will speed up your work.

Coding isn’t mandatory, but knowing how to read code will help you customize your project more deeply.

If you do know how to code and it's important for you to use specific technologies, here's what Lovable uses.

Which technologies does Lovable use?

Frontend (React + TypeScript)

1. Modern React hooks and features.
2. TypeScript for type safety and easier development.
3. Vite for fast bundling.

UI and Styles

1. Tailwind CSS for a flexible styling approach.
2. shadcn/ui with customizable components.
3. The ability to use custom CSS and animations.

State and Data Management

1. React Query for data fetching and caching.
2. React Router for navigation.
3. Context API for global state.

Backend Integration

Supabase: PostgreSQL, authentication, real-time subscriptions, Edge functions, file storage, backups, and RLS (Row Level Security).

How to start using Lovable.dev?

Creating an account

Go to lovable.dev — you'll immediately see an interface where you can describe your app idea.

When you try to send a message, the system will prompt you to log in or register.

You can register using your GitHub, Google account, or via email.

After registering, you'll be taken to the app creation interface: a chat on the left and your future app on the right.

How much does Lovable.dev cost?

All users get 5 free messages per day, and paid plans include an additional fixed monthly message limit.

When I first saw the limit of 5 free messages per day and an extra 100 messages per month on the most affordable plan, I thought it wouldn't be enough for full-scale project work.

But in practice, it turned out differently:

1. Well-crafted prompts allow you to implement several features in one query. We'll discuss how to write effective prompts later.
2. The limits are not always strictly enforced. I didn't find an explanation in the documentation, but I noticed that I often send more messages than the limit suggests. Perhaps there is a minimum threshold of code changes below which a message isn't counted.

In the end, even with the cheapest plan, you can build several fully functional apps.

Over time, it becomes easier to achieve better results while using fewer messages.

Here is a comparison table of the plans:

Note:

1. Messages triggered by the "Try to fix it" button are not counted towards the limits if you use the button. However, if you manually send an additional query to fix an error, it counts as one message.
2. Unused messages do not carry over — limits reset daily or monthly depending on the plan. The remaining messages do not accumulate.

5 free messages per day are enough to evaluate whether Lovable meets your needs.

How to make requests in Lovable.dev correctly?

At first, the message limits may seem restrictive, but even one well-crafted prompt can yield excellent results.

I have studied all available guides on using Lovable and gathered some practical tips for creating effective prompts.

To simplify the process, I created a free custom GPT that helps turn ideas into clear and structured prompts for Lovable.

How to use the Lovable Prompt Machine?

Open the Lovable Prompt Machine.

Use one of the suggested options or directly describe your idea.

Answer the follow-up questions.

Copy the generated prompt into Lovable.

Here’s an example of an application built using a single prompt through the Lovable Prompt Machine.

This service can transform articles into social media posts tailored to their specifics.

For the application to work fully, you need to connect the OpenAI API.

Therefore, you cannot create a complete app with just one prompt.

However, the generated interface is an excellent starting point for further development.

You can even build silly applications.

Small quiz.

How to make effective prompts?

Break down tasks into smaller parts

Don’t try to cover the entire project in one prompt.

Divide the task into stages — it's easier to control the outcome.

❌ Bad:

Create a full e-commerce site with products, cart, checkout and admin panel

✅ Good:

Let's start by creating a product card component that displays the image, title, and price

Now add a grid layout to display multiple product cards on the homepage

Add an 'Add to Cart' button to the product card with a click animation

Create a shopping cart sidebar that slides in from the right

🤔 Why?

A step-by-step approach allows you to monitor the outcome at each stage and makes it easier to make adjustments.

Use built-in features

Lovable.dev offers ready-made integrations (e.g., Supabase, shadcn/ui).

Use them to speed up development.

❌ Bad:

Can we add a custom authentication system using JWT tokens?

✅ Good:

Let's implement Supabase authentication with email and password login

Add a protected route that only logged-in users can access

Create a user profile page that displays data from Supabase

Add the shadcn/ui Dialog component for the login modal

🤔 Why?

Ready-made solutions speed up development and reduce the likelihood of errors.

Follow best practices

Adhere to security and architectural standards.

❌ Bad:

Store the API key in a component and fetch data directly

✅ Good:

Create a posts table in Supabase with proper RLS policies

Add error handling to the login form with toast notifications

Create a reusable LoadingSpinner component for async operations

Implement form validation using react-hook-form and zod


🤔 Why?

Following best practices makes the project easier to maintain and reduces risks.

Structure your project

Try not to keep all your code in one file — break your project into modules.

❌ Bad:

Put all the code in App.tsx

✅ Good:

Create a components/auth folder for login-related components

Move the product types to types/product.ts

Create a hooks folder and add useCart custom hook

Set up a layout component with header and footer

👀 Example:

src/
├── components/
│   ├── auth/
│   │   ├── LoginForm.tsx
│   │   └── SignUpForm.tsx
│   └── products/
│         ├── ProductCard.tsx
│         └── ProductGrid.tsx
├── hooks/
│   ├── useCart.ts
│   └── useAuth.ts
└── types/
     ├── product.ts
     └── user.ts


🤔 Why?

A clear structure facilitates scaling and teamwork.

Develop functionality step by step

Add complex features gradually, starting with simple components.

❌ Bad:

Add a complete blog system

✅ Good:

First, create a simple BlogPost component that shows title and content

Add markdown support to the blog post content

Create a BlogList component to display post previews

Add pagination to the blog list

🤔 Why?

A phased approach simplifies debugging and reduces the likelihood of errors.

Manage state properly

Avoid storing all state in one place — use Context API, React Query, and other tools.

❌ Bad:

Handle all the app state globally

✅ Good:

Create a CartContext to manage shopping cart state

Add React Query hooks for fetching and caching products

Implement local storage persistence for the shopping cart

🤔 Why?

Proper state management makes the project more stable and easier to maintain.

Set up your database and backend

Use ready-made integrations (such as Supabase) and only configure what is necessary.

❌ Bad:

Add a database with all possible tables we might need

✅ Good:

Create a products table with basic fields: id, name, price, description

Add image_url and category_id columns to the products table

Set up RLS policy to allow public read but authenticated create

Create an edge function to handle Stripe payment initialization

🤔 Why?

Creating only the necessary entities simplifies project maintenance and speeds up development.

Improve the interface and UX

Provide clear instructions for improving visual elements and user interaction.

❌ Bad:

Make the site look better

✅ Good:

Add a loading skeleton while products are being fetched

Implement a smooth fade-in animation for product cards

Add a tooltip to explain the 'Save for Later' feature

Make the header sticky and add a subtle shadow on scroll

🤔 Why?

Specific instructions help achieve the desired result more quickly.

Chat modes

In each message, Lovable expects clear instructions on what needs to be changed in the project.

If you need to clarify details or discuss ideas without making changes, use the chat mode.

To enable it:

1. Go to settings and open the Account Settings tab.
2. In the Labs section, activate Chat modes.
3. Once activated, you will be able to send follow-up messages.

Keep in mind that messages in the chat may also count against your daily query limit.

Let's summarize:

• Be specific: clearly indicate fields, styles, and animations.
• Provide feedback: specify what needs to be fixed if the result is unsatisfactory.
• Work with errors: use the "Try to fix it" button or describe the problem manually.

Good prompts in Lovable.dev:

• Solve a single task or a related set of tasks.
• Use built-in tools (Supabase, shadcn/ui).
• Follow best practices (code structure, security, validation).
• Develop functionality gradually, avoiding overloading prompts.

How to get the most out of Lovable.dev?

Visual editing

To make changes to the interface without sending a message in the chat, click Edit and select the desired interface element.

Customize it directly in the editor as needed.

Using images for UI hints

Upload a screenshot, and Lovable will recreate the interface based on it.

Attached is a screenshot of the current layout. Create a UI that closely resembles the provided image, adjusting margins for mobile responsiveness.

Import from Figma into Lovable

If you have a paid Figma subscription with access to Dev Mode, you can import your finished design directly into Lovable and speed up the development process.

For this, you'll need a plugin from Builder.io.

To ensure the layout exports correctly, you must use auto-layouts.

I don't yet know how to work with auto-layouts, so I asked Figma AI to generate a simple interface for the tool I plan to create.

Here's what the design looked like in Figma.

And here's how it exported to Lovable.

The result looks good, but the design is transferred without any description of the functionality.

When I added explanations directly in Lovable, the layout "fell apart."

I plan to test it in more detail and update the article later.

Uploading project knowledge

In the project settings, you can add additional information about the product.

This data will be taken into account with every code change, helping maintain the project's integrity and speeding up development.

Full code ownership

One of the key advantages of Lovable.dev is its integration with GitHub.

You can easily export your code:

• Customize it to your liking.
• Scale your project.

The platform does not lock you into a closed ecosystem, which is especially important for long-term projects.

I edited my code using GitHub's visual interface, and after saving, the updated version was automatically reflected in Lovable.

Project versions

If the project goes off track, you always have the option to roll back to a previous version.

Integrating monetization

Lovable.dev supports integration with Stripe and other payment systems.

Simply specify in your prompt that you need a payment page or subscription system, and the platform will generate the appropriate code and UI components.

After that, you can test and launch the payment system for users.

What options are there besides Stripe?

I want to test if I can integrate payments on the site through Ukrainian services.

SEO Settings

I am a big fan of search engine optimization.

This site receives over 500K visitors per year, and 90% of its traffic comes organically from search. This year, I also plan to start growing social media.

Clearly, promoting a content-driven site is easier than an app or service.

If the project has little content, most organic traffic will likely come from branded queries—when users search for your project directly.

Nevertheless, it was important to me that a project built on Lovable is optimized for search.

I asked the platform what it could do for SEO, and it immediately made several improvements.

And it yielded good results.

If you want to dive deeper into SEO, check out my article on how to properly optimize a website for search.

If your project includes a blog or a large amount of content, it might make sense to consider alternative platforms, such as Webflow.

You could build the core functionality with Lovable, and host the blog on a Webflow subdomain.

How to publish your project on Lovable.dev?

All projects are automatically published on a subdomain: https://your-project.lovable.app/

If you want to use your own domain, you can connect services like Netlify or Cloudflare Pages.

1. Netlify: a simple option for quick deployment.
2. Cloudflare Pages: ideal if you already use Cloudflare for other purposes.

Both services allow you to host your project on your own domain for free.

Publishing via Cloudflare Pages

I chose Cloudflare for deployment because I use it for other tasks as well and wanted everything in one place.

After connecting the repository from GitHub, Cloudflare automatically publishes all updates.

However, the project didn't work on the first try — Cloudflare threw errors related to missing libraries.

How did I solve the problem?

1. I opened the project repository on GitHub.
2. I launched a terminal directly from the browser (or used the console if that's more convenient).
3. I ran several commands in the terminal to install the missing dependencies.

In the terminal, I executed the following commands:

1. bun install
2. git status
3. git diff bun.lockb
4. git add bun.lockb
5. git commit -m "Update bun lockfile after dependency resolution"
6. git push

And after that, I configured Cloudflare Pages with the following commands.

1. Build command: npm install && npm run build
2. Build output directory: dist

The commands may vary in your case.

First, try publishing your project via Cloudflare Pages.

If something goes wrong, copy the message from the console and send it to ChatGPT — it will advise you on the necessary steps.

After successful publication, all updates made in Lovable will automatically appear on your domain.

What integrations does Lovable offer?

Lovable.dev supports many integrations.

Native

They can be connected in just a few clicks:

1. Supabase: for managing databases and backend.
2. GitHub: for code management.
3. Stripe: for convenient monetization.

The Supabase integration in Lovable is simple and user-friendly.

Lovable will help create the required database and synchronize your service with it.

Verified

They are easily configured through chat.

Artificial Intelligence:

1. OpenAI: adds ChatGPT AI functions to your application.
2. Stability AI: provides AI for various applications, including generating AI images.
3. Anthropic: integrates AI through Anthropic’s Claude models.
4. Replicate: runs and configures open-source AI models.
5. Runware: allows you to generate images based on text prompts.
6. Together.ai: a cloud solution for integrating different models.

Data visualization and graphics:

1. Three.js: adds interactive 3D graphics to your application.
2. D3.js: creates dynamic and interactive data visualizations.
3. Highcharts: develops professional charts and graphs.
4. p5.js: suitable for creative coding and interactive graphics.
5. Rive: allows you to create interactive animations.

Tools for development and analytics:

1. Builder.io: converts Figma designs into full-stack applications within Lovable.
2. Resend: expands email sending capabilities via API.
3. PostHog: provides user behavior analytics, session replays, and A/B testing.

Non-verified

Those that require a bit more context, but still work well:

Process automation:

• Make: a visual platform for automating tasks and integrating applications. You can implement almost any functionality with it. Read more in my article on how to automate tasks in Make.
• Bannerbear: automates the creation of images and videos for social media.
• Zapier: an automation platform for integrating various web applications.

Navigation and maps:

• Mapbox: a platform for navigating people, parcels, and vehicles.

AI and data processing tools:

• Firecrawl: converts websites into structured data suitable for LLMs.
• Perplexity: adds search capabilities for up-to-date information from the internet.
• Transformers.js (HF): runs machine learning models directly in the browser without a server.
• HeyGen: a service for creating videos using artificial intelligence.

Communications and planning:

• Twilio: a platform for voice calls, text messages, and other communication services.
• xAI: a tool for automating meeting scheduling.
• Calendly: a tool for convenient meeting scheduling.

Email:

• Mailgun: a service for sending, receiving, and tracking emails.
• SendGrid: an email delivery service for transactional and marketing messages.

Search and data integration:

• Serper.dev: an API for integrating Google search results into applications.

Tools for work and management:

• Google Workspace: a cloud suite of productivity and collaboration tools from Google.
• Notion: a versatile tool for note-taking, task management, and working with databases.
• GoJS: a library for creating flowcharts and visualizing workflows.
• TinyMCE: a visual editor for creating and editing text.

E-commerce and finance:

• Lemon Squeezy: an e-commerce platform that simplifies selling digital products.
• Square: a solution for processing payments and managing sales in retail.
• GetLago: an open platform for usage tracking and pay-as-you-go billing.

These are just integrations with simplified connectivity, pre-added to the system. In practice, you can connect any service to your application built on Lovable.

What are the alternatives to Lovable.dev?

There are many tools that speed up product development.

I plan to test the most popular ones and prepare separate guides.

Here are my favorites:

1. Lovable.dev: distinguished by its focus on AI-driven full-stack solutions and real-time collaborative development. A great choice for rapid prototyping and projects where interactive features and a flexible backend are important.
2. Cursor: focuses more on enhancing code within a dedicated editor with AI suggestions. Useful if you already have the infrastructure and just want to speed up coding.
3. v0.dev: a tool for quickly building React/Node applications using AI. Convenient for typical CRUD apps and authentication.
4. GitHub Copilot/Codespaces: AI autocomplete in an IDE plus a cloud development environment. Strong GitHub integration, but lacks ready-made full-stack templates.
5. AWS Amplify / CodeCatalyst: a cloud serverless approach that scales well, but requires an understanding of the AWS ecosystem.
6. Bubble: a no-code platform for web applications; fast development, but may have limitations in performance and customization.
7. Retool: ideal for internal dashboards; a simple builder, but not well-suited for public-facing applications.

Thus, the choice of tool depends on your specific needs: whether you require full AI support at every stage (Lovable.dev, v0), an AI code editor (Cursor), an enterprise solution (PowerApps, AWS), or a no-code platform for an MVP (Bubble).

What's next?

If you're an indie hacker or solo entrepreneur, the key is not to get stuck in the endless pursuit of perfection.

Start small: build a simple MVP and see how users respond to it.

Even a product that 'mostly' works can provide valuable insights and reveal its potential.

Use AI to automate routine tasks and speed up development — it will save you time and effort.

And platforms like Lovable.dev allow you to make changes "on the fly" without starting over, making the process flexible and convenient.

With lovable.dev, you can easily test different features and integrations, and when it's time for more complex solutions, switch to full-scale development via GitHub integration.

Frequently Asked Questions about Lovable (FAQs)