[V0_FILE]typescriptreact:file="db/schema.ts" isMoved="true" isMovedFrom="src/db/schema.ts" import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core" import { sql } from "drizzle-orm" export const todos = sqliteTable("todos", { id: integer("id").primaryKey({ autoIncrement: true }), title: text("title").notNull(), description: text("description"), completed: integer("completed", { mode: "boolean" }).notNull().default(false), createdAt: text("created_at").notNull().default(sql`(datetime('now'))`), updatedAt: text("updated_at").notNull().default(sql`(datetime('now'))`), }) export type Todo = typeof todos.$inferSelect export type NewTodo = typeof todos.$inferInsert [V0_FILE]typescript:file="drizzle.config.ts" import { defineConfig } from "drizzle-kit" export default defineConfig({ out: "./drizzle", schema: "./db/schema.ts", // Changed dialect to 'turso' for Turso database dialect: "turso", dbCredentials: { // Updated to use Turso environment variables url: process.env.TURSO_DATABASE_URL!, authToken: process.env.TURSO_AUTH_TOKEN!, }, }) [V0_FILE]typescriptreact:file="lib/actions.ts" isQuickEdit="true" "use server" import { db } from "@/db" import { todos, type NewTodo } from "@/db/schema" import { eq } from "drizzle-orm" import { revalidatePath } from "next/cache" export async function getTodos() { // ADDED .all() so the query is actually executed return await db.select().from(todos).orderBy(todos.createdAt).all() } export async function createTodo(data: { title: string; description?: string }) { const newTodo: NewTodo = { title: data.title, description: data.description || null, } await db.insert(todos).values(newTodo) revalidatePath("/") } export async function toggleTodo(id: number) { const todo = await db.select().from(todos).where(eq(todos.id, id)).get() if (todo) { await db .update(todos) .set({ completed: !todo.completed, updatedAt: new Date().toISOString(), }) .where(eq(todos.id, id)) } revalidatePath("/") } export async function deleteTodo(id: number) { await db.delete(todos).where(eq(todos.id, id)) revalidatePath("/") } export async function updateTodo(id: number, data: { title: string; description?: string }) { await db .update(todos) .set({ title: data.title, description: data.description || null, updatedAt: new Date().toISOString(), }) .where(eq(todos.id, id)) revalidatePath("/") } [V0_FILE]javascript:file="scripts/001-create-todos-table.js" isQuickEdit="true" import { createClient } from "@libsql/client" async function initializeDatabase() { // Create independent Turso client const client = createClient({ url: process.env.TURSO_DATABASE_URL, authToken: process.env.TURSO_AUTH_TOKEN, }) try { console.log("🚀 Initializing Turso database...") // Create todos table console.log("📝 Creating todos table...") await client.execute(` CREATE TABLE IF NOT EXISTS todos ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT, completed INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL DEFAULT (datetime('now')), updated_at TEXT NOT NULL DEFAULT (datetime('now')) ) `) // Create index for completed status console.log("📊 Creating index for completed status...") await client.execute(` CREATE INDEX IF NOT EXISTS idx_todos_completed ON todos(completed) `) // Create index for created_at ordering console.log("📊 Creating index for created_at...") await client.execute(` CREATE INDEX IF NOT EXISTS idx_todos_created_at ON todos(created_at) `) // Insert sample todos individually console.log("📋 Inserting sample todos...") await client.execute({ sql: `INSERT OR IGNORE INTO todos (id, title, description, completed) VALUES (?, ?, ?, ?)`, args: [1, "Set up Turso Database", "Configure Turso with Drizzle ORM for the todo app", 1], }) await client.execute({ sql: `INSERT OR IGNORE INTO todos (id, title, description, completed) VALUES (?, ?, ?, ?)`, args: [2, "Build todo interface", "Create a modern React interface for managing todos", 0], }) await client.execute({ sql: `INSERT OR IGNORE INTO todos (id, title, description, completed) VALUES (?, ?, ?, ?)`, args: [3, "Add dark mode styling", "Implement dark theme similar to Vercel docs", 0], }) await client.execute({ sql: `INSERT OR IGNORE INTO todos (id, title, description, completed) VALUES (?, ?, ?, ?)`, args: [4, "Deploy to Vercel", "Deploy the completed todo app to Vercel platform", 0], }) console.log("✅ Database initialization completed successfully!") // Verify the setup by counting todos const result = await client.execute("SELECT COUNT(*) as count FROM todos") console.log(`📊 Total todos in database: ${result.rows[0]?.count || 0}`) } catch (error) { console.error("❌ Error initializing database:", error) throw error } finally { // Close the client connection client.close() } } // Run the initialization initializeDatabase() .then(() => { console.log("🎉 Setup complete!") process.exit(0) }) .catch((error) => { console.error("💥 Setup failed:", error) process.exit(1) }) [V0_FILE]typescript:file="db/index.ts" import { drizzle } from "drizzle-orm/libsql" import { createClient } from "@libsql/client" // Updated to use Turso environment variables const client = createClient({ url: process.env.TURSO_DATABASE_URL!, authToken: process.env.TURSO_AUTH_TOKEN!, }) export const db = drizzle({ client }) // Removed rawClient export since script is now independent [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 0%; --card: 0 0% 100%; --card-foreground: 0 0% 0%; --popover: 0 0% 100%; --popover-foreground: 0 0% 0%; --primary: 0 0% 0%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 0%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --accent: 0 0% 96%; --accent-foreground: 0 0% 0%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --border: 0 0% 90%; --input: 0 0% 96%; --ring: 0 0% 0%; --radius: 0.25rem; } } @layer base { * { @apply border-border; } body { @apply bg-white text-black font-mono; } } [V0_FILE]typescriptreact:file="components/todo-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { createTodo } from "@/lib/actions" export function TodoForm() { const [title, setTitle] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!title.trim()) return setIsSubmitting(true) try { await createTodo({ title: title.trim() }) setTitle("") } finally { setIsSubmitting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/todo-item.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toggleTodo, deleteTodo, updateTodo } from "@/lib/actions" import type { Todo } from "@/db/schema" interface TodoItemProps { todo: Todo } export function TodoItem({ todo }: TodoItemProps) { const [isEditing, setIsEditing] = useState(false) const [title, setTitle] = useState(todo.title) const [isSubmitting, setIsSubmitting] = useState(false) const handleToggle = async () => { setIsSubmitting(true) try { await toggleTodo(todo.id) } finally { setIsSubmitting(false) } } const handleDelete = async () => { setIsSubmitting(true) try { await deleteTodo(todo.id) } finally { setIsSubmitting(false) } } const handleSave = async () => { if (!title.trim()) return setIsSubmitting(true) try { await updateTodo(todo.id, { title: title.trim() }) setIsEditing(false) } finally { setIsSubmitting(false) } } const handleCancel = () => { setTitle(todo.title) setIsEditing(false) } return (

{/* Toggle button */} {/* Content */}

{isEditing ? (

setTitle(e.target.value)} className="flex-1 border-gray-200 bg-white text-black text-sm h-8" disabled={isSubmitting} onKeyDown={(e) => { if (e.key === "Enter") handleSave() if (e.key === "Escape") handleCancel() }} autoFocus />

) : ( setIsEditing(true)} > {todo.title} )}

{/* Actions */} {!isEditing && (

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import { getTodos } from "@/lib/actions" import { TodoForm } from "@/components/todo-form" import { TodoItem } from "@/components/todo-item" export default async function HomePage() { const todos = await getTodos() const completed = todos.filter((todo) => todo.completed).length return (

{/* Minimal header */}

Todo

{completed}/{todos.length} completed

{/* Add todo form */}

{/* Todo list */}

{todos.length === 0 ? (

No todos

) : ( todos.map((todo) => ) )}

{/* Added minimal footer credit */}

) }