<!-- Example CSP Header Implementation -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' https://trusted-cdn.com; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:; 
               font-src 'self'; 
               connect-src 'self'; 
               object-src 'none'; 
               base-uri 'self';">

<!-- Equivalent HTTP Header -->
Content-Security-Policy: default-src 'self'; 
                         script-src 'self' https://trusted-cdn.com; 
                         style-src 'self' 'unsafe-inline'; 
                         img-src 'self' data: https:; 
                         font-src 'self'; 
                         connect-src 'self'; 
                         object-src 'none'; 
                         base-uri 'self';

  

// Advanced CSP with reporting and modern directives
const advancedCSP = `
  default-src 'self';
  script-src 'self' 'wasm-unsafe-eval' 'strict-dynamic' 
    https: 'nonce-${generateNonce()}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.yourapp.com;
  frame-src 'none';
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
  block-all-mixed-content;
  require-trusted-types-for 'script';
`.replace(/\n/g, ' ').trim();

// Function to generate cryptographic nonce
function generateNonce() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return btoa(String.fromCharCode(...array));
}

  

<!-- SRI for JavaScript -->
<script 
  src="https://cdn.example.com/jquery-3.6.0.min.js"
  integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK"
  crossorigin="anonymous">
</script>

<!-- SRI for CSS -->
<link 
  rel="stylesheet" 
  href="https://cdn.example.com/bootstrap-5.1.3.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous">

<!-- Generating SRI hashes with Node.js -->
const crypto = require('crypto');
const fs = require('fs');

function generateIntegrityHash(filePath) {
  const fileContent = fs.readFileSync(filePath);
  const hash = crypto.createHash('sha384');
  hash.update(fileContent);
  return `sha384-${hash.digest('base64')}`;
}

console.log(generateIntegrityHash('./jquery-3.6.0.min.js'));

  

// Express.js security headers middleware
const helmet = require('helmet');

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: [
        "'self'", 
        "'strict-dynamic'",
        "https://cdn.yourapp.com"
      ],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "https:"],
      fontSrc: ["'self'", "https://fonts.gstatic.com"],
      connectSrc: ["'self'", "https://api.yourapp.com"],
      frameSrc: ["'none'"],
      objectSrc: ["'none'"],
      baseUri: ["'self'"],
      formAction: ["'self'"],
      upgradeInsecureRequests: [],
    },
  },
  hsts: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true
  },
  referrerPolicy: { policy: "strict-origin-when-cross-origin" }
}));

// Nginx configuration for security headers
server {
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;";
    add_header X-Frame-Options "DENY";
    add_header X-Content-Type-Options "nosniff";
    add_header Referrer-Policy "strict-origin-when-cross-origin";
    add_header Permissions-Policy "geolocation=(), microphone=(), camera=()";
}

  

// webpack.config.js with SRI support
const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    crossOriginLoading: 'anonymous'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: true
    }),
    new SubresourceIntegrityPlugin({
      hashFuncNames: ['sha384'],
      enabled: process.env.NODE_ENV === 'production'
    })
  ]
};

// Custom SRI script for non-Webpack setups
const fs = require('fs');
const crypto = require('crypto');
const cheerio = require('cheerio');

function addSRItoHTML(htmlPath) {
  const html = fs.readFileSync(htmlPath, 'utf8');
  const $ = cheerio.load(html);
  
  $('script[src]').each((i, elem) => {
    const src = $(elem).attr('src');
    if (src.startsWith('http')) {
      // In real implementation, you'd fetch and hash the resource
      const integrity = generateRemoteIntegrity(src);
      $(elem).attr('integrity', integrity);
      $(elem).attr('crossorigin', 'anonymous');
    }
  });
  
  fs.writeFileSync(htmlPath, $.html());
}

function generateRemoteIntegrity(url) {
  // Implementation for fetching and hashing remote resources
  // This is a simplified example
  return 'sha384-generated-hash-here';
}

  

// Express.js CSP report endpoint
app.post('/csp-report', express.json({type: 'application/csp-report'}), (req, res) => {
  const report = req.body['csp-report'];
  
  // Log violation for monitoring
  console.warn('CSP Violation:', {
    violatedDirective: report['violated-directive'],
    blockedURI: report['blocked-uri'],
    originalPolicy: report['original-policy'],
    referrer: report['referrer'],
    userAgent: req.get('User-Agent'),
    timestamp: new Date().toISOString()
  });
  
  // Send to security monitoring service
  sendToSecurityDashboard(report);
  
  res.status(204).end();
});

// CSP header with reporting
const cspWithReporting = `
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  report-uri /csp-report;
  report-to csp-endpoint;
`.trim();

// Report-To header for newer browsers
const reportToHeader = {
  group: 'csp-endpoint',
  max_age: 10886400,
  endpoints: [{ url: '/csp-report' }],
  include_subdomains: true
};

  

import { useState, useTransition } from 'react';
import { searchProducts } from './api';
import { ProductList } from './ProductList';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  // Handle search input with transition
  const handleSearch = (searchQuery) => {
    setQuery(searchQuery); // Urgent update - input reflects immediately
    
    // Mark search as non-urgent transition
    startTransition(() => {
      // This update can be interrupted if more urgent work comes in
      searchProducts(searchQuery).then(newResults => {
        setResults(newResults);
      });
    });
  };

  return (
    <div className="search-container">
      <input
        type="text"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search products..."
        className="search-input"
      />
      
      {/* Show loading indicator during transition */}
      {isPending && (
        <div className="loading-indicator">
          Searching...
        </div>
      )}
      
      {/* Results show with smooth transition */}
      <ProductList 
        products={results} 
        isLoading={isPending}
      />
    </div>
  );
}

