E-commerce Development in 2024: Platform Wars & Custom Solutions

Shopify:
  Basic Plan: $29/month = $348/year
  Transaction Fees: 2.9% + 30¢
  Apps (typical): $200/month = $2,400/year
  Theme: $300 one-time
  Total: ~$3,048 + transaction fees

WooCommerce:
  Hosting (managed): $300/year
  Premium Plugins: $500/year
  Theme: $200 one-time
  SSL Certificate: $100/year
  Development: $3,000 one-time
  Total: ~$4,100 first year

Custom Next.js:
  Development: $15,000-$30,000
  Hosting (Vercel Pro): $240/year
  Database (PlanetScale): $390/year
  Payment Processing: 2.9% + 30¢
  Total: ~$15,630-$30,630 first year

// Core Web Vitals comparison
const performanceData = {
  shopify: {
    LCP: '2.8s',
    FID: '145ms', 
    CLS: '0.15',
    lighthouse: 67
  },
  woocommerce: {
    LCP: '3.2s',
    FID: '180ms',
    CLS: '0.22', 
    lighthouse: 58
  },
  nextjs_custom: {
    LCP: '1.4s',
    FID: '45ms',
    CLS: '0.03',
    lighthouse: 95
  }
};

// pages/api/checkout.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { items, customerEmail } = req.body;

    // Calculate total amount
    const amount = items.reduce((total, item) => {
      return total + (item.price * item.quantity);
    }, 0);

    // Create payment intent
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount * 100, // Convert to cents
      currency: 'usd',
      receipt_email: customerEmail,
      metadata: {
        order_id: generateOrderId(),
        items: JSON.stringify(items)
      }
    });

    res.status(200).json({
      client_secret: paymentIntent.client_secret,
      amount: amount
    });
  } catch (error) {
    console.error('Payment error:', error);
    res.status(500).json({ error: 'Payment processing failed' });
  }
}

// contexts/CartContext.js
import { createContext, useContext, useReducer } from 'react';

const CartContext = createContext();

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      const existingItem = state.items.find(item => item.id === action.payload.id);

      if (existingItem) {
        return {
          ...state,
          items: state.items.map(item =>
            item.id === action.payload.id
              ? { ...item, quantity: item.quantity + 1 }
              : item
          )
        };
      }

      return {
        ...state,
        items: [...state.items, { ...action.payload, quantity: 1 }]
      };

    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload)
      };

    case 'UPDATE_QUANTITY':
      return {
        ...state,
        items: state.items.map(item =>
          item.id === action.payload.id
            ? { ...item, quantity: action.payload.quantity }
            : item
        )
      };

    case 'CLEAR_CART':
      return { ...state, items: [] };

    default:
      return state;
  }
};

export const CartProvider = ({ children }) => {
  const [cart, dispatch] = useReducer(cartReducer, { items: [] });

  const addItem = (product) => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  const removeItem = (productId) => {
    dispatch({ type: 'REMOVE_ITEM', payload: productId });
  };

  const updateQuantity = (productId, quantity) => {
    dispatch({ type: 'UPDATE_QUANTITY', payload: { id: productId, quantity } });
  };

  const clearCart = () => {
    dispatch({ type: 'CLEAR_CART' });
  };

  const getTotalPrice = () => {
    return cart.items.reduce((total, item) => {
      return total + (item.price * item.quantity);
    }, 0);
  };

  const getTotalItems = () => {
    return cart.items.reduce((total, item) => total + item.quantity, 0);
  };

  return (
    <CartContext.Provider value={{
      cart,
      addItem,
      removeItem,
      updateQuantity,
      clearCart,
      getTotalPrice,
      getTotalItems
    }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within CartProvider');
  }
  return context;
};

// components/ProductSearch.js
import { InstantSearch, SearchBox, Hits, RefinementList } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY
);

const ProductHit = ({ hit }) => (
  <div className="product-hit">
    <img src={hit.image} alt={hit.name} />
    <h3>{hit.name}</h3>
    <p className="price">${hit.price}</p>
    <button onClick={() => addToCart(hit)}>
      Add to Cart
    </button>
  </div>
);

