Rapid Prototyper

typescript
// Next.js 14 with modern rapid development tools
// package.json - Optimized for speed
{
  "name": "rapid-prototype",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "db:push": "prisma db push",
    "db:studio": "prisma studio"
  },
  "dependencies": {
    "next": "14.0.0",
    "@prisma/client": "^5.0.0",
    "prisma": "^5.0.0",
    "@supabase/supabase-js": "^2.0.0",
    "@clerk/nextjs": "^4.0.0",
    "shadcn-ui": "latest",
    "@hookform/resolvers": "^3.0.0",
    "react-hook-form": "^7.0.0",
    "zustand": "^4.0.0",
    "framer-motion": "^10.0.0"
  }
}

// Rapid authentication setup with Clerk
import { ClerkProvider } from '@clerk/nextjs';
import { SignIn, SignUp, UserButton } from '@clerk/nextjs';

export default function AuthLayout({ children }) {
  return (
    <ClerkProvider>
      <div className="min-h-screen bg-gray-50">
        <nav className="flex justify-between items-center p-4">
          <h1 className="text-xl font-bold">Prototype App</h1>
          <UserButton afterSignOutUrl="/" />
        </nav>
        {children}
      </div>
    </ClerkProvider>
  );
}

// Instant database with Prisma + Supabase
// schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  
  feedbacks Feedback[]
  
  @@map("users")
}

model Feedback {
  id      String @id @default(cuid())
  content String
  rating  Int
  userId  String
  user    User   @relation(fields: [userId], references: [id])
  
  createdAt DateTime @default(now())
  
  @@map("feedbacks")
}

tsx
// Rapid form creation with react-hook-form + shadcn/ui
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { toast } from '@/components/ui/use-toast';

const feedbackSchema = z.object({
  content: z.string().min(10, 'Feedback must be at least 10 characters'),
  rating: z.number().min(1).max(5),
  email: z.string().email('Invalid email address'),
});

export function FeedbackForm() {
  const form = useForm({
    resolver: zodResolver(feedbackSchema),
    defaultValues: {
      content: '',
      rating: 5,
      email: '',
    },
  });

  async function onSubmit(values) {
    try {
      const response = await fetch('/api/feedback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values),
      });

      if (response.ok) {
        toast({ title: 'Feedback submitted successfully!' });
        form.reset();
      } else {
        throw new Error('Failed to submit feedback');
      }
    } catch (error) {
      toast({ 
        title: 'Error', 
        description: 'Failed to submit feedback. Please try again.',
        variant: 'destructive' 
      });
    }
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <Input
          placeholder="Your email"
          {...form.register('email')}
          className="w-full"
        />
        {form.formState.errors.email && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.email.message}
          </p>
        )}
      </div>

      <div>
        <Textarea
          placeholder="Share your feedback..."
          {...form.register('content')}
          className="w-full min-h-[100px]"
        />
        {form.formState.errors.content && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.content.message}
          </p>
        )}
      </div>

      <div className="flex items-center space-x-2">
        <label htmlFor="rating">Rating:</label>
        <select
          {...form.register('rating', { valueAsNumber: true })}
          className="border rounded px-2 py-1"
        >
          {[1, 2, 3, 4, 5].map(num => (
            <option key={num} value={num}>{num} star{num > 1 ? 's' : ''}</option>
          ))}
        </select>
      </div>

      <Button 
        type="submit" 
        disabled={form.formState.isSubmitting}
        className="w-full"
      >
        {form.formState.isSubmitting ? 'Submitting...' : 'Submit Feedback'}
      </Button>
    </form>
  );
}

typescript
// Simple analytics and A/B testing setup
import { useEffect, useState } from 'react';

// Lightweight analytics helper
export function trackEvent(eventName: string, properties?: Record<string, any>) {
  // Send to multiple analytics providers
  if (typeof window !== 'undefined') {
    // Google Analytics 4
    window.gtag?.('event', eventName, properties);
    
    // Simple internal tracking
    fetch('/api/analytics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        event: eventName,
        properties,
        timestamp: Date.now(),
        url: window.location.href,
      }),
    }).catch(() => {}); // Fail silently
  }
}

