I'll create a full-stack task management demo app that showcases both frontend and backend capabilities. This will include a modern UI, database integration, and server actions for data persistence.

I've created a comprehensive full-stack task management demo app that showcases modern web development practices. Here's what's included:

Features

• Modern UI: Clean, responsive design with Tailwind CSS and shadcn/ui components
• Server Actions: Next.js server actions for backend operations (add, update, delete tasks)
• Real-time Updates: Optimistic UI updates for smooth user experience
• Task Management: Complete CRUD operations with priority levels and completion status
• Statistics Dashboard: Visual overview of pending and completed tasks
• Database Ready: SQL schema included for easy Supabase integration

Architecture

• Frontend: React Server Components with client-side interactivity where needed
• Backend: Next.js App Router with server actions
• Data Layer: Mock data with easy migration path to real database
• Styling: Tailwind CSS with custom gradients and animations

The app currently uses mock data but includes a SQL script for setting up a real Supabase database. The server actions are structured to easily connect to a database by replacing the mock data operations.

To configure the generation, complete these steps:

Great question! Here are the steps to run your full-stack demo app:

Option 1: Use v0's Built-in Installation (Recommended)

The easiest way is to use v0's built-in installation system:

1. Click "Download Code" button in the top-right corner of the Block view

2. Choose your installation method:

   • New Project: Creates a fresh Next.js project with your code
   • Existing Project: Adds the code to an existing Next.js project
3. Follow the shadcn CLI prompts that will handle the setup automatically

Option 2: Manual Setup

If you prefer to set it up manually:

1. Create a new Next.js project

2. Install shadcn/ui

3. Install required shadcn components

4. Copy the code files

Copy all the files from the code project into your project structure:

• app/page.tsx
• components/add-task-form.tsx
• components/task-list.tsx
• lib/actions.ts

5. Run the development server

6. Open your browser

Navigate to http://localhost:3000 to see your app!

What You'll See

• A beautiful task management interface
• Ability to add, complete, and delete tasks
• Task statistics showing pending/completed counts
• Priority levels (low, medium, high) with color coding
• Responsive design that works on mobile and desktop

Next Steps

The app currently uses mock data. To make it production-ready:

1. Add a real database (Supabase recommended)
2. Run the SQL script provided in scripts/setup-database.sql
3. Update the actions to use real database queries instead of mock data

Would you like me to help you set up Supabase integration or any other features?