Ayari

La motivación principal para realizar este proyecto surgió del gusto por la marca y del interés en llevar a cabo un rediseño web completo que elevara la percepción de calidad de sus productos.

Durante la etapa de análisis se identificó una carencia clave en su plataforma original: la ausencia de una sección dedicada exclusivamente a los muebles a medida. Aunque la marca ofrece servicios de fabricación personalizada, su sitio no contaba con una página específica para este fin, lo que dificultaba que los usuarios interesados en proyectos personalizados pudieran encontrarlos o que la oferta estuviera optimizada para motores de búsqueda (SEO).

Diseñé la arquitectura de un ecommerce autogestionado con un BFF (Backend-for-Frontend) conectado a un Headless CMS, asegurando rendimiento, tipado estricto e integridad de datos:

• Next.js App Router y Server Actions: La lógica de negocio y el renderizado se procesan en el servidor, utilizando el cliente únicamente para estados interactivos volátiles.
• Gestión de Contenidos (Strapi): Implementación de Strapi como Headless CMS para modelar de forma flexible el catálogo de mobiliario, variantes de materiales, medidas, secciones dinámicas de la tienda y conjuntos de muebles (sets).
• Política Zero-Trust en Pagos (Mercado Pago SDK): Para prevenir manipulaciones de precios desde el cliente, el checkout no acepta montos del frontend. Los Server Actions consultan directamente la base de datos de Strapi, validan el stock disponible y generan la preferencia de pago segura del lado del servidor antes de redirigir a la pasarela.
• Cotizador Logístico Volumétrico (OCA XML/SOAP API): Integración con la API de OCA utilizando fast-xml-parser para consultar tarifas y sucursales habilitadas. La lógica calcula el peso volumétrico (ancho x alto x profundidad / coeficiente) y compara contra el peso real para enviar siempre la cifra mayor exigida por la logística.
• Estado Cliente Híbrido (Zustand & Zod): Persistencia ligera del carrito y la lista de deseos almacenando únicamente los identificadores en el almacenamiento local, delegando la hidratación y validación de esquemas en el servidor mediante Zod.

Para la presentación visual y la ambientación estética del e-commerce se trabajó en la digitalización y refinamiento de sus recursos gráficos:

• Diseño de Interfaz: Se concibió una interfaz moderna, limpia y minimalista que prioriza la exhibición del mobiliario.
• Recreación Vectorial (Ver Isotipo): El logo original de la marca se encontraba únicamente en formato rasterizado (PNG), por lo que fue vectorizado manualmente en SVG para garantizar una resolución nítida y permitir su uso flexible en distintas escalas y componentes de la aplicación.
• Patrón Estético (Ver Patrón): A partir de la síntesis del isotipo (la 'A' representativa de Ayari), se diseñó un patrón repetitivo utilizado como recurso visual de fondo para vestir secciones destacadas de la plataforma, como la sección de ADN de la marca.