How to Build Productivity app with V0

1// Paste this prompt into V0's AI chat:
2// Build a productivity workspace app. Set up Clerk auth and create a Supabase schema with:
3// 1. tasks: id (uuid PK), user_id (uuid FK), title (text), description (text), status (text check todo/in_progress/done), priority (text check low/medium/high/urgent), due_date (date), completed_at (timestamptz), created_at (timestamptz)
4// 2. notes: id (uuid PK), user_id (uuid FK), title (text), content (text), tags (text[]), is_pinned (boolean default false), created_at (timestamptz), updated_at (timestamptz)
5// 3. time_entries: id (uuid PK), user_id (uuid FK), task_id (uuid FK nullable), duration_minutes (integer), started_at (timestamptz), ended_at (timestamptz)
6// 4. daily_plans: id (uuid PK), user_id (uuid FK), plan_date (date unique per user), goals (jsonb), reflection (text), created_at (timestamptz)
7// Add RLS so users only see their own data.
8// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a productivity dashboard at app/page.tsx.
3// Requirements:
4// - Protected by Clerk auth (redirect to sign-in if not authenticated)
5// - Three-column layout on desktop, stacked on mobile:
6//   - Left: Today's tasks (due_date = today OR status = in_progress), each in a shadcn/ui Card with Checkbox for completion, Badge for priority (urgent=red, high=orange, medium=blue, low=gray)
7//   - Center: Pomodoro timer showing a circular Progress indicator, 25-minute countdown, Start/Pause/Reset Buttons, session count for the day from time_entries
8//   - Right: Pinned notes (is_pinned = true) in compact Cards with title and first 100 chars
9// - Quick-add task Dialog triggered by a floating "+" Button
10// - shadcn/ui Command (Cmd+K) for global search across tasks and notes
11// - Use Server Components for data fetching, 'use client' for timer and interactive elements
12// - Server Actions: createTask(), toggleTaskComplete(), logTimeEntry()

1'use client'
2
3import { useOptimistic, useTransition } from 'react'
4import { Card } from '@/components/ui/card'
5import { Badge } from '@/components/ui/badge'
6import { Checkbox } from '@/components/ui/checkbox'
7import { updateTaskStatus } from '@/app/actions/tasks'
8
9interface Task {
10  id: string
11  title: string
12  status: 'todo' | 'in_progress' | 'done'
13  priority: 'low' | 'medium' | 'high' | 'urgent'
14  due_date: string | null
15}
16
17const columns = ['todo', 'in_progress', 'done'] as const
18const priorityColors = {
19  urgent: 'destructive',
20  high: 'default',
21  medium: 'secondary',
22  low: 'outline',
23} as const
24
25export function KanbanBoard({ tasks }: { tasks: Task[] }) {
26  const [isPending, startTransition] = useTransition()
27  const [optimisticTasks, setOptimisticTasks] = useOptimistic(
28    tasks,
29    (state, update: { id: string; status: string }) =>
30      state.map((t) => (t.id === update.id ? { ...t, status: update.status as Task['status'] } : t))
31  )
32
33  function handleDrop(taskId: string, newStatus: string) {
34    startTransition(async () => {
35      setOptimisticTasks({ id: taskId, status: newStatus })
36      await updateTaskStatus(taskId, newStatus)
37    })
38  }
39
40  return (
41    <div className="grid grid-cols-3 gap-4">
42      {columns.map((col) => (
43        <div
44          key={col}
45          className="bg-muted/50 rounded-lg p-4 min-h-[400px]"
46          onDragOver={(e) => e.preventDefault()}
47          onDrop={(e) => handleDrop(e.dataTransfer.getData('taskId'), col)}
48        >
49          <h3 className="font-semibold mb-3 capitalize">{col.replace('_', ' ')}</h3>
50          {optimisticTasks
51            .filter((t) => t.status === col)
52            .map((task) => (
53              <Card
54                key={task.id}
55                className="p-3 mb-2 cursor-grab"
56                draggable
57                onDragStart={(e) => e.dataTransfer.setData('taskId', task.id)}
58              >
59                <div className="flex items-center gap-2">
60                  <Checkbox />
61                  <span className="text-sm flex-1">{task.title}</span>
62                  <Badge variant={priorityColors[task.priority]}>{task.priority}</Badge>
63                </div>
64              </Card>
65            ))}
66        </div>
67      ))}
68    </div>
69  )
70}