// Advanced useTransition with multiple states
function AdvancedSearch() {
  const [filters, setFilters] = useState({
    category: '',
    priceRange: [0, 1000],
    sortBy: 'name'
  });
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, startSearchTransition] = useTransition();
  const [searchStats, setSearchStats] = useState(null);

  const updateFilters = (newFilters) => {
    // Urgent update - filters change immediately
    setFilters(newFilters);
    
    // Non-urgent search operation
    startSearchTransition(async () => {
      const { results, stats } = await performSearch(newFilters);
      setSearchResults(results);
      setSearchStats(stats);
    });
  };

  // Handle individual filter changes
  const handleCategoryChange = (category) => {
    updateFilters({ ...filters, category });
  };

  const handlePriceChange = (priceRange) => {
    updateFilters({ ...filters, priceRange });
  };

  return (
    <div>
      <Filters 
        filters={filters}
        onCategoryChange={handleCategoryChange}
        onPriceChange={handlePriceChange}
      />
      
      {isSearching && <SearchProgress />}
      
      <SearchResults 
        results={searchResults}
        stats={searchStats}
      />
    </div>
  );
}

// useTransition with error handling
function SearchWithErrorHandling() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (searchQuery) => {
    setQuery(searchQuery);
    setError(null);
    
    startTransition(() => {
      searchProducts(searchQuery)
        .then(newResults => {
          setResults(newResults);
        })
        .catch(err => {
          setError(err.message);
        });
    });
  };

  return (
    <div>
      <SearchInput 
        value={query}
        onChange={handleSearch}
      />
      
      {error && (
        <div className="error-message">
          {error}
        </div>
      )}
      
      {isPending ? (
        <LoadingSkeleton />
      ) : (
        <ProductGrid products={results} />
      )}
    </div>
  );
}

  

import { useState, useDeferredValue, useMemo } from 'react';

function DataVisualization() {
  const [data, setData] = useState(largeDataset);
  const [filter, setFilter] = useState('');
  
  // Defer the expensive filtered data computation
  const deferredFilter = useDeferredValue(filter);
  
  // Memoize the expensive computation
  const filteredData = useMemo(() => {
    console.log('Filtering data...');
    
    // Simulate expensive computation
    return data.filter(item => 
      item.name.toLowerCase().includes(deferredFilter.toLowerCase())
    );
  }, [data, deferredFilter]);
  
  const handleFilterChange = (newFilter) => {
    setFilter(newFilter); // Input updates immediately
    // filteredData will update "lagging behind" with lower priority
  };

  return (
    <div className="dashboard">
      <input
        value={filter}
        onChange={(e) => handleFilterChange(e.target.value)}
        placeholder="Filter data..."
      />
      
      {/* This expensive component updates with lower priority */}
      <ExpensiveChart data={filteredData} />
    </div>
  );
}

// Combined useDeferredValue with useTransition
function AdvancedDataTable() {
  const [rows, setRows] = useState(initialRows);
  const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'asc' });
  const [globalFilter, setGlobalFilter] = useState('');
  
  const [isSorting, startSortTransition] = useTransition();
  const deferredFilter = useDeferredValue(globalFilter);
  
  // Memoize filtered and sorted data
  const processedData = useMemo(() => {
    console.log('Processing data...');
    
    let filtered = rows;
    
    // Apply global filter
    if (deferredFilter) {
      filtered = rows.filter(row =>
        Object.values(row).some(value =>
          String(value).toLowerCase().includes(deferredFilter.toLowerCase())
        )
      );
    }
    
    // Apply sorting
    return [...filtered].sort((a, b) => {
      const aValue = a[sortConfig.key];
      const bValue = b[sortConfig.key];
      
      if (sortConfig.direction === 'asc') {
        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
      } else {
        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
      }
    });
  }, [rows, deferredFilter, sortConfig]);

  const handleSort = (key) => {
    const direction = 
      sortConfig.key === key && sortConfig.direction === 'asc' 
        ? 'desc' 
        : 'asc';
    
    // Mark sorting as non-urgent transition
    startSortTransition(() => {
      setSortConfig({ key, direction });
    });
  };

  const handleGlobalFilter = (filter) => {
    setGlobalFilter(filter); // Input updates immediately
    // Data processing happens with lower priority
  };

  return (
    <div className="data-table-container">
      <div className="table-controls">
        <input
          value={globalFilter}
          onChange={(e) => handleGlobalFilter(e.target.value)}
          placeholder="Search all columns..."
        />
        
        {isSorting && <span className="sorting-indicator">Sorting...</span>}
      </div>
      
      <DataTable
        data={processedData}
        sortConfig={sortConfig}
        onSort={handleSort}
      />
    </div>
  );
}