const ProductSearch = () => {
  return (
    <InstantSearch 
      searchClient={searchClient} 
      indexName="products"
    >
      <div className="search-container">
        <SearchBox 
          placeholder="Search products..."
          className="search-box"
        />

        <div className="search-results">
          <div className="filters">
            <RefinementList attribute="category" />
            <RefinementList attribute="brand" />
            <RefinementList attribute="price_range" />
          </div>

          <div className="hits">
            <Hits hitComponent={ProductHit} />
          </div>
        </div>
      </div>
    </InstantSearch>
  );
};

// lib/payments.js
class PaymentProcessor {
  constructor() {
    this.stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
    this.paypal = require('@paypal/checkout-server-sdk');
  }

  async processStripePayment(paymentData) {
    try {
      const paymentIntent = await this.stripe.paymentIntents.create({
        amount: paymentData.amount * 100,
        currency: 'usd',
        customer: paymentData.customerId,
        metadata: paymentData.metadata
      });

      return {
        success: true,
        paymentIntent: paymentIntent.client_secret,
        provider: 'stripe'
      };
    } catch (error) {
      return { success: false, error: error.message };
    }
  }

  async processPayPalPayment(orderData) {
    const environment = process.env.NODE_ENV === 'production'
      ? new this.paypal.core.LiveEnvironment(
          process.env.PAYPAL_CLIENT_ID,
          process.env.PAYPAL_CLIENT_SECRET
        )
      : new this.paypal.core.SandboxEnvironment(
          process.env.PAYPAL_CLIENT_ID,
          process.env.PAYPAL_CLIENT_SECRET
        );

    const client = new this.paypal.core.PayPalHttpClient(environment);

    const request = new this.paypal.orders.OrdersCreateRequest();
    request.requestBody({
      intent: 'CAPTURE',
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: orderData.amount.toString()
        }
      }]
    });

    try {
      const response = await client.execute(request);
      return {
        success: true,
        orderId: response.result.id,
        provider: 'paypal'
      };
    } catch (error) {
      return { success: false, error: error.message };
    }
  }
}

// Usage in API route
export default async function handler(req, res) {
  const processor = new PaymentProcessor();
  const { method, paymentData } = req.body;

  let result;
  switch (method) {
    case 'stripe':
      result = await processor.processStripePayment(paymentData);
      break;
    case 'paypal':
      result = await processor.processPayPalPayment(paymentData);
      break;
    default:
      return res.status(400).json({ error: 'Unsupported payment method' });
  }

  res.status(result.success ? 200 : 400).json(result);
}

// lib/inventory.js
import { createClient } from 'redis';

class InventoryManager {
  constructor() {
    this.redis = createClient({
      url: process.env.REDIS_URL
    });
    this.redis.connect();
  }

  async checkStock(productId, quantity) {
    const stock = await this.redis.get(`stock:${productId}`);
    return parseInt(stock) >= quantity;
  }

  async reserveStock(productId, quantity, orderId) {
    const key = `stock:${productId}`;
    const reservationKey = `reservation:${orderId}:${productId}`;

    // Use Redis transaction for atomic operation
    const multi = this.redis.multi();
    multi.decrBy(key, quantity);
    multi.setEx(reservationKey, 900, quantity); // 15 min reservation

    const results = await multi.exec();

    if (results[0] < 0) {
      // Rollback if insufficient stock
      await this.redis.incrBy(key, quantity);
      await this.redis.del(reservationKey);
      return false;
    }

    return true;
  }

  async confirmPurchase(orderId, items) {
    // Remove reservations and update database
    for (const item of items) {
      const reservationKey = `reservation:${orderId}:${item.productId}`;
      await this.redis.del(reservationKey);

      // Update database stock
      await this.updateDatabaseStock(item.productId, -item.quantity);
    }
  }

  async cancelReservation(orderId, items) {
    // Return reserved stock
    for (const item of items) {
      const reservationKey = `reservation:${orderId}:${item.productId}`;
      const stockKey = `stock:${item.productId}`;

      const reserved = await this.redis.get(reservationKey);
      if (reserved) {
        await this.redis.incrBy(stockKey, parseInt(reserved));
        await this.redis.del(reservationKey);
      }
    }
  }
}

