[Case Study] Veloryc E-Commerce Operations System

+-----------------------------------------------------------------------------------+
|                        VELORYC SYSTEM ARCHITECTURE                                |
+-----------------------------------------------------------------------------------+
|                                                                                   |
|  [ Client Browser ] <==== (18ms TTFB / HTTP/3) ====> [ Vercel Edge CDN ]          |
|         |                                                   |                     |
|         | Pure CSS Modules                                  | Server Actions      |
|         | (Zero Runtime JS)                                 | & Data Fetching     |
|         v                                                   v                     |
|  +---------------------+                             +-------------------------+  |
|  | Hardware-Accelerated|                             | Next.js 15 App Router   |  |
|  | CSS Transforms      |                             | (React Server Component)|  |
|  +---------------------+                             +-------------------------+  |
|                                                                  |                |
|                                                     Postgres RLS | Signed JWT     |
|                                                                  v                |
|                                                      +-------------------------+  |
|                                                      | Supabase PostgreSQL DB  |  |
|                                                      | - profiles / orders     |  |
|                                                      | - FOR UPDATE row locks  |  |
|                                                      | - Realtime Stock Alerts |  |
|                                                      +-------------------------+  |
|                                                                  |                |
|                                                     Database     | Database       |
|                                                     Webhook      | Trigger        |
|                                                                  v                |
|                                                      +-------------------------+  |
|                                                      | Self-Hosted n8n Ops     |  |
|                                                      | - Telegram low stock    |  |
|                                                      | - Brevo receipt dispatch|  |
|                                                      +-------------------------+  |
+-----------------------------------------------------------------------------------+

/* Example from SkinQuiz.module.css */
.quizContainer {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(18, 18, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transform: translateZ(0); /* Hardware GPU layer promotion */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.stickyAtcButton {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--color-accent-gold);
  color: var(--color-surface-dark);
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

-- 1. Enable RLS across transaction tables
ALTER TABLE public.orders ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.order_items ENABLE ROW LEVEL SECURITY;

-- 2. Customer policy: Users can only select their own order records
CREATE POLICY "Users can view own orders" 
ON public.orders FOR SELECT 
TO authenticated
USING (auth.uid() = user_id);

-- 3. Customer profile policy: Strict identity isolation
CREATE POLICY "Users can update own profile" 
ON public.profiles FOR UPDATE 
TO authenticated
USING (auth.uid() = id)
WITH CHECK (auth.uid() = id);

-- 4. Admin override: Service role key bypasses customer restrictions
CREATE POLICY "Service role full access" 
ON public.orders FOR ALL 
TO service_role
USING (true)
WITH CHECK (true);

CREATE OR REPLACE FUNCTION process_atomic_order(
  p_user_id UUID,
  p_items JSONB, -- Array of [{ product_id: UUID, quantity: INT }]
  p_total_amount NUMERIC
) RETURNS UUID AS $$
DECLARE
  v_order_id UUID;
  v_item RECORD;
  v_current_stock INT;
BEGIN
  -- Create the master order record
  INSERT INTO public.orders (user_id, total_amount, status)
  VALUES (p_user_id, p_total_amount, 'pending')
  RETURNING id INTO v_order_id;

  -- Iterate through items and lock stock rows exclusively
  FOR v_item IN SELECT * FROM jsonb_to_recordset(p_items) AS x(product_id UUID, quantity INT)
  LOOP
    -- Lock the specific product row to block concurrent checkout mutations
    SELECT stock_quantity INTO v_current_stock
    FROM public.products
    WHERE id = v_item.product_id
    FOR UPDATE;

    IF v_current_stock < v_item.quantity THEN
      RAISE EXCEPTION 'Insufficient stock for product ID % (Available: %, Requested: %)', 
        v_item.product_id, v_current_stock, v_item.quantity;
    END IF;

    -- Decrement stock atomically
    UPDATE public.products
    SET stock_quantity = stock_quantity - v_item.quantity,
        updated_at = NOW()
    WHERE id = v_item.product_id;

    -- Insert order item record
    INSERT INTO public.order_items (order_id, product_id, quantity)
    VALUES (v_order_id, v_item.product_id, v_item.quantity);
  END LOOP;

  RETURN v_order_id;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

// Next.js 15 Server Action for Instant Admin Price & Inventory Updates
'use server';

import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { revalidateTag } from 'next/cache';

export async function updateProductInventory(productId, newPriceCents, newStock) {
  const supabase = createServerActionClient({ cookies });
  
  // Verify administrator privilege
  const { data: { session } } = await supabase.auth.getSession();
  if (!session) throw new Error('Unauthorized');

  const { data: profile } = await supabase
    .from('profiles')
    .select('is_admin')
    .eq('id', session.user.id)
    .single();

  if (!profile?.is_admin) throw new Error('Forbidden: Admin access required');

  const { error } = await supabase
    .from('products')
    .update({ 
      price_cents: newPriceCents, 
      stock_quantity: newStock,
      updated_at: new Date().toISOString() 
    })
    .eq('id', productId);

  if (error) throw new Error(error.message);

  // Invalidate Next.js edge cache tags immediately
  revalidateTag('products');
  revalidateTag(`product-${productId}`);

  return { success: true };
}

-- Automatically attach guest orders to newly registered customer accounts
CREATE OR REPLACE FUNCTION link_guest_orders_on_signup()
RETURNS TRIGGER AS $$
BEGIN
  UPDATE public.orders
  SET user_id = NEW.id
  WHERE customer_email = NEW.email
    AND user_id IS NULL;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE PROCEDURE link_guest_orders_on_signup();