// useDeferredValue for real-time data streams
function RealTimeDashboard() {
  const [sensorData, setSensorData] = useState(initialSensorData);
  const [visualizationComplexity, setVisualizationComplexity] = useState('medium');
  
  // Defer visualization updates to prevent jank during rapid data updates
  const deferredSensorData = useDeferredValue(sensorData);
  
  // Handle real-time data stream
  useEffect(() => {
    const ws = new WebSocket('ws://sensors.example.com/data');
    
    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      setSensorData(prev => [...prev, newData].slice(-1000)); // Keep last 1000 points
    };
    
    return () => ws.close();
  }, []);
  
  return (
    <div className="dashboard">
      <RealTimeControls 
        complexity={visualizationComplexity}
        onComplexityChange={setVisualizationComplexity}
      />
      
      {/* This expensive visualization updates with lower priority */}
      <SensorVisualization 
        data={deferredSensorData}
        complexity={visualizationComplexity}
      />
      
      <LiveMetrics data={sensorData} /> {/* Always shows latest data */}
    </div>
  );
}

  

// Pattern 1: Nested Transitions for Complex UI Updates
function MultiStepForm() {
  const [formData, setFormData] = useState(initialData);
  const [validationErrors, setValidationErrors] = useState({});
  const [saveStatus, setSaveStatus] = useState('idle');
  
  const [isValidating, startValidationTransition] = useTransition();
  const [isSaving, startSaveTransition] = useTransition();

  const validateField = (field, value) => {
    startValidationTransition(() => {
      const errors = validateFieldLogic(field, value);
      setValidationErrors(prev => ({
        ...prev,
        [field]: errors
      }));
    });
  };

  const saveForm = async (data) => {
    startSaveTransition(async () => {
      setSaveStatus('saving');
      try {
        await api.saveForm(data);
        setSaveStatus('success');
      } catch (error) {
        setSaveStatus('error');
      }
    });
  };

  const handleFieldChange = (field, value) => {
    // Immediate UI update
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    
    // Non-urgent validation
    validateField(field, value);
  };

  return (
    <form>
      {Object.entries(formData).map(([field, value]) => (
        <FormField
          key={field}
          field={field}
          value={value}
          error={validationErrors[field]}
          onChange={handleFieldChange}
          isValidationPending={isValidating}
        />
      ))}
      
      <button 
        onClick={() => saveForm(formData)}
        disabled={isSaving}
      >
        {isSaving ? 'Saving...' : 'Save Form'}
      </button>
    </form>
  );
}

// Pattern 2: Concurrent Data Fetching with Suspense
function UserDashboard() {
  const [selectedUserId, setSelectedUserId] = useState(null);
  const [isTransitioning, startTransition] = useTransition();

  const handleUserSelect = (userId) => {
    startTransition(() => {
      setSelectedUserId(userId);
    });
  };

  return (
    <div className="dashboard">
      <UserList onUserSelect={handleUserSelect} />
      
      <div className="main-content">
        {isTransitioning ? (
          <DashboardSkeleton />
        ) : (
          <Suspense fallback={<UserProfileSkeleton />}>
            {selectedUserId && (
              <UserProfile userId={selectedUserId} />
            )}
          </Suspense>
        )}
      </div>
    </div>
  );
}

// Pattern 3: Optimistic Updates with Concurrent Rendering
function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, setOptimisticTodos] = useState([]);
  const [isSyncing, startSyncTransition] = useTransition();

  const addTodo = async (text) => {
    const optimisticTodo = {
      id: `temp-${Date.now()}`,
      text,
      completed: false,
      isOptimistic: true
    };

    // Immediate optimistic update
    setOptimisticTodos(prev => [...prev, optimisticTodo]);
    
    // Non-urgent server sync
    startSyncTransition(async () => {
      try {
        const savedTodo = await api.addTodo(text);
        
        // Replace optimistic todo with real one
        setTodos(prev => [...prev, savedTodo]);
        setOptimisticTodos(prev => 
          prev.filter(todo => todo.id !== optimisticTodo.id)
        );
      } catch (error) {
        // Rollback optimistic update
        setOptimisticTodos(prev => 
          prev.filter(todo => todo.id !== optimisticTodo.id)
        );
        // Show error message
      }
    });
  };

  const displayedTodos = [...todos, ...optimisticTodos];

  return (
    <div>
      <AddTodoForm onSubmit={addTodo} />
      
      {isSyncing && <SyncIndicator />}
      
      <TodoListItems 
        todos={displayedTodos}
        isSyncing={isSyncing}
      />
    </div>
  );
}

