Build a Todo App

Todo App Features:
├── User authentication (signup/login)
├── Create, read, update, delete todos
├── Mark todos as complete
├── Filter by status
└── User-specific data (RLS)

Prompt:
"Create a todo app with Next.js, Tailwind, and shadcn/ui.
Include:
- Login/signup pages
- Todo list with add, edit, delete
- Mark complete functionality
- Filter by all/active/completed
Use a clean, minimal design."

# Create Next.js project
npx create-next-app@latest todo-app --typescript --tailwind --eslint

cd todo-app

# Add shadcn/ui
npx shadcn@latest init

# Add components
npx shadcn@latest add button input checkbox card

-- Create todos table
CREATE TABLE todos (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  completed BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Enable RLS
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

-- Users can only see their own todos
CREATE POLICY "Users can view own todos"
ON todos FOR SELECT
TO authenticated
USING (auth.uid() = user_id);

-- Users can create own todos
CREATE POLICY "Users can create own todos"
ON todos FOR INSERT
TO authenticated
WITH CHECK (auth.uid() = user_id);

-- Users can update own todos
CREATE POLICY "Users can update own todos"
ON todos FOR UPDATE
TO authenticated
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);

-- Users can delete own todos
CREATE POLICY "Users can delete own todos"
ON todos FOR DELETE
TO authenticated
USING (auth.uid() = user_id);

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

"Add Supabase authentication to this Next.js app.
Create:
- Login page at /login
- Signup page at /signup
- Auth callback handler
- Protected dashboard route
- Sign out functionality
Use the Supabase client pattern for Next.js App Router."

app/
├── login/
│   └── page.tsx          # Login form
├── signup/
│   └── page.tsx          # Signup form
├── auth/
│   └── callback/
│       └── route.ts      # OAuth callback
├── dashboard/
│   └── page.tsx          # Protected page
lib/
└── supabase/
    ├── client.ts         # Browser client
    └── server.ts         # Server client

"Add todo CRUD operations using Supabase.
Create:
- TodoList component showing all todos
- AddTodo form to create new todo
- TodoItem with edit and delete buttons
- Toggle complete checkbox
- Filter tabs for All/Active/Completed
Fetch todos on dashboard page load.
Use Server Components where possible."

// components/TodoList.tsx
interface Todo {
  id: string
  title: string
  description: string | null
  completed: boolean
  created_at: string
}

export function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <div className="space-y-2">
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  )
}

// components/AddTodo.tsx
'use client'

import { useState } from 'react'
import { createClient } from '@/lib/supabase/client'
import { useRouter } from 'next/navigation'

export function AddTodo() {
  const [title, setTitle] = useState('')
  const router = useRouter()
  const supabase = createClient()

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!title.trim()) return

    const { data: { user } } = await supabase.auth.getUser()

    await supabase.from('todos').insert({
      title,
      user_id: user?.id
    })

    setTitle('')
    router.refresh()
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="What needs to be done?"
        className="flex-1 px-4 py-2 border rounded"
      />
      <button type="submit" className="px-4 py-2 bg-primary text-white rounded">
        Add
      </button>
    </form>
  )
}

// app/dashboard/page.tsx
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { TodoList } from '@/components/TodoList'
import { AddTodo } from '@/components/AddTodo'

export default async function Dashboard() {
  const supabase = await createClient()

  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')

  const { data: todos } = await supabase
    .from('todos')
    .select('*')
    .order('created_at', { ascending: false })

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">My Todos</h1>
      <AddTodo />
      <div className="mt-6">
        <TodoList todos={todos || []} />
      </div>
    </div>
  )
}

"Improve the todo app:
1. Add loading states during operations
2. Add error handling with toast notifications
3. Add empty state when no todos
4. Add keyboard shortcuts (Enter to add)
5. Add optimistic updates for better UX"

npx shadcn@latest add toast

{todos.length === 0 ? (
  <div className="text-center py-12 text-muted-foreground">
    <p>No todos yet.</p>
    <p>Add one above to get started!</p>
  </div>
) : (
  <TodoList todos={todos} />
)}

git init
git add .
git commit -m "Initial todo app"
git remote add origin https://github.com/you/todo-app.git
git push -u origin main

Supabase Dashboard → Authentication → URL Configuration
Site URL: https://your-app.vercel.app
Redirect URLs: https://your-app.vercel.app/auth/callback

npx supabase gen types typescript --project-id xxx > types/supabase.ts