// api/products.ts
import { defineCollection, m, type Infer } from '@symulate/sdk'

const ProductSchema = m.object({
  id: m.uuid(),
  name: m.string(),
  brand: m.string(),
  description: m.string(),
  price: m.number({ min: 150, max: 2500 }),
  category: m.string(),
  size: m.array(m.string()),
  color: m.array(m.string()),
  images: m.array(m.internet.url(), { min: 3, max: 5 }),
  inStock: m.boolean(),
  material: m.string()
})

export type Product = Infer<typeof ProductSchema>

// Products need CRUD operations, so we use defineCollection
export const products = defineCollection<Product>({
  name: 'products',
  basePath: '/api/products',
  schema: ProductSchema,
  seedCount: 50,
  seedInstruction: `Luxury fashion boutique in Munich, Germany.
    Products: Designer dresses, handbags, shoes, accessories.
    Brands: Include prestigious European fashion houses.
    Pricing: €150-€2500, appropriate for luxury segment.
    Categories: Kleider, Taschen, Schuhe, Accessoires.
    Sizes: EU sizing (36, 38, 40, 42, 44).
    Colors: In German (Schwarz, Weiß, Rot, Blau, Beige).
    Materials: Seide, Leder, Kaschmir, Baumwolle.
    85% should be in stock.`
})

Why This Works:

Specific instructions = realistic data
Client's industry (luxury fashion)
Client's language (German)
Client's currency (Euro)
Appropriate pricing for segment

Step 3: Define Supporting Models (30 minutes)

// api/categories.ts
const CategorySchema = m.object({
  id: m.uuid(),
  name: m.string(),
  slug: m.string(),
  productCount: m.number({ min: 8, max: 25 }),
  image: m.internet.url()
})

export type Category = Infer<typeof CategorySchema>

export const categories = defineCollection<Category>({
  name: 'categories',
  basePath: '/api/categories',
  schema: CategorySchema,
  seedCount: 6,
  seedInstruction: `Fashion categories in German:
    - Kleider (Dresses) - ~20 products
    - Taschen (Handbags) - ~15 products
    - Schuhe (Shoes) - ~18 products
    - Accessoires (Accessories) - ~12 products
    - Schmuck (Jewelry) - ~10 products
    - Sale - ~8 products`
})

// api/cart.ts
const CartItemSchema = m.object({
  id: m.uuid(),
  productId: m.uuid(),
  quantity: m.number({ min: 1, max: 3 }),
  size: m.string(),
  color: m.string(),
  addedAt: m.date({ max: 'now' })
})

export type CartItem = Infer<typeof CartItemSchema>

// Cart needs CRUD operations (add/remove items), so we use defineCollection
export const cartItems = defineCollection<CartItem>({
  name: 'cartItems',
  basePath: '/api/cart/items',
  schema: CartItemSchema,
  seedCount: 2,
  seedInstruction: 'Shopping cart items with 1-2 luxury fashion items, realistic quantities'
})

// For fetching a single product by ID, we can use the collection's get method
// Or define a read-only endpoint if you prefer a different approach
export const getProduct = defineEndpoint({
  path: '/api/products/:id',
  method: 'GET',
  schema: ProductSchema,
  mock: {
    instruction: 'Single product with full details, multiple images, size/color variants'
  }
})

Hour 1 Complete! ✓

API contracts defined
Data will be realistic and client-specific
Ready to build UI

Hours 2-3: UI Development (10 AM - 12 PM)

Step 1: Set Up Project (10 minutes)

# Quick Next.js setup
npx create-next-app@latest fashion-boutique --typescript --tailwind --app
cd fashion-boutique

# Install Symulate SDK
npm install @symulate/sdk

# Configure Symulate
npx symulate init

Configure your API key in .env.local:

NEXT_PUBLIC_SYMULATE_API_KEY=your_api_key_here

Step 2: Create Homepage (30 minutes)

// app/page.tsx
'use client'

import { useEffect, useState } from 'react'
import { products, categories, type Product, type Category } from '@/api'
import { ProductCard } from '@/components/ProductCard'
import { CategoryNav } from '@/components/CategoryNav'

