How to Build Your First App with Lovable

Lovable turns a plain-English description into a real React app, complete with pages, styling, and a backend if you ask for one. You never touch the code unless you want to. This guide walks you through creating your first project, refining it with follow-up prompts, and putting it online so other people can use it.

What you need

• A free Lovable account at lovable.dev
• A clear idea of one small app to build (a to-do list, a habit tracker, a landing page)
• A modern browser, no install required
• About 15 minutes for the first build

Step 1: Create a new project from a prompt

On the Lovable dashboard, find the prompt box and describe what you want in one or two sentences. Be specific about the kind of app and the main feature, but do not try to describe every detail yet. Lovable scaffolds a first version, then you refine.

Step 2: Watch the first build and open the preview

Lovable streams the files it writes and shows a live preview pane on the right. Once the build finishes, click around the preview to see what it made. The chat on the left is your control panel for every change from here on.

Step 3: Refine with follow-up prompts

Change one thing at a time. Small, focused requests give cleaner results than a giant paragraph of edits. Type your change in the chat and Lovable updates only the relevant parts.

Make the streak counter turn green once it passes 7 days.

Add a dark mode toggle in the top right corner.

Move the 'Add habit' button to the top of the list.

Step 4: Add a backend so data persists

By default your data may live only in the browser. To save habits permanently, ask Lovable to connect Supabase, its built-in backend. It will prompt you to link a Supabase project, then wire up the tables and queries for you.

Connect Supabase and store habits and their daily check-ins in the database so they persist between visits.

Step 5: Publish to a live URL

Click Publish in the top right. Lovable deploys your app and gives you a public URL on a lovable subdomain. You can later attach your own custom domain from the project settings.

Result

You now have a working habit tracker with a database and a shareable link, built entirely from chat. Send the URL to a friend, keep refining it with new prompts, or export the code to GitHub when you want to take it further.