// API route for stock check
export default async function handler(req, res) {
  const inventory = new InventoryManager();
  const { productId, quantity } = req.body;

  const inStock = await inventory.checkStock(productId, quantity);

  res.status(200).json({ 
    inStock, 
    available: await inventory.redis.get(`stock:${productId}`) 
  });
}

// lib/orders.js
import { v4 as uuidv4 } from 'uuid';
import { sendEmail } from './email';

class OrderManager {
  async createOrder(customerData, items, paymentMethod) {
    const orderId = uuidv4();
    const inventory = new InventoryManager();

    try {
      // 1. Validate stock and reserve items
      for (const item of items) {
        const canReserve = await inventory.reserveStock(
          item.productId, 
          item.quantity, 
          orderId
        );

        if (!canReserve) {
          throw new Error(`Insufficient stock for ${item.name}`);
        }
      }

      // 2. Calculate totals
      const subtotal = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
      const tax = subtotal * 0.08; // 8% tax
      const shipping = subtotal > 100 ? 0 : 10; // Free shipping over $100
      const total = subtotal + tax + shipping;

      // 3. Create order record
      const order = {
        id: orderId,
        customerId: customerData.id,
        customerEmail: customerData.email,
        items: items,
        subtotal: subtotal,
        tax: tax,
        shipping: shipping,
        total: total,
        status: 'pending',
        paymentMethod: paymentMethod,
        createdAt: new Date(),
        shippingAddress: customerData.shippingAddress
      };

      await this.saveOrder(order);

      // 4. Process payment
      const paymentResult = await this.processPayment(order, paymentMethod);

      if (!paymentResult.success) {
        await inventory.cancelReservation(orderId, items);
        throw new Error('Payment processing failed');
      }

      // 5. Confirm purchase and update stock
      await inventory.confirmPurchase(orderId, items);

      // 6. Update order status
      await this.updateOrderStatus(orderId, 'confirmed');

      // 7. Send confirmation email
      await this.sendOrderConfirmation(order);

      return { success: true, orderId: orderId, order: order };

    } catch (error) {
      // Cleanup on error
      await inventory.cancelReservation(orderId, items);
      throw error;
    }
  }

  async updateOrderStatus(orderId, status, trackingNumber = null) {
    const updates = { status, updatedAt: new Date() };
    if (trackingNumber) updates.trackingNumber = trackingNumber;

    await db.order.update({
      where: { id: orderId },
      data: updates
    });

    // Send status update email
    const order = await this.getOrder(orderId);
    await this.sendStatusUpdate(order, status);
  }

  async sendOrderConfirmation(order) {
    const emailTemplate = `
      <h2>Order Confirmation #${order.id}</h2>
      <p>Thank you for your order!</p>

      <h3>Order Details:</h3>
      <ul>
        ${order.items.map(item => `
          <li>${item.name} - Quantity: ${item.quantity} - $${item.price}</li>
        `).join('')}
      </ul>

      <p><strong>Total: $${order.total}</strong></p>
      <p>Estimated delivery: 3-5 business days</p>
    `;

    await sendEmail({
      to: order.customerEmail,
      subject: `Order Confirmation #${order.id}`,
      html: emailTemplate
    });
  }
}

// lib/recommendations.js
class RecommendationEngine {
  async getProductRecommendations(userId, productId, type = 'similar') {
    switch (type) {
      case 'similar':
        return await this.getSimilarProducts(productId);
      case 'frequently_bought':
        return await this.getFrequentlyBoughtTogether(productId);
      case 'personalized':
        return await this.getPersonalizedRecommendations(userId);
      default:
        return [];
    }
  }

  async getSimilarProducts(productId) {
    // Use product attributes for similarity
    const product = await db.product.findUnique({
      where: { id: productId },
      include: { categories: true, tags: true }
    });

    const similarProducts = await db.product.findMany({
      where: {
        AND: [
          { id: { not: productId } },
          {
            OR: [
              { categories: { some: { id: { in: product.categories.map(c => c.id) } } } },
              { tags: { some: { id: { in: product.tags.map(t => t.id) } } } }
            ]
          }
        ]
      },
      take: 6,
      orderBy: { views: 'desc' }
    });

    return similarProducts;
  }

