How to Build Recipe app with V0

1// Paste this prompt into V0's AI chat:
2// Build a recipe app. Create a Supabase schema with:
3// 1. recipes: id (uuid PK), author_id (uuid FK), title (text), description (text), image_url (text), prep_time_minutes (integer), cook_time_minutes (integer), servings (integer), difficulty (text check easy/medium/hard), cuisine (text), is_published (boolean default false), created_at (timestamptz)
4// 2. ingredients: id (uuid PK), recipe_id (uuid FK), name (text), amount (numeric), unit (text), position (integer)
5// 3. instructions: id (uuid PK), recipe_id (uuid FK), step_number (integer), description (text), image_url (text nullable)
6// 4. tags: id (uuid PK), name (text unique)
7// 5. recipe_tags: recipe_id (uuid FK), tag_id (uuid FK), primary key (recipe_id, tag_id)
8// 6. favorites: id (uuid PK), user_id (uuid FK), recipe_id (uuid FK), created_at (timestamptz) with unique constraint on (user_id, recipe_id)
9// RLS: anyone can SELECT published recipes, only authors can INSERT/UPDATE their own.
10// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a recipe feed at app/page.tsx.
3// Requirements:
4// - Top section: Input for search by recipe title, ToggleGroup for cuisine filters (All, Italian, Mexican, Asian, American, Indian, Other)
5// - Grid of recipe Cards (3 columns desktop, 2 tablet, 1 mobile)
6// - Each Card shows:
7//   - Recipe image (Skeleton while loading)
8//   - Title text
9//   - Prep + cook time as "45 min total"
10//   - difficulty Badge (easy=green, medium=yellow, hard=red)
11//   - Cuisine tag as Badge
12//   - Avatar for recipe author
13// - Cards link to /recipes/[id]
14// - Search filters update URL searchParams for shareable URLs
15// - Server Components for data fetching from Supabase
16// - Fetch published recipes ordered by created_at descending

1'use client'
2
3import { useState } from 'react'
4import { Slider } from '@/components/ui/slider'
5import { Card } from '@/components/ui/card'
6import { Separator } from '@/components/ui/separator'
7
8interface Ingredient {
9  name: string
10  amount: number
11  unit: string
12}
13
14export function IngredientScaler({
15  ingredients,
16  baseServings,
17}: {
18  ingredients: Ingredient[]
19  baseServings: number
20}) {
21  const [servings, setServings] = useState(baseServings)
22  const ratio = servings / baseServings
23
24  return (
25    <Card className="p-6">
26      <div className="flex items-center justify-between mb-4">
27        <h3 className="text-lg font-semibold">Ingredients</h3>
28        <span className="text-sm text-muted-foreground">
29          {servings} servings
30        </span>
31      </div>
32      <Slider
33        value={[servings]}
34        onValueChange={([v]) => setServings(v)}
35        min={1}
36        max={baseServings * 4}
37        step={1}
38        className="mb-6"
39      />
40      <ul className="space-y-2">
41        {ingredients.map((ing, i) => {
42          const scaled = Math.round(ing.amount * ratio * 100) / 100
43          return (
44            <li key={i} className="flex justify-between text-sm">
45              <span>{ing.name}</span>
46              <span className="font-medium">
47                {scaled} {ing.unit}
48              </span>
49            </li>
50          )
51        })}
52      </ul>
53      <Separator className="mt-4" />
54    </Card>
55  )
56}

1// Paste this prompt into V0's AI chat:
2// Build a recipe creation form at app/recipes/new/page.tsx.
3// Requirements:
4// - Protected by auth
5// - Form sections in shadcn/ui Cards:
6//   - Basic Info: Input for title, Textarea for description, Select for difficulty (easy/medium/hard), Select for cuisine, Input for prep_time and cook_time, Input for servings
7//   - Image: file upload zone with preview, uploads to Supabase Storage 'recipe-images' bucket
8//   - Ingredients: dynamic list — each row has Input for name, Input type=number for amount, Select for unit (cup/tbsp/tsp/oz/g/lb/ml/whole). Add/Remove Buttons.
9//   - Instructions: dynamic numbered list — each step has Textarea for description. Add/Remove Buttons with reorder.
10//   - Tags: ToggleGroup for common tags (breakfast/lunch/dinner/dessert/snack/vegetarian/vegan/gluten-free)
11// - Submit via Server Action createRecipe() that inserts recipe, ingredients, instructions, and tags
12// - After creation, redirect to the new recipe page
13// - 'use client' for the interactive form