Building the MVP

Start with the UI

Begin by building the user interface without any database connections. This is called "static" or "hardcoded" UI.

Why start here? It lets you see results immediately. You can adjust the design before adding complexity.

Create a TaskList component for my task manager app.

It should display:
- A list of tasks with title, due date, and checkbox
- An "Add task" button at the top
- Empty state when there are no tasks

Use Tailwind CSS for styling. Use these hardcoded tasks for now:

const tasks = [
  { id: 1, title: 'Buy groceries', dueDate: '2024-01-15', complete: false },
  { id: 2, title: 'Call mom', dueDate: '2024-01-14', complete: true },
]

Connect to the database

Once the UI looks good, replace hardcoded data with real database queries.

// Ask AI: "Update TaskList to fetch tasks from Supabase"

'use client'
import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'

export function TaskList() {
  const [tasks, setTasks] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchTasks() {
      const { data, error } = await supabase
        .from('tasks')
        .select('*')
        .order('created_at', { ascending: false })

      if (data) setTasks(data)
      setLoading(false)
    }
    fetchTasks()
  }, [])

  // ... rest of component
}

Add user actions

Next, let users create, update, and delete data. Ask AI to add these features one at a time:

1. Create: "Add a form to create new tasks"
2. Update: "Make the checkbox toggle task completion in the database"
3. Delete: "Add a delete button that removes the task"

Add authentication

Most apps need user accounts. Supabase makes this straightforward.

Ask AI: "Add email/password authentication using Supabase Auth.
I need:
- A login page at /login
- A signup page at /signup
- Protected routes that redirect to login if not authenticated
- A logout button in the header"

Supabase handles password hashing, sessions, and security. You just need to build the forms and connect them.

Common patterns

Loading states

Always show loading indicators while fetching data. Ask AI: "Add a loading spinner while tasks are being fetched"

Error handling

Handle errors gracefully. Ask AI: "Add error handling that shows a message if the database query fails"

Optimistic updates

Update the UI immediately, then sync with database. Ask AI: "Make the checkbox update instantly, then sync to Supabase in the background"

Form validation

Validate user input before saving. Ask AI: "Add validation to the task form - title is required, due date must be in the future"

Building workflow

Follow this pattern for each feature:

1. Describe: Tell AI what you want to build
2. Generate: Let AI create the code
3. Test: Try it in the browser
4. Refine: Ask for changes if needed
5. Commit: Save your progress with git

Commit often. This lets you undo changes if something breaks.

Checklist