Introduction
Prompt Engineering
Integrations
Tips and Tricks
Quickstart
From first prompt to full-stack app
Overview of Lovable
Welcome to this step-by-step guide on how to create a full-stack application using Lovable:
The Lovable Platform Overview
Step 1
To get started, head over to lovable.dev and create an account.
Step 2
Once registered, you’ll be able to create your first project.
Step 3
Simply enter an initial prompt to kick things off, and Lovable will do the rest! This is the starting block for any project in Lovable, where you can bring your ideas to life instantly.
At Lovable, simplicity is key:
-
Here you kickstart your project with a single prompt.
-
Explore all projects, including the latest and featured ones.
-
Jumpstart with a template from our curated selection.
-
Personalize your experience by viewing and editing your profile.
-
Manage your account to check monthly credits and adjust settings.
-
Experiment with Labs features like Chat mode—toggle them on or off.
-
Upgrade or downgrade your plan seamlessly.
At Lovable, every project follows a structured workflow:
-
Edit with ease using a chat-based interface.
-
Attach images for precision edits and inspiration.
-
Select and visually edit components for a seamless design experience.
-
Switch effortlessly between edit mode and chat mode.
-
Track changes with version history and restore any previous version.
-
Navigate through pages of your project with ease.
-
Enable remixing or rename your project as needed.
-
Integrate with Supabase for backend capabilities.
-
Collaborate via GitHub to edit and manage your code.
-
Publish, deploy, and share your project with a preview link (remember to re-publish after changes).
-
Toggle between web and mobile view for responsive design.
-
Refresh the preview modal to see updates instantly.
-
Open your project directly using the preview link.
Every project’s settings empower you to:
-
View key project details like total edits and creation date.
-
Set up custom knowledge to tailor your project’s context.
-
Connect to a GitHub repository for seamless collaboration.
-
Adjust project visibility from public to private.
-
Manage the badge display (available for paid plans only).
-
Rename your project anytime.
-
Delete your project (⚠️ Danger Zone).
You can always quickly access:
-
Dashboard for an overview of your projects.
-
Account settings to manage your profile and preferences.
-
Documentation, Feedback Portal, and Support for guidance and assistance.
-
Log out securely from your Lovable account.
Start your Project
There are several ways to get started with Lovable, depending on your preferences and resources:
Lovable’s prompt-based system makes app creation simple.
-
Just describe what you want to build in the prompt box.
-
The more specific you are, the better the results.
-
Start with clear and detailed prompts.
-
You can refine and adjust your project as you go.
Example:
“Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart.”
Step 1
Lovable offers templates to help you get started quickly on popular project types, such as dashboards, e-commerce sites, or social apps, for a quick setup.
Step 2
Once the template loads, use prompts to adjust features, add new elements, or fine-tune the design to match your vision.
You can remix an existing public project or one of your own. Remixing allows you to reuse the current state of a project as a starting point and build upon it. It’s a great way to explore new ideas, make adjustments, or iterate with different changes while preserving the original version.
Note that it is not possible to remix projects when Supabase is connected.
If you have a design in Figma,
-
Using screenshots: Take a screenshot of any part of it. You can paste the screenshot directly into Lovable or drag-and-drop the image file. Once you press Enter, Lovable will convert your design into functional code.
-
Using Builder.io integration: First, structure your Figma design using Auto-Layout and clear layer naming. Then, open the Builder.io plugin in Figma, select your design, and click “Open in Lovable” to generate a fully functional app. More information here.
Step 1
Use Excalidraw or any similar tool to sketch your UI.
Step 2
Take a screenshot of your drawing, then paste or drag-and-drop it into Lovable.
Step 3
The platform will transform your sketch into working code.
If you want to replicate an existing webpage,
Step 1
Take a screenshot using shortcuts like Cmd+Shift+4 on Mac or tools like the GoFullPage Chrome Extension.
Step 2
Paste or drag the screenshot into Lovable
Step 3
Lovable will recreate the structure of the webpage in your project.
Edit your Project
The Knowledge Base in Lovable acts as your project’s blueprint, organizing functionality, design, and goals in one place.
Follow these steps to set up and manage it effectively.
Step 1
Go to the Knowledge Base section in your dashboard.
Step 2
Click “Add Entry” and categorize them under:
-
📌 Project Overview – Define objectives and scope.
-
🚀 Key Features – List core functionalities.
-
🎨 Design Guidelines – Document UI/UX principles.
This helps maintain consistency in outputs.
Step 3
Keep It Updated: Regularly review and update entries as your project evolves. This ensures the development stays on track.
Visual Edits allows AI-driven development with Tailwind-native visual controls for easy refinement.
Speed matters when building AI-driven apps, but so do stability and control. That’s why we’ve upgraded versioning to make tracking changes effortless.
Restore Past Versions Instantly
If you want to go back to a previous version of your app, click ‘restore’ on the version you want to revert to.
Bookmark Key Edits
Keep your work organized by bookmarking important edits, making it easy to find and revisit them later.
Intuitive Version History
The history panel now works like Google Docs, making tracking changes easier.
Attach images directly to the chat to add context to your prompts. This makes it easier to illustrate ideas or concepts that are better shown than described.
Integrate your project with GitHub to iterate on your application seamlessly. You can make code changes in GitHub or your preferred IDE while keeping everything in sync with Lovable.
Add Fullstack Capabilities to your Project
Supabase is a backend-as-a-service platform that integrates smoothly with Lovable to add powerful backend capabilities to your application.
Set Up Supabase
Create an account on Supabase and create a new project.
Link to Lovable
In Lovable, go to Settings -> Connect Supabase and follow the steps.
Manage Data
Set up tables, manage user data, and configure email notifications.
After setting up your Supabase project, you’ll need to connect it to your Lovable project. This connection enables Lovable to leverage Supabase’s backend services seamlessly.
Implementing secure authentication is crucial for any application. With Lovable’s AI form builder and Supabase integration, you can effortlessly create robust login and sign-up forms.
Here’s a step-by-step guide:
Create a Supabase Account
-
Visit Supabase and sign up.
-
Access the dashboard to manage your projects and databases.
Integrate Supabase with Lovable
-
In Lovable, navigate to the integration settings.
-
Input your Supabase project URL and API keys to establish a connection.
Design Authentication Forms with Lovable
-
Use Lovable’s AI form builder to craft intuitive login and sign-up forms.
-
Customize the UI to align with your application’s branding.
Implement Authentication Workflows
-
Set up Supabase Edge Functions to handle tasks like token validation and user sessions.
-
Ensure secure storage of user credentials and manage session persistence.
Enable Email Verification
-
Configure Supabase to send verification emails upon user registration.
-
This adds an extra layer of security by confirming user identities.
Test and Deploy
-
Thoroughly test the authentication flows to ensure seamless user experiences.
-
Once satisfied, deploy your application with confidence.
There are many ways to connect Stripe to Lovable, but the most straight-forward way is to utilize Stripe’s built in payment links. Use this resource to make sure you get this right!
Deploy & Publish your Project
You can check this section of the documentation to ensure all SEO capabilities are properly enabled.
You can add a custom domain using:
-
Entri (native to Lovable)
-
Netlify
-
Vercel
-
Namecheap
You can check this section of the documentation for more information.
When your project is ready, publish it to generate a shareable URL. This makes it easy to showcase your application or share it with collaborators and stakeholders.
You can refer to this section of the documentation for more information.
Lovable Crash Course
Getting started with Lovable 101
By the end, you’ll have a simple application up and running with authentication and CRUD (Create, Read, Update, Delete) functionality for managing notes.
Supabase is an open-source database service built on PostgreSQL. It provides authentication, data storage, and file storage—perfect for our Lovable integration.
Create an Organization & Project
Step 1
Log into Supabase.
Step 2
Create an organization (name it based on your startup or project).
Step 3
Create a new project within that organization.
Note your Supabase URL and API key (you’ll need them later).
Configure Authentication
Step 1
Navigate to Authentication > Sign In/Sign Up.
Step 2
Enable Email authentication.
Step 3
Turn off Confirm Email (since we don’t have an email provider set up yet).
Now, let’s set up a project in Lovable.
Start with a Fresh Blank Project
Step 1
Open Lovable and create a new project.
Step 2
Keep your first prompt simple: “Create a blank project”.
Step 3
Lovable will generate the basic structure for your app.
Connect Supabase to Lovable
Step 1
In Lovable, navigate to the database settings.
Step 2
Enter your Supabase project URL and API key.
Step 3
Click Connect to link your Lovable project to Supabase.
Create a Navigation Bar with a Login Button
Step 1
Add a nav bar at the top of your project.
Step 2
Include a Login button that redirects users to a login page.
Apply SQL Changes for Authentication
Step 1
Lovable will generate SQL for Supabase to handle authentication.
Step 2
Click Apply Changes to execute the SQL commands.
Customize the UI:
Step 1
Open the Edit Tool in Lovable.
Step 2
Click on UI elements (e.g., buttons) to modify styles.
Step 3
Ensure all text is visible (e.g., black text on white backgrounds).
Create a Test Account
Step 1
Use the Sign Up form to create a new user.
Step 2
Verify that login and logout workflows function correctly.
Redirect Users to a Dashboard After Login
Modify the authentication flow to send users to a dashboard after login.
Set Up a Notes Table in Supabase
Step 1
Use Lovable to generate SQL for a Notes table.
Step 2
Ensure it has user ID and content fields.
Step 3
Click Apply Changes to create the table.
Build the Notes UI
Step 1
Add a table to display notes on the dashboard.
Step 2
Include an input field and buttons for CRUD operations.
CRUD create, read, update and delete
Test CRUD Operations
Step 1
Add a new note.
Step 2
Edit an existing note.
Step 3
Delete a note.
Step 4
Verify notes persist in Supabase.
To enable Chat Mode, go to Settings > Accounts Settings tab.
Identify Errors
-
If an issue arises, enable Chat Mode.
-
Lovable will analyze Supabase logs and TypeScript errors.
Apply Fixes
Step 1
Review Lovable’s debugging suggestions.
Step 2
Apply fixes as needed.
You’ve:
-
Set up Supabase and Lovable.
-
Implemented authentication.
-
Built a dashboard with CRUD functionality for notes.
-
Learned how to debug issues effectively.
Building Interactive UIs
In this module, we’ll cover components, reusable UI elements, design improvements, and debugging best practices.
Components in Lovable help organize UI elements into modular and reusable parts. Instead of having all UI elements in a single page (e.g., a 400-line dashboard), we break them into components such as:
-
Sidebar
-
Welcome Card
-
Quote Card
-
Notes Section
This structure improves efficiency when making edits since changes apply only to specific components rather than the entire page.
Creating and Using Components:
Identify Large UI Sections
Look for UI parts that repeat or are too large.
Refactor Into Components
Use Lovable’s chat mode to scan the code and suggest an optimized structure.
Reuse Components
Copy and paste components across pages for consistency.
Modify Individual Components
Instead of modifying the full dashboard, edit smaller components like the Welcome Card.
Run a prompt:
“Update the copy in the Welcome Card to make it more engaging.”
Use Chat Mode for Refactoring
Ask Lovable to refactor large UI sections into smaller components.
Example:
“Refactor the dashboard into smaller, cleaner components.”
- Example: “Refactor the dashboard into smaller, cleaner components.”
If you’re not a designer, leveraging pre-built styles can improve your app’s appearance.
Using 21st.dev for UI Inspiration
Step 1
Visit 21st.dev to explore pre-built UI components.
Step 2
Choose a design, copy its prompt for Lovable, and integrate it into your project.
Creating Global Styles
Step 1
Modify an element on the project
for eg: “Set a button as Rainbow Button”.
Step 2
Add this system prompt in the project settings’ knowledge to ensure all new buttons follow this style:
“When creating components, make sure to always use our global rainbow button”.
Step 3
Everytime you add a button, this pre-set style will be respected.
To update the dashboard layout:
Step 1
Find a design you like (e.g., on Dribbble).
Step 2
Screenshot the relevant section and upload it to Lovable.
Step 3
Provide clear instructions, such as:
“Refactor the dashboard layout based on this design.”
“Place notes in a left-hand sidebar, and open them in a side-by-side editable view.”
Enable Real-Time Sync for Notes
Step 1
Run a prompt
“Enable real-time updates for notes so that changes reflect instantly.”
Step 2
Ensure data updates in both the sidebar and editing panel.
Debugging UI Issues
Use chat mode to scan the implementation and fix missing updates.
Example:
“When editing the title in the side-by-side view, it doesn’t save. Fix this issue.”
Use Mobbin for Real-World UI Examples
Search for “note-taking UI” to see how popular apps design their interfaces.
Example:
A clean, minimalistic note editor with large titles and a dropdown for tags.
Applying UI Improvements
Step 1
Ensure the title is large and prominent.
Step 2
Add tags via a dropdown, similar to the reference UI.
Example prompt:
“Redesign the note editor to match this screenshot. Use a large title, white space for content, and dropdown-based tags.”
Fix UI Bugs
Ensure all UI elements update correctly when modified.
Run a prompt:
“Fix the issue where note tags don’t save after editing.”
Optimize Button Styling
Adjust button and input styling to match the intended design.
Example:
“Ensure all buttons use the global Rainbow Button style.”
By the end of this module, you should have:
-
Refactored large UI sections into reusable components.
-
Implemented a polished note-taking dashboard.
-
Used real-time updates for better user experience.
-
Refined the design using external inspirations and best practices.
What's next?
If you enjoyed the first two modules, continue your crash course with Harry here! In the next lessons, you’ll explore:
-
Bonus: P5.js effects & Admin Roles
-
Advanced User Roles & RLS
-
Connecting to APIs & AI
-
Setting Up Stripe Payments
-
Advanced Features
-
Launch on Product Hunt
Was this page helpful?