// Pattern 4: Concurrent Pagination and Infinite Scroll
function ProductCatalog() {
  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingNextPage, startLoadTransition] = useTransition();

  const loadMoreProducts = async () => {
    startLoadTransition(async () => {
      const nextPage = page + 1;
      const newProducts = await api.getProducts(nextPage);
      
      if (newProducts.length === 0) {
        setHasMore(false);
      } else {
        setProducts(prev => [...prev, ...newProducts]);
        setPage(nextPage);
      }
    });
  };

  return (
    <div className="catalog">
      <ProductGrid products={products} />
      
      {hasMore && (
        <button 
          onClick={loadMoreProducts}
          disabled={isLoadingNextPage}
          className="load-more-btn"
        >
          {isLoadingNextPage ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
}

// Pattern 5: Concurrent Image Loading and Transitions
function ImageGallery() {
  const [images, setImages] = useState([]);
  const [selectedImage, setSelectedImage] = useState(null);
  const [isTransitioning, startTransition] = useTransition();

  const handleImageSelect = (image) => {
    startTransition(() => {
      setSelectedImage(image);
    });
  };

  const loadMoreImages = async () => {
    startTransition(async () => {
      const newImages = await api.getImages();
      setImages(prev => [...prev, ...newImages]);
    });
  };

  return (
    <div className="gallery">
      <div className="thumbnails">
        {images.map(image => (
          <img
            key={image.id}
            src={image.thumbnail}
            onClick={() => handleImageSelect(image)}
            className="thumbnail"
          />
        ))}
      </div>
      
      <div className="viewer">
        {isTransitioning ? (
          <ImagePlaceholder />
        ) : selectedImage ? (
          <Suspense fallback={<ImageLoader />}>
            <FullSizeImage image={selectedImage} />
          </Suspense>
        ) : null}
      </div>
    </div>
  );
}

  

// package.json - Complete dependencies
{
  "name": "type-safe-fullstack",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "db:generate": "prisma generate",
    "db:push": "prisma db push",
    "db:studio": "prisma studio",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "@prisma/client": "^5.6.0",
    "@tanstack/react-query": "^5.0.0",
    "@trpc/client": "^11.0.0",
    "@trpc/next": "^11.0.0",
    "@trpc/react-query": "^11.0.0",
    "@trpc/server": "^11.0.0",
    "next": "14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "superjson": "^2.0.0",
    "zod": "^3.22.0"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "prisma": "^5.6.0",
    "typescript": "^5.2.0"
  }
}

// tsconfig.json - Strict TypeScript configuration
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
  

// src/server/trpc.ts - tRPC configuration
import { initTRPC, TRPCError } from '@trpc/server';
import { type CreateNextContextOptions } from '@trpc/server/adapters/next';
import superjson from 'superjson';
import { ZodError } from 'zod';
import { prisma } from './prisma';

// Context creation
export const createTRPCContext = (opts: CreateNextContextOptions) => {
  return {
    prisma,
    req: opts.req,
    res: opts.res,
    user: null, // Would come from auth in real app
  };
};

// Initialize tRPC
const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

// Middlewares
export const createTRPCRouter = t.router;
export const publicProcedure = t.procedure;

// Authentication middleware
const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({
    ctx: {
      ...ctx,
      user: ctx.user, // user is now non-null
    },
  });
});

export const protectedProcedure = t.procedure.use(isAuthed);
  

// src/pages/api/trpc/[trpc].ts - tRPC API handler
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { appRouter } from '../../../server/routes/_app';
import { createTRPCContext } from '../../../server/trpc';

export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    process.env.NODE_ENV === 'development'
      ? ({ path, error }) => {
          console.error(
            `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`
          );
        }
      : undefined,
  responseMeta({ ctx, paths, type, errors }) {
    // Cache API responses for 1 minute
    const allPublic = paths && paths.every((path) => path.includes('public'));
    const allOk = errors.length === 0;
    const isQuery = type === 'query';

    if (ctx?.res && allPublic && allOk && isQuery) {
      return {
        headers: {
          'cache-control': `s-maxage=60, stale-while-revalidate=300`,
        },
      };
    }
    return {};
  },
});

// src/utils/trpc.ts - Frontend tRPC client
import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import superjson from 'superjson';
import { type AppRouter } from '../server/routes/_app';

function getBaseUrl() {
  if (typeof window !== 'undefined') return '';
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: true,
});
  

// src/components/PostList.tsx - Type-safe post listing
import { useState } from 'react';
import { trpc } from '../utils/trpc';

export function PostList() {
  const [search, setSearch] = useState('');
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
    error,
  } = trpc.post.list.useInfiniteQuery(
    {
      limit: 10,
      search: search || undefined,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
      staleTime: 5 * 60 * 1000, // 5 minutes
    }
  );

  if (status === 'loading') {
    return <div>Loading posts...</div>;
  }

  if (status === 'error') {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex gap-4">
        <input
          type="text"
          placeholder="Search posts..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="px-4 py-2 border rounded-lg"
        />
      </div>

      <div className="space-y-4">
        {data.pages.map((page, pageIndex) => (
          <div key={pageIndex} className="space-y-4">
            {page.posts.map((post) => (
              <PostCard key={post.id} post={post} />
            ))}
          </div>
        ))}
      </div>

      {hasNextPage && (
        <button
          onClick={() => fetchNextPage()}
          disabled={isFetchingNextPage}
          className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50"
        >
          {isFetchingNextPage ? 'Loading more...' : 'Load More'}
        </button>
      )}
    </div>
  );
}

// src/components/CreatePostForm.tsx - Type-safe form with validation
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { trpc } from '../utils/trpc';

const createPostSchema = z.object({
  title: z.string().min(1, 'Title is required').max(255),
  content: z.string().optional(),
  tagIds: z.array(z.string()).optional(),
});

type CreatePostInput = z.infer<typeof createPostSchema>;

