How I Reduced My Lovable Costs From $400/Month

I'm not a full developer. I'm more on the product side, building an app I believe in, figuring things out as I go. Lovable was a game changer for me early on. It made building feel possible. I could see my ideas come to life without needing to know how everything worked under the hood.

But then the bills started stacking up. $300-400 a month for around 50 changes. Some of those changes were small — a button in the wrong place, a label that needed updating. Others were bugs that took multiple iterations to fix, each one costing credits, none of them really explaining what went wrong or why. I was paying a premium to not understand my own app.

The final straw was realising I was locked in. My database was sitting inside Lovable Cloud with no way to get direct access to it. No migrations I controlled, no edge functions I could modify, no way to just query my own data without going through Lovable's interface. I was renting my own product.

So I spent two days migrating everything off. It was painful — but only because I hadn't set things up right from the start. If I had followed the workflow I'm about to share, the migration would never have been necessary. Everything would have been mine from day one.

Here's exactly what I'd do if I was starting from scratch — and what I'm doing going forward.

The Stack

• Claude desktop app (planning, architecture, and creating perfect prompts)

• Lovable (UI/UX only)

• Claude Code (all development work)

• Your own Supabase (database and backend)

• Vercel (hosting)

First — Download the Claude Desktop App

Before anything else, download the Claude desktop app from claude.ai/download. This is your command centre for the whole workflow.

The desktop app has two modes you'll use constantly:

Claude (chat interface) — use this for planning your app, thinking through architecture, diagnosing problems, and creating detailed prompts before you give them to Claude Code. This is where you think before you build.

Claude Code — built into the same app. This is the AI that actually works inside your codebase — reads your files, writes code, runs commands, pushes to git. Switch between the two seamlessly without leaving the app.

Having both in one place is the key to this workflow. Plan in Claude, execute in Claude Code, all from the same desktop app.

Step 1 — Plan Everything in Claude First

Before opening Lovable, spend time in the Claude chat planning your entire app. Ask it to help you define:

• Core user flows (who are your users, what do they do)

• Database schema (what tables you need)

• Edge functions and backend logic

• Authentication approach

I can't stress this enough — a well-planned prompt to Lovable produces dramatically better results than winging it. No matter how complex your app is, plan it before a single line of code is written. Claude will help you think through things you haven't considered and save you enormous rework later.

Step 2 — Set Up Your Own Supabase Project First

This is the most important thing people miss. Do NOT use Lovable Cloud for your database.

Create a free account at supabase.com and set up your own project before touching Lovable. Go to Project Settings → API and grab your Project URL and anon key.

Why does this matter? Lovable Cloud locks you out of your own database. No direct access, no migration files, no edge function control. I found this out the hard way — when I tried to migrate off Lovable I couldn't export my schema. Claude Code had to reconstruct the entire base schema from my TypeScript types file. It worked, but it took hours that could have been avoided entirely.

Set up your own Supabase from day one and you'll never have this problem.

Step 3 — Build UI/UX in Lovable (Only UI/UX)

Now open Lovable. And honestly — this is where Lovable really shines. Don't underestimate how good it is for this specific job.

Lovable is genuinely one of the most impressive tools available for building frontend interfaces fast. What would take a developer days to scaffold — routing, authentication flows, component libraries, responsive layouts, Supabase integration — Lovable produces in minutes. For someone more on the product side, it's transformative. You can go from an idea to a fully designed, navigable app in an afternoon.

The visual feedback loop is also excellent. You describe what you want, see it rendered immediately, iterate visually, and refine until it looks and feels exactly right. For UI work this is far faster than any other approach. Trying to describe every pixel of a design to Claude Code would be painful — Lovable speaks the language of design naturally.

For my app, Lovable built out a complete UI incredibly quickly — the component quality was high, the design was consistent, and it handled all the boilerplate that would have taken weeks to write manually.

So use Lovable properly. Take your time here. Get the UI exactly how you want it — every screen, every flow, every edge case in the user journey. This is the foundation everything else is built on.

Critical settings before you start:

• Go to Settings → Supabase and connect your own Supabase project (paste in your URL and anon key from Step 2)

• Go to Settings → GitHub and connect a GitHub repo

These two settings are non-negotiable. Connecting your own Supabase means your database is yours from day one. Connecting GitHub means your code is version controlled and ready for Claude Code the moment you're done.

What to focus on in Lovable:

• All your screens and page layouts

• Navigation and routing between pages

• Forms and user input flows

• Component design and visual polish

• Basic Supabase auth (login, signup, Google OAuth)

• The overall structure of your app

What NOT to do in Lovable:

• Don't try to build complex business logic

• Don't iterate endlessly on bugs — if something breaks badly, move on

• Don't add Stripe, complex webhooks, or multi-step backend flows

• Don't stay on it once the UI is done

The moment you're happy with how the app looks and flows — stop. Clone the repo, open Claude Code, and never look back. Lovable has done its job beautifully. Everything from here is Claude Code's territory.