export default function HomePage() {
  const [productList, setProductList] = useState<Product[]>([])
  const [categoryList, setCategoryList] = useState<Category[]>([])
  const [selectedCategory, setSelectedCategory] = useState('all')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Fetch data using collection APIs
    Promise.all([
      products.list(),
      categories.list()
    ]).then(([productsRes, categoriesRes]) => {
      setProductList(productsRes.data)
      setCategoryList(categoriesRes.data)
      setLoading(false)
    })
  }, [])

  const filtered = selectedCategory === 'all'
    ? productList
    : productList.filter(p => p.category === selectedCategory)

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <h1 className="text-3xl font-serif font-bold">MAISON LUXE</h1>
            <nav className="flex items-center gap-6">
              <a href="/cart" className="hover:text-gray-600">
                Warenkorb (0)
              </a>
            </nav>
          </div>
        </div>
      </header>

      {/* Category Navigation */}
      <CategoryNav
        categories={categoryList}
        selected={selectedCategory}
        onChange={setSelectedCategory}
      />

      {/* Products Grid */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        {loading ? (
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {[...Array(8)].map((_, i) => (
              <div key={i} className="bg-white rounded-lg h-96 animate-pulse" />
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {filtered.map(product => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        )}
      </main>
    </div>
  )
}

Step 3: Create Product Card Component (20 minutes)

// components/ProductCard.tsx
import Link from 'next/link'
import type { Product } from '@/api'

interface Props {
  product: Product
}

export function ProductCard({ product }: Props) {
  return (
    <Link href={`/products/${product.id}`}>
      <div className="bg-white rounded-lg overflow-hidden hover:shadow-xl transition-shadow group">
        {/* Product Image */}
        <div className="relative aspect-[3/4] overflow-hidden bg-gray-100">
          <img
            src={product.images[0]}
            alt={product.name}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />

          {!product.inStock && (
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
              <span className="text-white font-semibold">Ausverkauft</span>
            </div>
          )}
        </div>

        {/* Product Info */}
        <div className="p-4">
          <p className="text-sm text-gray-500 uppercase tracking-wide">
            {product.brand}
          </p>
          <h3 className="font-semibold text-lg mt-1 line-clamp-2">
            {product.name}
          </h3>
          <p className="text-sm text-gray-600 mt-1 line-clamp-1">
            {product.material}
          </p>
          <p className="text-2xl font-bold mt-3">
            €{product.price.toLocaleString('de-DE')}
          </p>
        </div>
      </div>
    </Link>
  )
}

Step 4: Create Product Detail Page (40 minutes)

// app/products/[id]/page.tsx
'use client'

import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getProduct, type Product } from '@/api'

export default function ProductPage() {
  const params = useParams()
  const router = useRouter()
  const [product, setProduct] = useState<Product | null>(null)
  const [selectedImage, setSelectedImage] = useState(0)
  const [selectedSize, setSelectedSize] = useState('')
  const [selectedColor, setSelectedColor] = useState('')
  const [quantity, setQuantity] = useState(1)

  useEffect(() => {
    getProduct({ id: params.id as string }).then(data => {
      setProduct(data)
      setSelectedSize(data.size[0])
      setSelectedColor(data.color[0])
    })
  }, [params.id])

  if (!product) {
    return <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
    </div>
  }

  const handleAddToCart = () => {
    // In real app: add to cart state/API
    alert(`${product.name} wurde zum Warenkorb hinzugefügt!`)
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="border-b sticky top-0 bg-white z-50">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <button
              onClick={() => router.back()}
              className="text-gray-600 hover:text-gray-900"
            >
              ← Zurück
            </button>
            <h1 className="text-2xl font-serif font-bold">MAISON LUXE</h1>
            <a href="/cart" className="hover:text-gray-600">
              Warenkorb
            </a>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Images */}
          <div>
            {/* Main Image */}
            <div className="aspect-[3/4] bg-gray-100 rounded-lg overflow-hidden mb-4">
              <img
                src={product.images[selectedImage]}
                alt={product.name}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Thumbnail Gallery */}
            <div className="grid grid-cols-4 gap-2">
              {product.images.map((image, index) => (
                <button
                  key={index}
                  onClick={() => setSelectedImage(index)}
                  className={`aspect-square rounded-lg overflow-hidden border-2
                    ${index === selectedImage ? 'border-black' : 'border-transparent'}`}
                >
                  <img
                    src={image}
                    alt={`${product.name} ${index + 1}`}
                    className="w-full h-full object-cover"
                  />
                </button>
              ))}
            </div>
          </div>

          {/* Product Info */}
          <div>
            <p className="text-sm text-gray-500 uppercase tracking-wide">
              {product.brand}
            </p>
            <h1 className="text-4xl font-serif font-bold mt-2 mb-4">
              {product.name}
            </h1>
            <p className="text-3xl font-bold mb-6">
              €{product.price.toLocaleString('de-DE')}
            </p>

            <p className="text-gray-600 mb-8 leading-relaxed">
              {product.description}
            </p>

            {/* Material */}
            <div className="mb-6">
              <p className="text-sm font-semibold mb-2">Material</p>
              <p className="text-gray-600">{product.material}</p>
            </div>

            {/* Color Selection */}
            <div className="mb-6">
              <p className="text-sm font-semibold mb-3">Farbe: {selectedColor}</p>
              <div className="flex gap-2">
                {product.color.map(color => (
                  <button
                    key={color}
                    onClick={() => setSelectedColor(color)}
                    className={`px-4 py-2 border-2 rounded-lg transition
                      ${selectedColor === color
                        ? 'border-black bg-black text-white'
                        : 'border-gray-300 hover:border-gray-400'}`}
                  >
                    {color}
                  </button>
                ))}
              </div>
            </div>

            {/* Size Selection */}
            <div className="mb-6">
              <p className="text-sm font-semibold mb-3">Größe: {selectedSize}</p>
              <div className="flex gap-2">
                {product.size.map(size => (
                  <button
                    key={size}
                    onClick={() => setSelectedSize(size)}
                    className={`w-12 h-12 border-2 rounded-lg transition
                      ${selectedSize === size
                        ? 'border-black bg-black text-white'
                        : 'border-gray-300 hover:border-gray-400'}`}
                  >
                    {size}
                  </button>
                ))}
              </div>
            </div>

            {/* Quantity */}
            <div className="mb-8">
              <p className="text-sm font-semibold mb-3">Menge</p>
              <div className="flex items-center gap-4">
                <button
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  className="w-10 h-10 border rounded-lg hover:bg-gray-100"
                >
                  −
                </button>
                <span className="text-lg font-semibold w-12 text-center">
                  {quantity}
                </span>
                <button
                  onClick={() => setQuantity(quantity + 1)}
                  className="w-10 h-10 border rounded-lg hover:bg-gray-100"
                >
                  +
                </button>
              </div>
            </div>

            {/* Add to Cart */}
            <button
              onClick={handleAddToCart}
              disabled={!product.inStock}
              className="w-full bg-black text-white py-4 rounded-lg text-lg font-semibold
                hover:bg-gray-800 transition disabled:bg-gray-300 disabled:cursor-not-allowed"
            >
              {product.inStock ? 'In den Warenkorb' : 'Ausverkauft'}
            </button>

            {/* Delivery Info */}
            <div className="mt-8 p-4 bg-gray-50 rounded-lg">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-gray-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                </svg>
                <div>
                  <p className="font-semibold text-sm">Kostenloser Versand</p>
                  <p className="text-sm text-gray-600">
                    Bei Bestellungen über €200. Lieferung in 2-3 Werktagen.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

Hours 2-3 Complete! ✓

Homepage with products grid ✓
Category filtering ✓
Product detail page ✓
Add to cart functionality ✓
Responsive design ✓

Hour 4: Polish & Deploy (12 PM - 1 PM)

Step 1: Add Loading States (15 minutes)

// components/LoadingSpinner.tsx
export function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
    </div>
  )
}

// components/ProductSkeleton.tsx
export function ProductSkeleton() {
  return (
    <div className="bg-white rounded-lg overflow-hidden">
      <div className="aspect-[3/4] bg-gray-200 animate-pulse" />
      <div className="p-4 space-y-3">
        <div className="h-4 bg-gray-200 rounded animate-pulse w-1/2" />
        <div className="h-6 bg-gray-200 rounded animate-pulse" />
        <div className="h-4 bg-gray-200 rounded animate-pulse w-3/4" />
        <div className="h-8 bg-gray-200 rounded animate-pulse w-1/3" />
      </div>
    </div>
  )
}

Step 2: Mobile Optimization (15 minutes)

Test and fix:

Touch targets (min 44x44px)
Font sizes (min 16px to prevent zoom)
Responsive grid (1 column on mobile, 4 on desktop)
Navigation (hamburger menu if needed)

// Add mobile menu if needed
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

// Mobile-friendly navigation
<div className="lg:hidden">
  <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
    Menu
  </button>
  {mobileMenuOpen && (
    <nav className="absolute top-full left-0 right-0 bg-white shadow-lg">
      {/* Menu items */}
    </nav>
  )}
</div>

Step 3: Deploy to Vercel (20 minutes)

# Initialize git if not already
git init
git add .
git commit -m "Initial fashion boutique demo"

# Deploy to Vercel
npx vercel --prod

# Get deployment URL
# https://fashion-boutique-xyz.vercel.app

Configure Environment Variables in Vercel:

Go to Project Settings
Add NEXT_PUBLIC_SYMULATE_API_KEY
Redeploy

Step 4: Final Testing & Polish (10 minutes)

Test Checklist:

Homepage loads products ✓
Category filtering works ✓
Product detail page shows all info ✓
Images load properly ✓
"Add to Cart" button works ✓
Mobile responsive ✓
German language correct ✓
Euro pricing formatted properly ✓
Loading states show correctly ✓

Polish:

Add favicon
Update page titles
Add meta descriptions
Test on iPhone and Android

Hour 4 Complete! ✓

You now have:

Fully working e-commerce demo
Client-specific German content
Realistic luxury fashion products
Professional design
Mobile responsive
Deployed and ready to share

Total time: 4 hours Total cost: $400 (at $100/hr) Project value: $85,000 ROI: 21,150%

Template Variations for Different Industries

SaaS Dashboard (3-4 hours)

// api/analytics.ts
const AnalyticsSchema = m.object({
  date: m.date({ max: 'now' }),
  users: m.number({ min: 1000, max: 50000 }),
  revenue: m.number({ min: 10000, max: 200000 }),
  churn: m.number({ min: 0.5, max: 5.0 })
})

// api/customers.ts
const CustomerSchema = m.object({
  id: m.uuid(),
  company: m.company.name(),
  plan: m.helpers.arrayElement(['starter', 'professional', 'enterprise']),
  mrr: m.number({ min: 99, max: 9999 }),
  status: m.helpers.arrayElement(['active', 'trial', 'churned'])
})

Key Screens:

Dashboard with charts
Customer list
Analytics view
Settings page

Time: 3-4 hours

Restaurant Booking System (3-4 hours)

// api/restaurants.ts
const RestaurantSchema = m.object({
  id: m.uuid(),
  name: m.company.name(),
  cuisine: m.helpers.arrayElement(['Italian', 'French', 'Asian', 'German']),
  rating: m.number({ min: 3.5, max: 5.0 }),
  priceLevel: m.number({ min: 1, max: 4 }),
  location: m.location.city(),
  image: m.internet.url()
})

// api/reservations.ts
const ReservationSchema = m.object({
  id: m.uuid(),
  restaurant: RestaurantSchema,
  date: m.date({ min: 'now', max: '2025-12-31' }),
  time: m.string(),
  guests: m.number({ min: 1, max: 12 }),
  status: m.helpers.arrayElement(['confirmed', 'pending', 'cancelled'])
})

Key Screens:

Restaurant browse
Detail page with availability
Booking flow
Confirmation page

Time: 3-4 hours

Real Estate Portal (4-5 hours)

// api/properties.ts
const PropertySchema = m.object({
  id: m.uuid(),
  title: m.lorem.sentence(),
  price: m.number({ min: 200000, max: 2000000 }),
  bedrooms: m.number({ min: 1, max: 6 }),
  bathrooms: m.number({ min: 1, max: 4 }),
  area: m.number({ min: 50, max: 300 }),
  location: m.object({
    city: m.location.city(),
    neighborhood: m.location.street()
  }),
  features: m.array(m.string(), { min: 3, max: 8 }),
  images: m.array(m.internet.url(), { min: 5, max: 12 })
})

Key Screens:

Property search with filters
Map view
Property detail
Contact form
Saved properties

Time: 4-5 hours

Advanced: Reusable Templates

Build Once, Reuse Forever

First Client: 4 hours

- Define schemas
- Build UI components
- Polish design
- Deploy

Second Client (Same Industry): 1 hour

- Clone template
- Update AI instructions
- Adjust branding
- Deploy to new URL

Third Client: 30 minutes

- Refined template
- Quick customization
- Deploy

Template Library Structure

/templates
  /ecommerce
    /fashion-luxury
    /electronics
    /food-organic
  /saas
    /analytics-dashboard
    /crm
    /project-management
  /booking
    /restaurant
    /hotel
    /appointments

Each template includes:

API schemas
UI components
Color schemes
Industry-specific data

Customization time: 15-30 minutes per client

Common Pitfalls & Solutions

Pitfall 1: Trying to Build Everything

Mistake:

// DON'T: Build every possible feature
- User authentication
- Admin panel
- Payment processing
- Email notifications
- Search with 20 filters
- Reviews system
- Wishlist
- Recommendations

Better:

// DO: Focus on core workflow
- Browse products
- View details
- Add to cart
- Checkout
Done. Ship it.

Why: You have 4 hours, not 4 weeks.

Pitfall 2: Generic Demo Data

Mistake:

mock: {
  count: 50,
  instruction: 'Generate some products'
}

// Results in:
// "Product 1", "Product 2", "Product 3"
// Looks fake. Client not impressed.

Better:

mock: {
  count: 50,
  instruction: `Luxury fashion boutique in Munich.
  Products: Designer dresses, handbags, shoes.
  Brands: Include Chanel, Gucci, Prada, Valentino.
  Pricing: €150-€2500.
  Names: In German.
  Target: Wealthy customers aged 30-55.`
}

// Results in:
// "Chanel Tweed-Blazer Schwarz", "Gucci Leder-Handtasche Rot"
// Looks real. Client impressed.

Why: Specific = Realistic = Client can visualize their actual use case

Pitfall 3: Over-Polishing

Mistake:

Spending 2 hours on loading animations
Perfecting every micro-interaction
Adding Easter eggs
Pixel-perfect spacing

Better:

Working > Perfect
Ship at 80% polish
Iterate based on feedback

Why: 80% done in 4 hours > 100% done in 2 weeks

Pitfall 4: Not Testing Mobile

Mistake:

Build on desktop
Never check mobile
Client opens on iPhone during pitch
Layout broken
Lost deal

Better:

Test mobile throughout
Use responsive design
Check on real devices
iOS AND Android

Why: 60%+ of web traffic is mobile

The Client Presentation

How to Demo Your 4-Hour Creation

Don't Say:

"We built this in 4 hours, so it's not perfect..."

Do Say:

"We've created a working prototype to show you exactly how the system will work. Let me walk you through the customer experience..."

Demo Script (5 minutes)

Minute 1: Context

"You mentioned your customers struggle with X.
Let me show you how we solve that..."

Minute 2-3: Core Workflow

"Here's a customer browsing your products...
[Click through]
They add items to cart...
[Demonstrate]
And complete checkout...
[Show confirmation]
The entire experience is smooth and intuitive."

Minute 4: Mobile

"70% of your customers will use mobile.
Here's the mobile experience..."
[Pull out phone, demonstrate]

Minute 5: Handoff

"I'll send you the link. Feel free to explore.
Questions?"

After the Demo

Client: "This is impressive. How long would the real version take?"

You: "The UI is done. We need 3-4 weeks to build the actual backend, integrate with your systems, and handle payments."

Client: "That's fast! Other agencies said 12 weeks."

You: "Because we validated the design upfront with this prototype. No surprises, no rework."

Result: Contract signed.

Scaling This Across Your Agency

Week 1: Train One Dev

Pick your best developer
Have them build one demo
Document the process
Share learnings with team

Week 2: Train the Team

Workshop (2 hours)
Live demo creation
Q&A
Each dev builds simple demo

Week 3: Create Templates

E-commerce template
SaaS template
Booking template
Portfolio template

Week 4: Production

Every pitch has working demo
Track win rates
Celebrate wins
Iterate templates

Month 2 Results

Before:

Win rate: 25%
Average contract: $50K
Demos: Static mockups
Time per demo: 1-2 weeks

After:

Win rate: 55%
Average contract: $68K
Demos: Working prototypes
Time per demo: 2-4 hours

Revenue Impact:

Before: 10 pitches × 25% × $50K = $125K/month
After: 10 pitches × 55% × $68K = $374K/month
Increase: $249K/month = $3M/year

Real Developer Testimonials

Lisa, Senior Developer

"I was skeptical. 4 hours? No way. But I followed the framework exactly. Built a restaurant booking demo in 3.5 hours. Client signed a $60K contract the next day. I'm a believer now."