Ritual Cosmético & Nucleofi Stack

System Overview

The Nucleofi system is a modern, decoupled e-commerce architecture connecting a dynamic React 19 frontend application (bundled with Vite 6 and hosted on Vercel) with Shopify's backend via the Storefront API (GraphQL).

This solution bypasses the heavy web component scripts default to Shopify, breathing life into a completely independent shopping cart and catalog, achieving maximum rendering speed and improved SEO indexing.

Architectural Features

• Modern Framework: React 19 and Vite 6 for ultra-fast bundling and instant HMR in development.
• Real URL Routing: Smooth navigation powered by React Router v7 with clean URLs and no hashtags.
• Technical Dynamic SEO: Synchronous, client-side updates of page titles and meta-descriptions adapted directly from Shopify catalog.
• Independent Cart: Native local state React cart that spawns checkout sessions instantly through GraphQL mutations.

GraphQL Product Querying

To populate the product catalog securely and quickly, we perform direct queries asking only for the required performance data, enforcing the base variant fetch to prevent checkout failures.

const query = `{
  products(first: 20) {
    edges {
      node {
        id
        handle        // Usado para la URL dinámica
        title
        description
        featuredImage { url }
        variants(first: 1) {
          edges {
            node {
              id      // ¡OBLIGATORIO! ID global de la variante
              price { amount currencyCode }
            }
          }
        }
      }
    }
  }
}`;

Dynamic Checkout Flow

When a customer proceeds to checkout, instead of relying on heavy Shopify script injection, the local cart state is gathered and mutated directly. The user is instantly redirected to the secure, high-availability checkout page hosted by Shopify.

const mutation = `
  mutation {
    cartCreate(input: { lines: [${lines}] }) {
      cart { checkoutUrl }
      userErrors { message }
    }
  }
}`;

// Redirección directa al checkout
window.location.href = data.data.cartCreate.cart.checkoutUrl;