1'use client'
2
3import { useState, useEffect, useCallback } from 'react'
4import { Button } from '@/components/ui/button'
5import { Progress } from '@/components/ui/progress'
6import { Card } from '@/components/ui/card'
7import { logTimeEntry } from '@/app/actions/tasks'
8
9const WORK_MINUTES = 25
10const BREAK_MINUTES = 5
11
12export function PomodoroTimer({ activeTaskId }: { activeTaskId?: string }) {
13  const [seconds, setSeconds] = useState(WORK_MINUTES * 60)
14  const [isRunning, setIsRunning] = useState(false)
15  const [isBreak, setIsBreak] = useState(false)
16  const [sessions, setSessions] = useState(0)
17
18  const totalSeconds = (isBreak ? BREAK_MINUTES : WORK_MINUTES) * 60
19  const progress = ((totalSeconds - seconds) / totalSeconds) * 100
20  const minutes = Math.floor(seconds / 60)
21  const secs = seconds % 60
22
23  const completeSession = useCallback(async () => {
24    if (!isBreak) {
25      setSessions((s) => s + 1)
26      await logTimeEntry(WORK_MINUTES, activeTaskId)
27    }
28    setIsBreak(!isBreak)
29    setSeconds((!isBreak ? BREAK_MINUTES : WORK_MINUTES) * 60)
30    setIsRunning(false)
31  }, [isBreak, activeTaskId])
32
33  useEffect(() => {
34    if (!isRunning) return
35    const interval = setInterval(() => {
36      setSeconds((s) => {
37        if (s <= 1) {
38          completeSession()
39          return 0
40        }
41        return s - 1
42      })
43    }, 1000)
44    return () => clearInterval(interval)
45  }, [isRunning, completeSession])
46
47  return (
48    <Card className="p-6 text-center">
49      <p className="text-sm text-muted-foreground mb-2">
50        {isBreak ? 'Break Time' : 'Focus Time'}
51      </p>
52      <div className="text-4xl font-mono font-bold mb-4">
53        {String(minutes).padStart(2, '0')}:{String(secs).padStart(2, '0')}
54      </div>
55      <Progress value={progress} className="mb-4" />
56      <div className="flex gap-2 justify-center">
57        <Button onClick={() => setIsRunning(!isRunning)}>
58          {isRunning ? 'Pause' : 'Start'}
59        </Button>
60        <Button
61          variant="outline"
62          onClick={() => {
63            setIsRunning(false)
64            setSeconds(WORK_MINUTES * 60)
65            setIsBreak(false)
66          }}
67        >
68          Reset
69        </Button>
70      </div>
71      <p className="text-sm text-muted-foreground mt-3">
72        Sessions today: {sessions}
73      </p>
74    </Card>
75  )
76}

1// Paste this prompt into V0's AI chat:
2// Build two features:
3// 1. Notes page at app/notes/page.tsx:
4//    - Grid of note Cards showing title, first 150 chars of content, tags as Badges, pin icon for is_pinned
5//    - Search Input at top that filters notes by title and content
6//    - "New Note" Button opens a Dialog with Input for title, Textarea for content, ToggleGroup for tags (work/personal/ideas/reference)
7//    - Server Actions: saveNote(), togglePin(), deleteNote()
8// 2. Global search Command component (Cmd+K):
9//    - shadcn/ui Command component with CommandInput, CommandList, CommandGroup
10//    - Two groups: Tasks and Notes
11//    - Search across task titles and note titles/content
12//    - Clicking a result navigates to the task or note
13//    - Add this to the root layout so it's available on every page
14//    - 'use client' component with useEffect for keyboard shortcut listener