[V0_FILE]typescript:file="lib/db.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { Pool } from "@neondatabase/serverless" // Create a connection pool to Neon export const pool = new Pool({ connectionString: process.env.DATABASE_URL, }) // Helper function to handle database errors export function handleDbError(error: any, operation: string) { console.error(`Error during ${operation}:`, error) return { error: `Failed to ${operation}` } } export async function initializeDatabase() { // Placeholder for database initialization logic // In a real application, this function might contain code to: // 1. Check if the database exists. // 2. Create the database if it doesn't exist. // 3. Run database migrations. // 4. Seed the database with initial data. console.log("Database initialized (placeholder)") } [V0_FILE]css:file="app/globals.css" isMerged="true" @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% 20%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --accent: 0 0% 96%; --accent-foreground: 0 0% 20%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 0 0% 0%; --radius: 0.5rem; } .dark { --background: 0 0% 10%; --foreground: 0 0% 98%; --card: 0 0% 10%; --card-foreground: 0 0% 98%; --popover: 0 0% 10%; --popover-foreground: 0 0% 98%; --primary: 0 0% 100%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 15%; --muted-foreground: 0 0% 65%; --accent: 0 0% 15%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 0 0% 100%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-RUPRQOBYqjbYK1tn8EZMLP59JvuOcf.ico" isMerged="true" [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="app/api/status/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { // Check if DATABASE_URL is missing or empty const demoMode = !process.env.DATABASE_URL || process.env.DATABASE_URL.trim() === "" return NextResponse.json({ demoMode, timestamp: new Date().toISOString(), }) } [V0_FILE]xml:file="public/neon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/neon-0H7uSCA5iOLxBekiTuHn3hHzVyvVJX.svg" isMerged="true" [V0_FILE]typescript:file="actions/toggle-todo.ts" isEdit="true" isMerged="true" "use server" import { pool, handleDbError } from "@/lib/db" import { revalidatePath } from "next/cache" export async function toggleTodo(id: number) { // Check if we're in demo mode (no DATABASE_URL) const isDemoMode = !process.env.DATABASE_URL || process.env.DATABASE_URL.trim() === "" // In demo mode, just return success (the UI will handle it) if (isDemoMode) { return { success: true } } try { await pool.query("UPDATE todos SET completed = NOT completed WHERE id = $1", [id]) revalidatePath("/") return { success: true } } catch (error) { return handleDbError(error, "toggle todo") } } [V0_FILE]typescript:file="actions/delete-todo.ts" isEdit="true" isMerged="true" "use server" import { pool, handleDbError } from "@/lib/db" import { revalidatePath } from "next/cache" export async function deleteTodo(id: number) { // Check if we're in demo mode (no DATABASE_URL) const isDemoMode = !process.env.DATABASE_URL || process.env.DATABASE_URL.trim() === "" // In demo mode, just return success (the UI will handle it) if (isDemoMode) { return { success: true } } try { await pool.query("DELETE FROM todos WHERE id = $1", [id]) revalidatePath("/") return { success: true } } catch (error) { return handleDbError(error, "delete todo") } } [V0_FILE]typescriptreact:file="components/demo-banner.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" export function DemoBanner() { const [showBanner, setShowBanner] = useState(false) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const checkStatus = async () => { try { const response = await fetch("/api/status") const data = await response.json() setShowBanner(data.demoMode) } catch (error) { // If the request fails, assume we're in demo mode setShowBanner(true) } finally { setIsLoading(false) } } checkStatus() }, []) // Don't show anything while loading to avoid flash of content if (isLoading) return null // Don't show if not in demo mode if (!showBanner) return null return (

Demo Mode: Connect to Neon integration to get started

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const geist = Geist({ subsets: ["latin"], }) export const metadata: Metadata = { title: "Todo App - Powered by Neon", description: "A simple todo application built with Next.js and Neon Postgres", icons: { icon: "/favicon.ico", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/types.ts" isMoved="true" isMovedFrom="actions/types.ts" isEdit="true" isMerged="true" export type Todo = { id: number text: string completed: boolean created_at: string } [V0_FILE]typescriptreact:file="actions/add-todo.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { pool } from "@/lib/db" import { revalidatePath } from "next/cache" import type { Todo } from "@/lib/types" export async function addTodo(formData: FormData) { const text = formData.get("text") as string if (!text || text.trim() === "") { return { error: "Todo text cannot be empty" } } // Check if we're in demo mode (no DATABASE_URL) const isDemoMode = !process.env.DATABASE_URL || process.env.DATABASE_URL.trim() === "" // In demo mode, create a demo todo if (isDemoMode) { const newTodo: Todo = { id: Date.now(), // Use timestamp as ID in demo mode text: text.trim(), completed: false, created_at: new Date().toISOString(), } return newTodo } try { // Insert the todo and return the created todo const result = await pool.query("INSERT INTO todos (text) VALUES ($1) RETURNING *", [text.trim()]) revalidatePath("/") // Ensure we return a properly formatted Todo object const newTodo: Todo = { id: result.rows[0].id, text: result.rows[0].text, completed: result.rows[0].completed, created_at: result.rows[0].created_at, } return newTodo } catch (error) { console.error("Error adding todo:", error) return { error: `Failed to add todo: ${error}` } } } [V0_FILE]typescriptreact:file="components/todo-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import type { Todo } from "@/lib/types" import { addTodo } from "@/actions/add-todo" import { toggleTodo } from "@/actions/toggle-todo" import { deleteTodo } from "@/actions/delete-todo" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Trash, Loader2, Plus } from "lucide-react" export default function TodoList({ initialTodos }: { initialTodos: Todo[] }) { const [todos, setTodos] = useState(initialTodos) const [newTodo, setNewTodo] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [pendingTodos, setPendingTodos] = useState>({}) const handleAddTodo = async (e: React.FormEvent) => { e.preventDefault() if (!newTodo.trim()) return // Create a temporary ID for the optimistic todo const tempId = `temp-${Date.now()}` // Create optimistic todo const optimisticTodo: Todo & { tempId?: string } = { id: -1, // Placeholder ID that won't be used for server operations text: newTodo, completed: false, created_at: new Date().toISOString(), tempId, // Store the temporary ID to identify this todo later } // Add optimistic todo to the list setTodos((prev) => [optimisticTodo, ...prev]) setNewTodo("") setPendingTodos((prev) => ({ ...prev, [tempId]: "add" })) try { // Create FormData for the server action const formData = new FormData() formData.append("text", newTodo) // Actual server request const result = await addTodo(formData) // Check if the result is a valid todo if (result && "id" in result) { // Replace the optimistic todo with the real one from the server setTodos((prev) => prev.map((todo) => // Use the tempId to identify the optimistic todo "tempId" in todo && todo.tempId === tempId ? result : todo, ), ) } else { // If we didn't get a valid todo back, remove the optimistic one setTodos((prev) => prev.filter((todo) => !("tempId" in todo && todo.tempId === tempId))) } } catch (error) { console.error("Failed to add todo:", error) // Remove optimistic todo on error setTodos((prev) => prev.filter((todo) => !("tempId" in todo && todo.tempId === tempId))) } finally { setPendingTodos((prev) => { const updated = { ...prev } delete updated[tempId] return updated }) } } const handleToggleTodo = async (id: number) => { // Skip if this is a temporary ID if (id < 0) return // Optimistically update the UI setTodos((prev) => prev.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))) setPendingTodos((prev) => ({ ...prev, [id]: "toggle" })) try { // Actual server request await toggleTodo(id) } catch (error) { console.error("Failed to toggle todo:", error) // Revert on error setTodos((prev) => prev.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))) } finally { setPendingTodos((prev) => { const updated = { ...prev } delete updated[id] return updated }) } } const handleDeleteTodo = async (id: number) => { // Skip if this is a temporary ID if (id < 0) { // For temporary todos, just remove them from the UI setTodos((prev) => prev.filter((todo) => todo.id !== id)) return } // Optimistically remove from UI const todoToDelete = todos.find((todo) => todo.id === id) setTodos((prev) => prev.filter((todo) => todo.id !== id)) setPendingTodos((prev) => ({ ...prev, [id]: "delete" })) try { // Actual server request await deleteTodo(id) } catch (error) { console.error("Failed to delete todo:", error) // Restore on error if (todoToDelete) { setTodos((prev) => [...prev, todoToDelete]) } } finally { setPendingTodos((prev) => { const updated = { ...prev } delete updated[id] return updated }) } } return (

No todos yet. Add one above!
handleToggleTodo(todo.id)} disabled={!!isPending || isTemporaryTodo} /> {todo.text}

) } [V0_FILE]typescriptreact:file="lib/constants.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Todo } from "@/lib/types" export const TODOS_KEY = "todos" export const DEMO_TODOS: Todo[] = [ { id: 1, text: "Learn about Neon Postgres", completed: false, created_at: new Date(Date.now() - 86400000 * 2).toISOString(), // 2 days ago }, { id: 2, text: "Connect Neon integration", completed: false, created_at: new Date(Date.now() - 86400000).toISOString(), // 1 day ago }, { id: 3, text: "Build awesome apps with serverless Postgres", completed: true, created_at: new Date(Date.now()).toISOString(), }, ] [V0_FILE]typescript:file="actions/get-todos.ts" isDeleted="true" isMoved="true" isMovedTo="lib/todos.ts" isFixed="true" isEdit="true" isQuickEdit="true" "use server" // This action has been moved to lib/todos.ts export async function getTodos() { console.warn("getTodos action has been moved to lib/todos.ts") return [] } [V0_FILE]typescript:file="lib/todos.ts" isMoved="true" isMovedFrom="actions/get-todos.ts" import { pool, handleDbError } from "@/lib/db" import type { Todo } from "@/lib/types" import { DEMO_TODOS } from "@/lib/constants" export async function getTodos(): Promise { // Check if we're in demo mode (no DATABASE_URL) const isDemoMode = !process.env.DATABASE_URL || process.env.DATABASE_URL.trim() === "" // Return demo data if in demo mode if (isDemoMode) { return DEMO_TODOS } // Otherwise, fetch from the database try { const result = await pool.query("SELECT * FROM todos ORDER BY created_at DESC") return result.rows } catch (error) { handleDbError(error, "fetch todos") return [] } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import TodoList from "@/components/todo-list" import { DemoBanner } from "@/components/demo-banner" import { getTodos } from "@/lib/todos" import { initializeDatabase } from "@/lib/db" import Image from "next/image" import Link from "next/link" export default async function Home() { // Initialize the database connection await initializeDatabase() // Fetch todos const todos = await getTodos() return (

My Tasks

) }

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This