Tag: lovable

Categories
AI Development

Tips for LLM-based Development With Lovable

This is a collection of tips I’ve picked up over the past few weeks while building on my baseball coaching app using Lovable.

First, start a new feature with Claude. Seriously. Lovable does great UI, but is more focused on getting something built (and usable, from a usability perspective) than making a good capital-p Product.

I start almost every new feature in Claude. I give it enough to get the gist of what I want, then I ask it to have a conversation with me to really hone in on it.

I recently built a feature to recommend a batting order. Here’s the start of the prompt:

Know what this sounds like?

(“A lazy PM?”, you say? Yes, but…)

It sounds like a conversation you’d have with someone smarter than you when you’re just kinda spit-balling an idea. I put this in a Claude project about my baseball project, and then we just “chat”.

Claude asks me questions about edge cases, UI, and usage. It uncovers things I was thinking about but never thought to write down. It also uncovers things I wasn’t thinking about and challenges my answers. Seriously underrated.

Now that you have your prompt, past it into Lovable, but click on the “Chat” option and add one line to the end of it:

Think step by step and build a plan to implement this feature.

In my experience, Lovable LOVES TO WRITE CODE. Which is great, considering that’s what we think we’re asking it to do.

But what I’ve noticed is that Lovable loves to write code before it’s really thought through it. So it is doing it’s thinking while it’s doing it’s writing, which almost always ends up with crappy, error-prone code.

Enabling chat mode and asking it to build a plan before writing code lets Lovable actually think about how to pull this off well.

It will then work for a couple of minutes, put together a real plan that you can review (and change), then give you a button to “Implement the Plan”. One click, and it starts whirring away at building your feature.

Categories
AI Development

Debugging Lovable Bugs

You are running into issues with your Lovable app and are having a hard time getting Lovable to fix it’s own bugs. I struggled with this for a while building my baseball coaching app with Lovable, but have come up with a strategy that has always solved my issue, using only about a tenth of the credits I was using.

  1. Tell it exactly what you see and what you would expect to see. When reporting a bug, talk to it like you would talk to an engineer. Attach a screenshot as proof. "When I click the tab, it's showing pitching stats. But when I click the batting tab, it should show batting stats."
  2. Ask chat to think step by step. This is something that I picked up from the early days of Lovable while watching how it interacted with itself. It tells itself to think step by step. Now, your bug fixing prompt says "When I click the tab, it's showing pitching stats. But when I click the batting tab, it should show batting stats. Think step by step to understand why this is happening."
    • Note: I’ve even started using this outside of Lovable (in Claude or ChatGPT for non-coding related questions) and am seeing a massive improvement in results. It’s like you’re giving it permission to take a beat and think instead of just getting into it.
  3. Ask chat to build a plan. Did you know that you can click on the “chat” button to interact with Lovable without having it right any code? This is helpful if you need to understand how something works. But it’s especially helpful if you want Lovable to build a plan for you to review before it starts writing code.

    When fixing a bug (or even implementing a feature), click on the “chat” button, then submit the query and ask it to build a plan for you to review. This will use a Lovable credit since it’s working, and you won’t have any code output for it, but this has significantly improved my success rate as it actually does some deeper thinking before starting to write code.

    Example: "When I click the tab, it's showing pitching stats. But when I click the batting tab, it should show batting stats. Think step by step to understand why this is happening, then build a plan to resolve the issue."
  4. Restore and try again. Lovable will let you restore to any previous point in the chat. When push comes to shove, restore back to a point before you started building the feature and simply ask again. Since chatbots are non-deterministic, you can get a completely different result by pasting in the exact same prompt.
Categories
Vibe Coding

Supabase Development Environment Setup Guide

I have been prototyping a project on Lovable, but am ready to introduce new users to it. However, I don’t want to mess up their data and their experience with my tinkering. I needed to set up a staging environment with a separate database.

I worked with Claude to figure out how to get data from my production Supabase and push it to my new staging Supabase. We went back and forth, but finally figured it out.*

Prerequisites

  • Supabase CLI installed (npm install -g supabase)
  • PostgreSQL client tools (psql)
  • Access to both production and development Supabase projects

Step-by-Step Process

1. Identify Your Projects

You’ll need:

  • Production project – Your live database with real data
  • Development project – Your testing environment (can be empty)

Get the project references from your Supabase dashboard URLs:

  • Production: supabase.com/dashboard/project/[PROD_PROJECT_REF]
  • Development: supabase.com/dashboard/project/[DEV_PROJECT_REF]

2. Get Database Connection Strings

From each project’s dashboard:

  1. Go to Settings → Database
  2. Copy the Direct connection string (not connection pooling)
  3. Note the password for each database

3. Link CLI to Production Database

bashsupabase link --project-ref [PROD_PROJECT_REF]
# Enter your production database password when prompted

4. Export Schema from Production

bashsupabase db dump --file production_schema.sql

5. Export Data from Production

bashsupabase db dump --file production_data.sql --data-only

6. Combine Schema and Data

bashcat production_schema.sql production_data.sql > complete_dump.sql

7. Import to Development Database

bashpsql "postgresql://postgres.[DEV_PROJECT_REF]:[DEV_PASSWORD]@aws-0-us-east-2.pooler.supabase.com:5432/postgres" < complete_dump.sql

Note: Replace the connection string with your actual development database details from step 2.

Common Issues & Solutions

DNS Resolution Errors

If you get hostname lookup errors, try using the Session pooler connection string instead of Direct connection.

Version Mismatch Errors

If pg_dump fails with version mismatch:

bash# Add --no-sync flag
pg_dump --no-sync [connection_string] > dump.sql

Empty Data Dumps

  • Ensure you’re connected to the right project with supabase status
  • Use --data-only flag specifically for data export
  • Verify data exists: psql [connection_string] -c "SELECT COUNT(*) FROM [table_name];"

Verification

After import, verify your development environment:

bash# Connect to dev database
psql "postgresql://[dev_connection_string]"

# Check row counts
SELECT 'teams', COUNT(*) FROM teams
UNION ALL
SELECT 'users', COUNT(*) FROM auth.users;

Pro Tips

  • Always use development environment for testing – never test directly in production
  • Regular syncing – Re-run this process periodically to keep dev data current
  • Separate connections – Keep production and development connection strings clearly labeled
  • Reset dev first – Consider resetting your dev database before importing: supabase db reset

Security Notes

  • Never share production database credentials
  • Use environment variables for connection strings in your applications
  • Ensure development databases have appropriate access restrictions
  • Consider anonymizing sensitive data in development environments

Need help? Check the Supabase CLI documentation or reach out to your team’s database administrator.

* I then asked Claude to generate me a one-pager, based on this experience, that I can share with people that are looking to copy their production database to another environment for safe testing and development. This is that doc.