Step 4 — Set Up Claude Code on Your Project

In the Claude desktop app, open Claude Code and connect it to your GitHub repo. Run your first command:

/init

This scans your entire codebase and creates a CLAUDE.md file — a permanent memory file that gives Claude Code context about your project every single session. It documents your stack, architecture, conventions, environment variables, and more. Do this before anything else.

When I ran this on my app it read dozens of files in under two minutes and produced a comprehensive document covering everything from auth flows to naming conventions. Every future Claude Code session starts with this context automatically.

Step 5 — Set Up Local Development

Clone your repo and install dependencies:

git clone https://github.com/yourusername/your-project
cd your-project
npm install

Create a .env file with your Supabase credentials:

VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key

Make sure .env is in your .gitignore file before you commit anything. If you accidentally commit .env even once, your database credentials live in git history forever and can be found publicly on GitHub.

Check it's there:

cat .gitignore | grep .env

If nothing shows, add it:

echo ".env" >> .gitignore

If you've already committed .env by mistake — rotate your Supabase keys immediately at Supabase → Project Settings → API.

Run the app locally:

npm run dev

Your app is now running at localhost:8080 connected to your real Supabase database. Keep this running in a separate terminal tab while Claude Code works — you'll see changes live as they happen.

Step 6 — Install Supabase CLI and psql

These two tools are essential:

brew install supabase/tap/supabase
brew install postgresql
supabase login
supabase link --project-ref your-project-id

psql lets you query your database directly — incredibly useful for debugging. I used it constantly during testing to check if data was actually hitting the database or being silently blocked by RLS policies. More on that below.

Step 7 — Deploy to Vercel

Go to vercel.com, sign up with GitHub, import your repo. Add your environment variables (same as your .env file). Click deploy.

Every push to main auto-deploys to production. Every branch gets a unique preview URL automatically. Free on the hobby plan.

Step 8 — The Ongoing Development Workflow

This is the part that saves you money and makes development actually enjoyable.

For planning and complex features: Open Claude chat in the desktop app. Describe what you want to build. Claude will help you think through the approach, identify potential issues, and craft a detailed prompt. Then switch to Claude Code with a clear brief. This two-step process — plan in Claude, build in Claude Code — consistently produces better results than going straight to Claude Code with a vague description.

For building: Give Claude Code the task. It reads your codebase, understands the context, makes the changes, and explains what it did. Use plan mode for complex tasks — it diagnoses and plans before touching any code. You can watch it work, see which files it's reading, and understand every decision it makes.

For testing: Check localhost:8080 visually. Use psql to verify database changes actually saved. I discovered multiple silent failures during testing where success toasts were firing but RLS policies were blocking writes — psql showed me immediately that the data wasn't there. You can't see this kind of issue in the UI alone.

For deployment:

git push                    # triggers Vercel auto-deploy to production
supabase db push            # applies any new migrations
supabase functions deploy   # deploys edge function changes

For new features:

1. Plan in Claude chat, create a detailed prompt

2. Create a new branch — git checkout -b feature-name

3. Build with Claude Code

4. Push branch — Vercel creates a preview URL automatically

5. Test on preview with real data

6. Merge to main — production deploys automatically

A Note on Tokens

Claude Code uses tokens from your Claude Pro subscription. A few tips:

• Use /compact between tasks to compress conversation history

• Start fresh sessions for unrelated tasks

• Be specific in your prompts — vague prompts make Claude Code explore more files than necessary

• Setup and migration tasks are heavy on tokens. Day-to-day feature work is much lighter.

What Claude Code Can Do That Lovable Can't

The difference became clear immediately. Claude Code:

• Reads and understands your entire codebase — not just one file

• Traces bugs across multiple files and finds root causes

• Diagnoses complex issues like async race conditions and RLS policy gaps

• Writes proper database migrations

• Deploys edge functions

• Fixes security vulnerabilities

• Runs commands, pushes to git, iterates on errors autonomously

When I migrated my app, Claude Code diagnosed a React state race condition in my auth flow across 4 files, found 5 tables with RLS enabled but no UPDATE policies causing silent write failures, and fixed 7 security vulnerabilities in edge functions. None of that would have been possible in Lovable without burning a fortune in credits — and even then you'd never really understand what was fixed or why.

Cost Breakdown

ItemCostClaude Pro$20/monthVercel hobbyFreeSupabase free tierFreeLovableUse for UI ideally stick within the monthly subscription

Total ongoing: $20/month

My previous cost staying on Lovable for everything: $300-400/month.

TL;DR

Plan in Claude → Build UI in Lovable (with your own Supabase connected) → Clone repo → Claude Code desktop for everything else → Vercel for hosting.

The key insight is that each tool has a specific job. Lovable is genuinely world-class at UI. Claude Code is genuinely world-class at understanding and modifying a real codebase. Don't use either one for the other's job.

Starting fresh with this setup takes a couple of hours. You'll never go back.