v0 (Vercel) vs Bolt.new مقارنة

// مثال على مكوّن shadcn/ui مُولَّد بواسطة v0
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function ProductCard({ product }: { product: Product }) {
  return (
    <Card className="group hover:shadow-lg transition-shadow">
      <CardHeader className="pb-2">
        <div className="flex items-start justify-between">
          <CardTitle className="text-lg">{product.name}</CardTitle>
          <Badge variant={product.inStock ? "default" : "secondary"}>
            {product.inStock ? "Stokta" : "Tükendi"}
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground text-sm mb-4">
          {product.description}
        </p>
        <div className="flex items-center justify-between">
          <span className="text-2xl font-bold">₺{product.price}</span>
          <Button disabled={!product.inStock}>Sepete Ekle</Button>
        </div>
      </CardContent>
    </Card>
  )
}

// مثال Express.js + React مُولَّد بواسطة Bolt.new

// server.ts (الخلفية)
import express from 'express'
import { createClient } from '@supabase/supabase-js'

const app = express()
const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
)

app.get('/api/products', async (req, res) => {
  const { data, error } = await supabase
    .from('products')
    .select('*')
    .order('created_at', { ascending: false })
  if (error) return res.status(500).json({ error: error.message })
  res.json(data)
})

// عميل (مكوّن React)
// يولّد Bolt الواجهة الأمامية والخلفية ومخطط قاعدة البيانات في آنٍ واحد