  async getFrequentlyBoughtTogether(productId) {
    // Analyze order history for frequently bought together items
    const frequentPairs = await db.$queryRaw`
      SELECT 
        oi2.product_id,
        COUNT(*) as frequency,
        p.name,
        p.price,
        p.image
      FROM order_items oi1
      JOIN order_items oi2 ON oi1.order_id = oi2.order_id
      JOIN products p ON oi2.product_id = p.id
      WHERE oi1.product_id = ${productId}
        AND oi2.product_id != ${productId}
      GROUP BY oi2.product_id, p.name, p.price, p.image
      ORDER BY frequency DESC
      LIMIT 4
    `;

    return frequentPairs;
  }

  async getPersonalizedRecommendations(userId) {
    // Simple collaborative filtering
    const userOrders = await db.order.findMany({
      where: { customerId: userId },
      include: { items: { include: { product: true } } }
    });

    const purchasedCategories = new Set();
    userOrders.forEach(order => {
      order.items.forEach(item => {
        item.product.categoryIds.forEach(catId => {
          purchasedCategories.add(catId);
        });
      });
    });

    const recommendations = await db.product.findMany({
      where: {
        categories: { some: { id: { in: Array.from(purchasedCategories) } } },
        orders: { none: { customerId: userId } } // Not yet purchased
      },
      orderBy: { rating: 'desc' },
      take: 8
    });

    return recommendations;
  }
}