export function CreatePostForm() {
  const utils = trpc.useContext();
  const { data: tags } = trpc.tag.list.useQuery();
  
  const createPost = trpc.post.create.useMutation({
    onSuccess: () => {
      utils.post.list.invalidate();
      reset();
    },
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<CreatePostInput>({
    resolver: zodResolver(createPostSchema),
  });

  const onSubmit = (data: CreatePostInput) => {
    createPost.mutate(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 p-6 border rounded-lg">
      <h2 className="text-lg font-semibold">Create New Post</h2>
      
      <div>
        <label className="block text-sm font-medium mb-1">Title</label>
        <input
          {...register('title')}
          className="w-full px-3 py-2 border rounded-lg"
          placeholder="Post title"
        />
        {errors.title && (
          <p className="text-red-500 text-sm mt-1">{errors.title.message}</p>
        )}
      </div>

      <button
        type="submit"
        disabled={createPost.isLoading}
        className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50"
      >
        {createPost.isLoading ? 'Creating...' : 'Create Post'}
      </button>
    </form>
  );
}
  

// service-worker.js - Advanced Caching Strategies
const CACHE_VERSION = '2025.1.0';
const STATIC_CACHE = `static-${CACHE_VERSION}`;
const DYNAMIC_CACHE = `dynamic-${CACHE_VERSION}`;
const API_CACHE = `api-${CACHE_VERSION}`;

// Cache strategies configuration
const CACHE_STRATEGIES = {
  STATIC_NETWORK_FIRST: 'static-network-first',
  DYNAMIC_CACHE_FIRST: 'dynamic-cache-first',
  API_STALE_WHILE_REVALIDATE: 'api-stale-while-revalidate',
  CRITICAL_NETWORK_ONLY: 'critical-network-only'
};

// Critical assets for immediate caching
const CRITICAL_ASSETS = [
  '/',
  '/static/css/main.css',
  '/static/js/app.js',
  '/static/images/logo.svg',
  '/manifest.json'
];

// Install event - Cache critical assets
self.addEventListener('install', (event) => {
  console.log('Service Worker installing...');
  
  event.waitUntil(
    caches.open(STATIC_CACHE)
      .then((cache) => {
        console.log('Caching critical assets');
        return cache.addAll(CRITICAL_ASSETS);
      })
      .then(() => self.skipWaiting())
  );
});

// Activate event - Clean up old caches
self.addEventListener('activate', (event) => {
  console.log('Service Worker activating...');
  
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (![STATIC_CACHE, DYNAMIC_CACHE, API_CACHE].includes(cacheName)) {
            console.log('Deleting old cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

// Fetch event - Advanced routing with multiple strategies
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  // Determine caching strategy based on request type
  const strategy = getCachingStrategy(event.request, url);
  
  switch (strategy) {
    case CACHE_STRATEGIES.STATIC_NETWORK_FIRST:
      event.respondWith(staticNetworkFirst(event.request));
      break;
      
    case CACHE_STRATEGIES.DYNAMIC_CACHE_FIRST:
      event.respondWith(dynamicCacheFirst(event.request));
      break;
      
    case CACHE_STRATEGIES.API_STALE_WHILE_REVALIDATE:
      event.respondWith(apiStaleWhileRevalidate(event.request));
      break;
      
    case CACHE_STRATEGIES.CRITICAL_NETWORK_ONLY:
      event.respondWith(networkOnly(event.request));
      break;
      
    default:
      event.respondWith(networkFirst(event.request));
  }
});

// Strategy determination logic
function getCachingStrategy(request, url) {
  // Static assets (CSS, JS, images)
  if (url.pathname.match(/\.(css|js|woff2?|ttf|eot|svg|png|jpg|jpeg|gif|webp)$/)) {
    return CACHE_STRATEGIES.STATIC_NETWORK_FIRST;
  }
  
  // API endpoints
  if (url.pathname.startsWith('/api/')) {
    return CACHE_STRATEGIES.API_STALE_WHILE_REVALIDATE;
  }
  
  // HTML pages - dynamic content
  if (request.headers.get('Accept')?.includes('text/html')) {
    return CACHE_STRATEGIES.DYNAMIC_CACHE_FIRST;
  }
  
  // Critical user actions (forms, payments)
  if (request.method === 'POST' || url.pathname.includes('/checkout')) {
    return CACHE_STRATEGIES.CRITICAL_NETWORK_ONLY;
  }
  
  return CACHE_STRATEGIES.STATIC_NETWORK_FIRST;
}

// Strategy implementations
async function staticNetworkFirst(request) {
  const cache = await caches.open(STATIC_CACHE);
  
  try {
    // Try network first
    const networkResponse = await fetch(request);
    
    if (networkResponse.status === 200) {
      // Cache the fresh response
      cache.put(request, networkResponse.clone());
    }
    
    return networkResponse;
  } catch (error) {
    // Network failed, try cache
    const cachedResponse = await cache.match(request);
    
    if (cachedResponse) {
      return cachedResponse;
    }
    
    // Fallback for critical assets
    if (CRITICAL_ASSETS.includes(new URL(request.url).pathname)) {
      return caches.match('/offline.html');
    }
    
    throw error;
  }
}

async function dynamicCacheFirst(request) {
  const cache = await caches.open(DYNAMIC_CACHE);
  
  // Try cache first
  const cachedResponse = await cache.match(request);
  
  if (cachedResponse) {
    // Background update from network
    fetch(request)
      .then((networkResponse) => {
        if (networkResponse.status === 200) {
          cache.put(request, networkResponse);
        }
      })
      .catch(() => {
        // Silent fail for background update
      });
    
    return cachedResponse;
  }
  
  // Cache miss - go to network
  try {
    const networkResponse = await fetch(request);
    
    if (networkResponse.status === 200) {
      cache.put(request, networkResponse.clone());
    }
    
    return networkResponse;
  } catch (error) {
    return new Response('Network error happened', {
      status: 408,
      headers: { 'Content-Type': 'text/plain' }
    });
  }
}

async function apiStaleWhileRevalidate(request) {
  const cache = await caches.open(API_CACHE);
  
  // Try cache first for immediate response
  const cachedResponse = await cache.match(request);
  
  // Always fetch from network in background
  const networkPromise = fetch(request).then(async (networkResponse) => {
    if (networkResponse.status === 200) {
      await cache.put(request, networkResponse.clone());
    }
    return networkResponse;
  });
  
  if (cachedResponse) {
    // Return cached version immediately, update in background
    return cachedResponse;
  }
  
  // No cache, wait for network
  return networkPromise;
}

async function networkOnly(request) {
  return fetch(request);
}

async function networkFirst(request) {
  try {
    return await fetch(request);
  } catch (error) {
    const cache = await caches.open(DYNAMIC_CACHE);
    const cachedResponse = await cache.match(request);
    
    if (cachedResponse) {
      return cachedResponse;
    }
    
    throw error;
  }
}

// Background sync for failed requests
self.addEventListener('sync', (event) => {
  if (event.tag === 'background-sync') {
    console.log('Background sync triggered');
    event.waitUntil(doBackgroundSync());
  }
});

async function doBackgroundSync() {
  // Implement background synchronization logic
  const cache = await caches.open(DYNAMIC_CACHE);
  const requests = await cache.keys();
  
  for (const request of requests) {
    try {
      const response = await fetch(request);
      if (response.status === 200) {
        await cache.put(request, response);
      }
    } catch (error) {
      console.log('Background sync failed for:', request.url);
    }
  }
}

// Cache warming - preload likely resources
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'WARM_CACHE') {
    warmCache(event.data.urls);
  }
});

async function warmCache(urls) {
  const cache = await caches.open(DYNAMIC_CACHE);
  
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (response.status === 200) {
        await cache.put(url, response);
      }
    } catch (error) {
      console.log('Cache warming failed for:', url);
    }
  }
}

  

