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:
- 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.