// React component for recommendations
const ProductRecommendations = ({ productId, userId, type = 'similar' }) => {
  const [recommendations, setRecommendations] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchRecommendations = async () => {
      try {
        const response = await fetch('/api/recommendations', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ productId, userId, type })
        });

        const data = await response.json();
        setRecommendations(data.recommendations);
      } catch (error) {
        console.error('Failed to load recommendations:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchRecommendations();
  }, [productId, userId, type]);

  if (loading) return <div>Loading recommendations...</div>;

  return (
    <div className="recommendations">
      <h3>
        {type === 'similar' && 'Similar Products'}
        {type === 'frequently_bought' && 'Frequently Bought Together'}
        {type === 'personalized' && 'Recommended For You'}
      </h3>

      <div className="products-grid">
        {recommendations.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

// lib/database.js
class DatabaseOptimizer {
  // Use database indexes for better performance
  async createOptimalIndexes() {
    await db.$executeRaw`
      CREATE INDEX IF NOT EXISTS idx_products_category_price 
      ON products(category_id, price);

      CREATE INDEX IF NOT EXISTS idx_orders_customer_date 
      ON orders(customer_id, created_at);

      CREATE INDEX IF NOT EXISTS idx_order_items_product 
      ON order_items(product_id);
    `;
  }

  // Efficient product search with full-text search
  async searchProducts(query, filters = {}) {
    const { category, minPrice, maxPrice, inStock } = filters;

    const products = await db.product.findMany({
      where: {
        AND: [
          // Full-text search
          query ? {
            OR: [
              { name: { contains: query, mode: 'insensitive' } },
              { description: { contains: query, mode: 'insensitive' } },
              { tags: { some: { name: { contains: query, mode: 'insensitive' } } } }
            ]
          } : {},

          // Filters
          category ? { categoryId: category } : {},
          minPrice ? { price: { gte: minPrice } } : {},
          maxPrice ? { price: { lte: maxPrice } } : {},
          inStock ? { stock: { gt: 0 } } : {}
        ]
      },
      include: {
        category: true,
        images: true,
        reviews: {
          select: { rating: true }
        }
      },
      orderBy: [
        { featured: 'desc' },
        { rating: 'desc' },
        { createdAt: 'desc' }
      ]
    });

    // Calculate average rating
    return products.map(product => ({
      ...product,
      averageRating: product.reviews.length > 0
        ? product.reviews.reduce((sum, review) => sum + review.rating, 0) / product.reviews.length
        : 0
    }));
  }

  // Efficient order history with pagination
  async getOrderHistory(customerId, page = 1, limit = 10) {
    const skip = (page - 1) * limit;

    const [orders, totalCount] = await Promise.all([
      db.order.findMany({
        where: { customerId },
        include: {
          items: {
            include: { product: { select: { name: true, image: true } } }
          }
        },
        orderBy: { createdAt: 'desc' },
        skip,
        take: limit
      }),
      db.order.count({ where: { customerId } })
    ]);

    return {
      orders,
      pagination: {
        page,
        limit,
        total: totalCount,
        pages: Math.ceil(totalCount / limit)
      }
    };
  }
}

// next.config.js
module.exports = {
  images: {
    domains: ['your-cdn.com'],
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },

  webpack: (config) => {
    // Optimize bundle size
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    };

    return config;
  }
};

// components/OptimizedImage.js
import Image from 'next/image';
import { useState } from 'react';

const OptimizedImage = ({ src, alt, width, height, ...props }) => {
  const [loading, setLoading] = useState(true);

  return (
    <div className="image-container">
      {loading && (
        <div className="image-placeholder" style={{ width, height }}>
          <div className="shimmer"></div>
        </div>
      )}

      <Image
        src={src}
        alt={alt}
        width={width}
        height={height}
        onLoadingComplete={() => setLoading(false)}
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        {...props}
      />
    </div>
  );
};

// lib/analytics.js
class EcommerceAnalytics {
  trackPurchase(orderData) {
    // Google Analytics 4
    gtag('event', 'purchase', {
      transaction_id: orderData.id,
      value: orderData.total,
      currency: 'USD',
      items: orderData.items.map(item => ({
        item_id: item.productId,
        item_name: item.name,
        category: item.category,
        quantity: item.quantity,
        price: item.price
      }))
    });

    // Facebook Pixel
    fbq('track', 'Purchase', {
      value: orderData.total,
      currency: 'USD',
      contents: orderData.items.map(item => ({
        id: item.productId,
        quantity: item.quantity
      })),
      content_type: 'product'
    });
  }

  trackAddToCart(product, quantity) {
    gtag('event', 'add_to_cart', {
      currency: 'USD',
      value: product.price * quantity,
      items: [{
        item_id: product.id,
        item_name: product.name,
        category: product.category,
        quantity: quantity,
        price: product.price
      }]
    });

    fbq('track', 'AddToCart', {
      value: product.price * quantity,
      currency: 'USD',
      content_ids: [product.id],
      content_type: 'product'
    });
  }

  trackViewProduct(product) {
    gtag('event', 'view_item', {
      currency: 'USD',
      value: product.price,
      items: [{
        item_id: product.id,
        item_name: product.name,
        category: product.category,
        price: product.price
      }]
    });

    fbq('track', 'ViewContent', {
      value: product.price,
      currency: 'USD',
      content_ids: [product.id],
      content_type: 'product'
    });
  }
}

// React hook for tracking
const useEcommerceTracking = () => {
  const analytics = new EcommerceAnalytics();

  return {
    trackPurchase: analytics.trackPurchase,
    trackAddToCart: analytics.trackAddToCart,
    trackViewProduct: analytics.trackViewProduct
  };
};

const migrationResults = {
  before: {
    platform: 'WooCommerce',
    monthlyRevenue: '$45,000',
    conversionRate: '2.1%',
    pageLoadTime: '4.2s',
    monthlyVisitors: '25,000'
  },
  after: {
    platform: 'Custom Next.js',
    monthlyRevenue: '$78,000',
    conversionRate: '4.7%',
    pageLoadTime: '1.4s',
    monthlyVisitors: '42,000'
  },
  improvements: {
    revenue: '+73%',
    conversion: '+124%',
    performance: '+67%',
    traffic: '+68%'
  }
};

// AI Product Description Generator
const generateProductDescription = async (productData) => {
  const response = await openai.createCompletion({
    model: "text-davinci-003",
    prompt: `Write a compelling product description for:
    Product: ${productData.name}
    Category: ${productData.category}
    Features: ${productData.features.join(', ')}
    Target audience: ${productData.targetAudience}

    Description:`,
    max_tokens: 200,
    temperature: 0.7
  });

  return response.data.choices[0].text.trim();
};

// AI-Powered Chatbot
const handleCustomerQuery = async (query, context) => {
  const response = await openai.createCompletion({
    model: "text-davinci-003",
    prompt: `You are a helpful e-commerce assistant. Answer this customer query:

    Query: ${query}
    Context: ${context}

    Response:`,
    max_tokens: 150,
    temperature: 0.5
  });

  return response.data.choices[0].text.trim();
};