// cache-headers.js - Advanced HTTP Cache Configuration
const express = require('express');
const router = express.Router();

// Cache control middleware with intelligent policies
function createCacheMiddleware(options = {}) {
  const {
    defaultMaxAge = 3600,
    staleWhileRevalidate = 86400,
    staleIfError = 7200,
    immutableMaxAge = 31536000
  } = options;

  return (req, res, next) => {
    const url = req.url;
    const acceptHeader = req.headers.accept || '';
    
    // Determine content type and caching strategy
    const cacheConfig = getCacheConfig(url, acceptHeader, options);
    
    // Set cache control headers
    setCacheHeaders(res, cacheConfig);
    
    next();
  };
}

function getCacheConfig(url, acceptHeader, options) {
  // Static assets with content-based hashing
  if (url.match(/\/static\/[^/]+\.[a-f0-9]{8,}\.(css|js)$/)) {
    return {
      public: true,
      maxAge: options.immutableMaxAge,
      immutable: true,
      staleWhileRevalidate: options.staleWhileRevalidate
    };
  }
  
  // Versioned static assets
  if (url.match(/\/static\/v\d+\//)) {
    return {
      public: true,
      maxAge: 604800, // 7 days
      staleWhileRevalidate: 86400 // 1 day
    };
  }
  
  // CSS and JS files
  if (url.match(/\.(css|js)$/)) {
    return {
      public: true,
      maxAge: 86400, // 1 day
      staleWhileRevalidate: 604800 // 7 days
    };
  }
  
  // Images and media
  if (url.match(/\.(png|jpg|jpeg|gif|webp|svg|ico|woff2?|ttf|eot)$/)) {
    return {
      public: true,
      maxAge: 2592000, // 30 days
      staleWhileRevalidate: 86400 // 1 day
    };
  }
  
  // HTML documents
  if (acceptHeader.includes('text/html')) {
    return {
      public: true,
      maxAge: 0, // No cache for HTML
      mustRevalidate: true,
      noCache: true
    };
  }
  
  // API responses
  if (url.startsWith('/api/')) {
    const isPublicAPI = url.match(/\/api\/public\//);
    const isUserData = url.match(/\/api\/user\//);
    
    if (isPublicAPI) {
      return {
        public: true,
        maxAge: 300, // 5 minutes
        staleWhileRevalidate: 3600 // 1 hour
      };
    }
    
    if (isUserData) {
      return {
        private: true,
        maxAge: 60, // 1 minute
        mustRevalidate: true
      };
    }
    
    // Default API caching
    return {
      public: false,
      maxAge: 0,
      noCache: true
    };
  }
  
  // Default caching
  return {
    public: true,
    maxAge: options.defaultMaxAge,
    staleWhileRevalidate: options.staleWhileRevalidate
  };
}

function setCacheHeaders(res, config) {
  const directives = [];
  
  if (config.public) {
    directives.push('public');
  }
  
  if (config.private) {
    directives.push('private');
  }
  
  if (config.noCache) {
    directives.push('no-cache');
  }
  
  if (config.noStore) {
    directives.push('no-store');
  }
  
  if (config.maxAge !== undefined) {
    directives.push(`max-age=${config.maxAge}`);
  }
  
  if (config.staleWhileRevalidate) {
    directives.push(`stale-while-revalidate=${config.staleWhileRevalidate}`);
  }
  
  if (config.staleIfError) {
    directives.push(`stale-if-error=${config.staleIfError}`);
  }
  
  if (config.mustRevalidate) {
    directives.push('must-revalidate');
  }
  
  if (config.proxyRevalidate) {
    directives.push('proxy-revalidate');
  }
  
  if (config.immutable) {
    directives.push('immutable');
  }
  
  if (config.noTransform) {
    directives.push('no-transform');
  }
  
  res.set('Cache-Control', directives.join(', '));
  
  // Set additional headers
  if (config.etag !== false) {
    res.set('ETag', generateETag(res));
  }
  
  if (config.lastModified !== false) {
    res.set('Last-Modified', new Date().toUTCString());
  }
  
  // Vary header for content negotiation
  if (config.vary) {
    res.set('Vary', config.vary);
  }
}

function generateETag(res) {
  // In production, this would generate based on content
  return `"${Date.now()}-${Math.random().toString(36).substr(2, 9)}"`;
}

// Advanced cache invalidation middleware
function createCacheInvalidationMiddleware() {
  return (req, res, next) => {
    const originalSend = res.send;
    
    res.send = function(data) {
      // Add cache tags for efficient invalidation
      if (res.statusCode === 200) {
        const cacheTags = generateCacheTags(req);
        if (cacheTags) {
          res.set('X-Cache-Tags', cacheTags.join(','));
        }
      }
      
      originalSend.call(this, data);
    };
    
    next();
  };
}

function generateCacheTags(req) {
  const tags = [];
  const url = req.url;
  
  // Add resource-specific tags
  if (url.startsWith('/api/products')) {
    tags.push('products');
    
    const productId = url.match(/\/api\/products\/(\d+)/)?.[1];
    if (productId) {
      tags.push(`product:${productId}`);
    }
  }
  
  if (url.startsWith('/api/users')) {
    tags.push('users');
  }
  
  // Add content type tags
  if (req.headers.accept?.includes('application/json')) {
    tags.push('type:json');
  }
  
  return tags;
}

// Cache warming endpoint
router.post('/warm-cache', async (req, res) => {
  const { urls, strategy = 'background' } = req.body;
  
  try {
    if (strategy === 'immediate') {
      // Warm cache immediately
      await warmCacheImmediately(urls);
      res.json({ success: true, warmed: urls.length });
    } else {
      // Warm cache in background
      warmCacheBackground(urls);
      res.json({ success: true, message: 'Cache warming started in background' });
    }
  } catch (error) {
    res.status(500).json({ error: 'Cache warming failed' });
  }
});

async function warmCacheImmediately(urls) {
  const results = [];
  
  for (const url of urls) {
    try {
      const response = await fetch(`http://localhost:3000${url}`);
      if (response.status === 200) {
        results.push({ url, status: 'success' });
      } else {
        results.push({ url, status: 'failed', error: response.status });
      }
    } catch (error) {
      results.push({ url, status: 'error', error: error.message });
    }
  }
  
  return results;
}

function warmCacheBackground(urls) {
  // Implement background cache warming
  setTimeout(async () => {
    console.log('Background cache warming started for', urls.length, 'URLs');
    await warmCacheImmediately(urls);
    console.log('Background cache warming completed');
  }, 1000);
}

module.exports = {
  createCacheMiddleware,
  createCacheInvalidationMiddleware,
  router
};

  

// cloudflare-worker.js - Advanced CDN Edge Caching
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const cacheKey = generateCacheKey(request);
    
    // Check if we should bypass cache
    if (shouldBypassCache(request)) {
      return fetch(request);
    }
    
    // Try to get from cache first
    let response = await getFromCache(cacheKey);
    
    if (!response) {
      // Cache miss - fetch from origin
      response = await fetch(request);
      
      // Cache successful responses
      if (response.status === 200) {
        await putInCache(cacheKey, response.clone());
      }
    } else {
      // Cache hit - background revalidation for stale content
      ctx.waitUntil(revalidateCache(request, cacheKey));
    }
    
    return response;
  }
};

// Generate sophisticated cache keys
function generateCacheKey(request) {
  const url = new URL(request.url);
  const keyParts = [];
  
  // Base URL
  keyParts.push(url.pathname);
  
  // Query parameters (selective)
  const cacheableParams = ['page', 'limit', 'sort', 'category'];
  const searchParams = new URLSearchParams(url.search);
  
  cacheableParams.forEach(param => {
    if (searchParams.has(param)) {
      keyParts.push(`${param}=${searchParams.get(param)}`);
    }
  });
  
  // User-specific caching (when appropriate)
  const userId = getUserIdFromRequest(request);
  if (userId && shouldCachePerUser(url.pathname)) {
    keyParts.push(`user=${userId}`);
  }
  
  // Content negotiation
  const accept = request.headers.get('accept');
  if (accept) {
    if (accept.includes('application/json')) {
      keyParts.push('type=json');
    } else if (accept.includes('text/html')) {
      keyParts.push('type=html');
    }
  }
  
  return keyParts.join('::');
}

// Smart cache bypass logic
function shouldBypassCache(request) {
  const url = new URL(request.url);
  
  // Never cache POST, PUT, DELETE requests
  if (['POST', 'PUT', 'DELETE'].includes(request.method)) {
    return true;
  }
  
  // Bypass cache for admin areas
  if (url.pathname.startsWith('/admin')) {
    return true;
  }
  
  // Bypass for authenticated user-specific content
  if (request.headers.get('authorization') && isPersonalizedContent(url.pathname)) {
    return true;
  }
  
  // Bypass cache based on query parameters
  const bypassParams = ['nocache', 'preview', 'debug'];
  const searchParams = new URLSearchParams(url.search);
  
  if (bypassParams.some(param => searchParams.has(param))) {
    return true;
  }
  
  return false;
}

// Cache storage with TTL
async function getFromCache(key) {
  const cache = caches.default;
  const cachedResponse = await cache.match(key);
  
  if (cachedResponse) {
    // Check if cache is stale but usable
    const age = cachedResponse.headers.get('age');
    const maxAge = cachedResponse.headers.get('cache-control')?.match(/max-age=(\d+)/)?.[1];
    
    if (age && maxAge && parseInt(age) < parseInt(maxAge)) {
      return cachedResponse;
    }
    
    // Stale but can serve while revalidating
    const staleWhileRevalidate = cachedResponse.headers.get('cache-control')?.match(/stale-while-revalidate=(\d+)/)?.[1];
    
    if (staleWhileRevalidate && parseInt(age) < (parseInt(maxAge) + parseInt(staleWhileRevalidate))) {
      return cachedResponse;
    }
  }
  
  return null;
}

async function putInCache(key, response) {
  const cache = caches.default;
  
  // Create a clone to avoid consuming the response
  const responseToCache = response.clone();
  
  // Determine TTL based on content type
  const ttl = getTTLForResponse(responseToCache);
  
  // Create new headers with cache control
  const headers = new Headers(responseToCache.headers);
  headers.set('cache-control', `public, max-age=${ttl}, stale-while-revalidate=3600`);
  headers.set('x-cache-key', key);
  
  const cachedResponse = new Response(responseToCache.body, {
    status: responseToCache.status,
    statusText: responseToCache.statusText,
    headers: headers
  });
  
  await cache.put(key, cachedResponse);
}

function getTTLForResponse(response) {
  const url = response.url;
  const contentType = response.headers.get('content-type');
  
  if (url.includes('/api/')) {
    if (url.includes('/api/products') || url.includes('/api/content')) {
      return 300; // 5 minutes for product data
    }
    return 60; // 1 minute for other APIs
  }
  
  if (contentType?.includes('text/html')) {
    return 60; // 1 minute for HTML
  }
  
  if (contentType?.includes('text/css') || contentType?.includes('application/javascript')) {
    return 86400; // 1 day for CSS/JS
  }
  
  if (contentType?.includes('image/')) {
    return 2592000; // 30 days for images
  }
  
  return 3600; // Default 1 hour
}

// Background cache revalidation
async function revalidateCache(request, cacheKey) {
  try {
    const freshResponse = await fetch(request);
    
    if (freshResponse.status === 200) {
      await putInCache(cacheKey, freshResponse);
      
      // If content changed significantly, warm related caches
      if (await contentChangedSignificantly(cacheKey, freshResponse)) {
        await warmRelatedCaches(request, freshResponse);
      }
    }
  } catch (error) {
    console.log('Background revalidation failed:', error);
  }
}

async function contentChangedSignificantly(oldKey, newResponse) {
  // Compare ETags or content hashes
  const oldResponse = await getFromCache(oldKey);
  
  if (!oldResponse) return true;
  
  const oldETag = oldResponse.headers.get('etag');
  const newETag = newResponse.headers.get('etag');
  
  return oldETag !== newETag;
}

async function warmRelatedCaches(request, response) {
  // Warm caches for related content
  const relatedUrls = await findRelatedUrls(request, response);
  
  for (const url of relatedUrls) {
    try {
      await fetch(url);
    } catch (error) {
      // Silent fail for cache warming
    }
  }
}

// Helper functions
function getUserIdFromRequest(request) {
  // Extract user ID from JWT or session
  const authHeader = request.headers.get('authorization');
  if (authHeader?.startsWith('Bearer ')) {
    const token = authHeader.substring(7);
    try {
      const payload = JSON.parse(atob(token.split('.')[1]));
      return payload.userId;
    } catch {
      return null;
    }
  }
  return null;
}

function shouldCachePerUser(pathname) {
  const userSpecificPaths = ['/api/profile', '/api/settings', '/api/notifications'];
  return userSpecificPaths.some(path => pathname.startsWith(path));
}

function isPersonalizedContent(pathname) {
  const personalizedPaths = ['/dashboard', '/profile', '/settings'];
  return personalizedPaths.some(path => pathname.startsWith(path));
}

async function findRelatedUrls(request, response) {
  const urls = [];
  const url = new URL(request.url);
  
  // For product pages, warm related product caches
  if (url.pathname.match(/\/products\/\d+/)) {
    urls.push('/api/related-products?category=electronics');
    urls.push('/api/products/trending');
  }
  
  // For blog posts, warm category and recent posts
  if (url.pathname.match(/\/blog\/\d+/)) {
    urls.push('/api/blog/categories');
    urls.push('/api/blog/recent');
  }
  
  return urls;
}