Began today by working on my vibe-coding skills, starting with Lovable. I’m using Lovable Academy’s “Shipping Products using Lovable (Beginner)” course for this:

Here’s a review of what I learnt:

Lovable Foundations

• Getting the most out of Lovable (5 principles for using Lovable well)

  • (1) Plan projects thoroughly → Outline your database tables, pages, and functionality. Clearly define the project first before prompts

  • (2) Keep prompts concise → Aim for 1-2 clear instructions per prompt to maintain AI context.

  • (3) Integrate Supabase correctly → Lovable provides a simple native integration with Supabase

  • (4) Simplify authentication → There's no need to manually code authentication procedures. Simply instruct Lovable to do so

  • (5) Manage file sizes → Avoid uploading excessively long files to Lovable as this can cause it to lose context

  • (6) Exercise patience → Take the time to understand Lovable’s chat suggestions

• Navigating Lovable’s UI

  • Learnt to navigate Lovable’s UI, from the main chat stream to the visual editor and debug (“try to fix”) button

    

Prompting & Chat Workflow Mastery

• Prompting in Lovable 101 (5 basics for prompting Lovable)

  • (1) Keep Prompts Clear and Concise → Make sure prompts are brief to avoid overloading the AI

  • (2) Limit Instructions per Prompt → Each prompt should be a single, clear instruction

  • (3) Provide Specific but Flexible Directions → Be specific but avoid being too prescriptive so that you don’t limit the AI’s judgement

  • (4) Embrace Lovable’s Approach → Don’t enforce strict patterns. Trust Lovable to handle the details of implementation

  • (5) Use Simple, Natural Language Instructions → Straightforward requests (e.g. “implement auth”) are better than complex flows

• Chat vs Edit mode— Lovable has 2 modes: chat and edit mode.

  • Edit mode is the default, where prompts entered into the prompt box will be implemented as changes by the AI

  • Chat mode allows you to directly talk with Lovable’s AI for suggestions and insights, without making immediate code changes.

    

• Visual Edit Mode— You can use Lovable’s visual edit mode to make direct changes to specific visual elements on your project

  

  

Debug-First Mindset

• Fixes and build errors— Lovable’s AI is powerful, but errors will inevitably happen. A good 5-step approach to fix errors is:

  • Remain calm → Don’t panic. Look at the error that Lovable has highlighted to you

  • Check error logs → Click on “show logs” for more info about the error, such as whether it is a build or runtime error

    • Build errors → errors that prevent the code from being compiled in the first place

    • Runtime errors → errors that occur when the code is being executed

  • Use Lovable’s “Try to Fix” button → Lovable has a nifty “Try to Fix” button that leverages the AI to diagnose and solve the error.

  • Use chat mode → Chat with Lovable’s AI directly to inquire more about the error, prompt Lovable to analyse the cause and suggest a solution

  • Use “Rubber Ducking” → Rubber Ducking is a debugging strategy coined by software engineers where you try to solve errors by carefully describing the problem and how the code should ideally function. The term comes from the fact that you’re supposed to explain this to some inanimate object, like a rubber duck. Use this set of prompts to Rubber Duck using Lovable:

    • [Describe what is wrong]

    • [Describe how it should ideally function]

    • “Rubber Duck Yourself”

  • Attach screenshots for UI issues → you can take a screenshot of the error to upload to Lovable, then clearly describe what should happen instead to allow the AI to diagnose and resolve the issue

  • Revert to a previous version → you can revert to an earlier working version of your Lovable project to quickly undo problematic changes