Your First App with Lovable — Zero to Live in 30 Minutes

What You'll Build

A task management app with:
• User accounts (sign up, log in)
• Create, edit, and delete tasks
• Mark tasks complete
• Data that persists (doesn't disappear on refresh)
• Live on the internet with a real URL

Tool: Lovable (no code needed) Time: ~30 minutes Cost: $0 (free tier) Coding required: None

Step 1: Create Your Lovable Account (2 minutes)

Go to lovable.dev and sign up with email or Google. The free tier gives you 30 credits — enough to build your first app.

Step 2: Write Your First Prompt (3 minutes)

Click "New Project" and paste this exact prompt:

Build a task management app with these features:

AUTHENTICATION:
- Email/password signup and login
- Redirect to /login if not authenticated
- Show user email in the top right navbar
- Logout button

TASK MANAGEMENT:
- Create tasks with a title and optional description
- Mark tasks as complete (checkbox)
- Edit task title inline
- Delete tasks with confirmation
- Show task count: "3 of 7 tasks complete"
- Sort: incomplete tasks first, then completed (grayed out)

DATA:
- Save all tasks to Supabase so they persist between sessions
- Each user can only see their own tasks (Row Level Security)

DESIGN:
- Clean, minimal design inspired by Apple's Reminders app
- White background, subtle shadows, rounded corners
- Mobile responsive
- Empty state: "No tasks yet. Add your first one above."

Connect to Supabase for database and auth.

Click Generate. Wait 30-60 seconds while Lovable builds your app.

Step 3: Connect Supabase (5 minutes)

When Lovable finishes generating, click the Supabase icon in the top toolbar.

If you don't have a Supabase account:
• Click "Create Supabase account"
• Sign up at supabase.com (free)
• Create a new project
• Come back to Lovable and connect

If you already have one:
• Click "Connect existing project"
• Select your project
• Lovable creates the database tables automatically

Verify it worked: Sign up in the app preview, create a task, refresh the page. If the task is still there, Supabase is connected.

Step 4: Test Everything (5 minutes)

In Lovable's preview pane, test these flows:

☐Sign up with a new email

☐Log in with that email

☐Create 3 tasks

☐Mark one as complete

☐Edit a task title

☐Delete a task

☐Refresh the page — tasks should still be there

☐Open on mobile view — layout should be responsive

If something doesn't work, tell Lovable in the chat:
• "The tasks disappear on refresh" → Supabase connection issue
• "Login isn't working" → Auth configuration issue
• "Mobile layout is broken" → Ask to "fix mobile responsive layout"

Step 5: Make It Yours (5 minutes)

Now customize it. Paste prompts like:

Change the design:

Change the color scheme to dark blue (#1a1a2e) header with white text. Make the task cards have a subtle blue border on hover.

Add a feature:

Add due dates to tasks. Show a date picker when creating a task. Highlight overdue tasks in red.

Add categories:

Add task categories: Work, Personal, Ideas. Show a filter bar at the top to view by category. Color-code each category.

Each prompt costs 1 credit. You have 30 free ones.

Step 6: Deploy (3 minutes)

Click the Deploy button in Lovable. Your app is now live on a Lovable subdomain (something like my-app.lovable.app).

Share the URL with anyone — they can sign up and use it immediately.

Want a custom domain? Go to your deployment settings and add your domain. You'll need to update DNS records at your domain registrar.

Step 7: Push to GitHub (2 minutes)

Click the GitHub icon in Lovable → "Push to GitHub."

This creates a real code repository that you own. Benefits:
• Version control (undo any change)
• Backup of your entire codebase
• Other developers can continue building on it
• Deploy to other platforms (Vercel, Railway)

What You Just Built

In 30 minutes, with zero coding:
• A real web app with user accounts
• Data stored in a production PostgreSQL database
• Row Level Security (users can't see each other's data)
• Mobile responsive design
• Deployed and accessible from any device

Going Further

Your task app is a starting point. From here you can build:
• A project management tool (add teams, assignments, deadlines)
• A CRM (replace "tasks" with "contacts" and "deals")
• A habit tracker (add streaks, daily goals, charts)
• A note-taking app (replace tasks with rich-text notes)

The architecture is the same — Lovable + Supabase handles it all.

Next Steps

Add Stripe payments to charge for premium features

Read the security guide before going live with real users

Compare Lovable with Cursor if you want more control

Browse the prompt library for more Lovable prompt patterns