[V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export interface Todo { id: string text: string completed: boolean createdAt: number } [V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-JlkUpY7IRi7zlfoyQaZw27hnmd8zRG.ico" isMerged="true" [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]typescriptreact:file="actions/add-todo.ts" isMerged="true" "use server" import { v4 as uuidv4 } from "uuid" import { getTodos, saveTodos } from "@/lib/todos" import type { Todo } from "@/lib/types" export async function addTodo(text: string): Promise { const todos = await getTodos() const newTodo: Todo = { id: uuidv4(), text, completed: false, createdAt: Date.now(), } await saveTodos([newTodo, ...todos]) return newTodo } [V0_FILE]typescriptreact:file="actions/toggle-todo.ts" isMerged="true" "use server" import { getTodos, saveTodos } from "@/lib/todos" export async function toggleTodo(id: string): Promise { const todos = await getTodos() const updatedTodos = todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)) await saveTodos(updatedTodos) } [V0_FILE]typescriptreact:file="actions/delete-todo.ts" isMerged="true" "use server" import { getTodos, saveTodos } from "@/lib/todos" export async function deleteTodo(id: string): Promise { const todos = await getTodos() const updatedTodos = todos.filter((todo) => todo.id !== id) await saveTodos(updatedTodos) } [V0_FILE]xml:file="public/upstash.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/upstash-yimA2jRrQIpEvLwWMN9uBdNfubQ25V.svg" 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]css:file="app/globals.css" isEdit="true" 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]typescriptreact:file="lib/constants.ts" isMerged="true" import type { Todo } from "./types" export const TODOS_KEY = "todos" export const DEMO_TODOS: Todo[] = [ { id: "demo-1", text: "Learn about Upstash Redis", completed: false, createdAt: Date.now() - 86400000 * 2, // 2 days ago }, { id: "demo-2", text: "Connect Upstash integration", completed: false, createdAt: Date.now() - 86400000, // 1 day ago }, { id: "demo-3", text: "Build awesome apps with serverless data", completed: false, createdAt: Date.now(), }, ] [V0_FILE]typescriptreact:file="app/api/status/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { kv } from "@vercel/kv" export async function GET() { // Check if the required environment variables exist const hasRequiredEnvVars = process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN if (!hasRequiredEnvVars) { return NextResponse.json({ status: "disconnected", demoMode: true, }) } try { // Only try to connect if we have the env vars await kv.ping() return NextResponse.json({ status: "connected", demoMode: false, }) } catch (error) { return NextResponse.json({ status: "disconnected", demoMode: true, }) } } [V0_FILE]typescriptreact:file="lib/todos.ts" isEdit="true" isMerged="true" import { kv } from "@vercel/kv" import type { Todo } from "./types" import { TODOS_KEY, DEMO_TODOS } from "./constants" // Helper function to check if we're in demo mode function isInDemoMode(): boolean { return !(process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) } export async function getTodos(): Promise { // If we're in demo mode, return demo todos immediately without trying KV if (isInDemoMode()) { return [...DEMO_TODOS] } try { // Only try to get todos from Upstash KV if we're not in demo mode const todos = await kv.get(TODOS_KEY) // If we get a response (even empty array), return it sorted if (todos !== null && todos !== undefined) { return todos.sort((a, b) => b.createdAt - a.createdAt) } // If we get null/undefined (first time use), return an empty array return [] } catch (error) { console.error("Failed to fetch todos:", error) // Return an empty array on error return [] } } export async function saveTodos(todos: Todo[]): Promise { // If we're in demo mode, don't try to save to KV if (isInDemoMode()) { console.log("Running in demo mode, changes won't persist") return } try { await kv.set(TODOS_KEY, todos) } catch (error) { console.error("Failed to save todos:", error) throw new Error("Failed to save todos") } } [V0_FILE]typescriptreact:file="app/layout.tsx" 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 Upstash", description: "A simple todo application built with Next.js and Upstash Redis", icons: { icon: "/favicon.ico", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [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 Upstash integration to get started

) } [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 Image from "next/image" import Link from "next/link" export default async function Home() { const todos = await getTodos() return (

My Tasks

) } [V0_FILE]typescriptreact:file="components/todo-list.tsx" isEdit="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 optimistic todo const optimisticTodo: Todo = { id: `optimistic-${Date.now()}`, text: newTodo, completed: false, createdAt: Date.now(), } // Add optimistic todo to the list setTodos((prev) => [optimisticTodo, ...prev]) setNewTodo("") setPendingTodos((prev) => ({ ...prev, [optimisticTodo.id]: "add" })) try { // Actual server request const actualTodo = await addTodo(newTodo) // Replace optimistic todo with actual todo setTodos((prev) => prev.map((todo) => (todo.id === optimisticTodo.id ? actualTodo : todo))) } catch (error) { console.error("Failed to add todo:", error) // Remove optimistic todo on error setTodos((prev) => prev.filter((todo) => todo.id !== optimisticTodo.id)) } finally { setPendingTodos((prev) => { const updated = { ...prev } delete updated[optimisticTodo.id] return updated }) } } const handleToggleTodo = async (id: string) => { // 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: string) => { // 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} /> {todo.text}

) }

About

About