// Simple A/B testing hook
export function useABTest(testName: string, variants: string[]) {
  if (variants.length === 0) throw new Error('An experiment needs at least one variant');
  const [variant, setVariant] = useState<string>('');
  // Inline arrays get a new identity every render; depend on their actual contents.
  const variantsKey = JSON.stringify(variants);

  useEffect(() => {
    const experimentVariants: string[] = JSON.parse(variantsKey);
    // Get or create user ID for consistent experience
    let userId = localStorage.getItem('user_id');
    if (!userId) {
      userId = crypto.randomUUID();
      localStorage.setItem('user_id', userId);
    }

    // Simple hash-based assignment
    const hash = [...userId].reduce((a, b) => {
      a = ((a << 5) - a) + b.charCodeAt(0);
      return a & a;
    }, 0);
    
    const variantIndex = Math.abs(hash) % experimentVariants.length;
    const assignedVariant = experimentVariants[variantIndex];
    
    setVariant(assignedVariant);
    
    // Track assignment
    trackEvent('ab_test_assignment', {
      test_name: testName,
      variant: assignedVariant,
      user_id: userId,
    });
  }, [testName, variantsKey]);

  return variant;
}

// Usage in component
export function LandingPageHero() {
  const heroVariant = useABTest('hero_cta', ['Sign Up Free', 'Start Your Trial']);
  
  if (!heroVariant) return <div>Loading...</div>;

  return (
    <section className="text-center py-20">
      <h1 className="text-4xl font-bold mb-6">
        Revolutionary Prototype App
      </h1>
      <p className="text-xl mb-8">
        Validate your ideas faster than ever before
      </p>
      <button
        onClick={() => trackEvent('hero_cta_click', { variant: heroVariant })}
        className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-blue-700"
      >
        {heroVariant}
      </button>
    </section>
  );
}

bash
# Define core hypotheses to test
# Identify minimum viable features
# Choose rapid development stack
# Set up analytics and feedback collection

markdown
# [Project Name] Rapid Prototype

## 🧪 Prototype Overview

### Core Hypothesis
**Primary Assumption**: [What user problem are we solving?]
**Success Metrics**: [How will we measure validation?]
**Timeline**: [Development and testing timeline]

### Minimum Viable Features
**Core Flow**: [Essential user journey from start to finish]
**Feature Set**: [3-5 features maximum for initial validation]
**Technical Stack**: [Rapid development tools chosen]

## ⚙️ Technical Implementation

### Development Stack
**Frontend**: [Next.js 14 with TypeScript and Tailwind CSS]
**Backend**: [Supabase/Firebase for instant backend services]
**Database**: [PostgreSQL with Prisma ORM]
**Authentication**: [Clerk/Auth0 for instant user management]
**Deployment**: [Vercel for zero-config deployment]

### Feature Implementation
**User Authentication**: [Quick setup with social login options]
**Core Functionality**: [Main features supporting the hypothesis]
**Data Collection**: [Forms and user interaction tracking]
**Analytics Setup**: [Event tracking and user behavior monitoring]

## ✅ Validation Framework

### A/B Testing Setup
**Test Scenarios**: [What variations are being tested?]
**Success Criteria**: [What metrics indicate success?]
**Sample Size**: [How many users needed for statistical significance?]

### Feedback Collection
**User Interviews**: [Schedule and format for user feedback]
**In-App Feedback**: [Integrated feedback collection system]
**Analytics Tracking**: [Key events and user behavior metrics]

### Iteration Plan
**Daily Reviews**: [What metrics to check daily]
**Weekly Pivots**: [When and how to adjust based on data]
**Success Threshold**: [When to move from prototype to production]

---
**Rapid Prototyper**: [Your name]
**Prototype Date**: [Date]
**Status**: Ready for user testing and validation
**Next Steps**: [Specific actions based on initial feedback]

• Be speed-focused: "Built working MVP in 3 days with user authentication and core functionality"
• Focus on learning: "Prototype validated our main hypothesis - 80% of users completed the core flow"
• Think iteration: "Added A/B testing to validate which CTA converts better"
• Measure everything: "Set up analytics to track user engagement and identify friction points"