Buyr — App para Shopify

Buyr es una app pública de Shopify que permite a los compradores fijar su propio precio o negociar con un agente de IA — capturando pedidos que de otro modo se perderían al precio completo. Los merchants configuran umbrales de rentabilidad; Buyr gestiona la negociación automáticamente.

Fui convocado para resolver un problema de animación que nadie en el equipo había abordado antes, y terminé contribuyendo en ambos lados del producto: la experiencia del storefront que ven los compradores y el panel de administración de merchants. Trabajando con un equipo distribuido entre Brasil y Estados Unidos, entregamos el MVP en un plazo fijo, seguido de una fase de mejoras post-MVP.

Las Restricciones

La app se ejecuta integrada dentro de cualquier tema de storefront de Shopify — sin control sobre el CSS, el entorno JavaScript o la estructura de componentes del host. Un merchant con un tema minimalista y otro con un tema de marca personalizado podrían romper el mismo widget de formas silenciosas y distintas.

Además, los propios criterios de aceptación de Shopify imponen umbrales de rendimiento estrictos que la app debía cumplir para mantenerse en la App Store. El rendimiento no era opcional — era un requisito de aprobación.

El widget del storefront — entrada de precio interactiva con chat de negociación por IA.

Storefront

Reconstruyendo el sistema de animaciones

El widget del storefront tenía un sistema de animaciones — pero solo como JavaScript vanilla compilado, sin código fuente legible. Realicé ingeniería inversa del comportamiento visualmente y lo reconstruí desde cero usando Framer Motion, convirtiéndolo en un sistema orientado a estados conectado al ciclo de vida de las ofertas:

• Idle — círculos animados en segundo plano mientras el comprador navega
• En progreso — animación activa mientras se crea la oferta
• Éxito — explosión de confeti con un círculo de verificación amarillo
• Oferta existente — estado de animación distinto para compradores que regresan

El estado se gestionó mediante React Context API, fluyendo por todo el árbol de componentes del storefront.

Resolviendo el aislamiento de CSS con Shadow DOM

Al probar en distintos temas de Shopify, descubrí que el CSS de los merchants se filtraba al widget y rompía el diseño de formas impredecibles. Investigué la causa raíz, identifiqué Shadow DOM como el límite correcto y lo implementé para aislar completamente los estilos de la app de lo que hiciera el storefront anfitrión. Esto no era un requisito — fue una decisión que tomé tras diagnosticar el problema.

Mejoras de rendimiento

Cumplir los requisitos de rendimiento de la App Store de Shopify significó tratar el rendimiento como un entregable, no como un detalle. Estudié apps comparables en la tienda, rastreé métricas en una hoja de cálculo e impulsé las siguientes mejoras:

• Renderizado bajo demanda — montar el widget solo cuando realmente se necesita
• Eliminación de código muerto — eliminación de dependencias no utilizadas y ramas inalcanzables
• Simplificación del flujo de oferta — reducción de pasos y profundidad de componentes en el camino crítico
• Refactorización — reemplazo de bucles ineficientes, hooks sobre-diseñados y mal uso del estado global

Administración de Merchants

Gestión de ofertas en tiempo real — los merchants ven y actúan sobre las ofertas entrantes a medida que llegan.

En el lado de los merchants, construí tres pantallas usando Shopify Polaris:

• Flujo de aceptación de ofertas — implementación pixel-perfect de cómo los merchants revisan y aceptan las ofertas entrantes
• Pantalla de analytics — panel que da a los merchants visibilidad sobre las ofertas recibidas vs. aceptadas a lo largo del tiempo
• Pantalla de onboarding / bienvenida — experiencia guiada de configuración para merchants que instalan la app por primera vez

Modelos de precios personalizados — los merchants definen umbrales y reglas de descuento por producto.

Aspectos Técnicos Destacados

• Monorepo con npm workspaces — storefront (Vite + Tailwind) y admin de merchants (Shopify Polaris) como apps completamente separadas
• Framer Motion — sistema de animación con múltiples estados y coreografía, impulsado por React Context API
• Shadow DOM — aislamiento de CSS en entornos de storefront impredecibles
• Shopify App Bridge, Theme App Extensions y Storefront API — aprendidos y aplicados íntegramente en ambos contextos
• Entrega en plazo fijo con una fase estructurada de mejoras post-MVP

Tecnologías

• React — widget del storefront y UI del admin de merchants; estado gestionado via Context API en ambas apps
• Framer Motion — sistema de animación con múltiples estados para el ciclo de vida de las ofertas (idle, en progreso, éxito, oferta existente)
• Shopify Polaris — biblioteca de componentes para las tres pantallas del admin de merchants
• Tailwind CSS — estilos del widget del storefront, encapsulados dentro del Shadow DOM
• Vite — bundler del storefront; clave para las optimizaciones de performance que cumplieron los requisitos de la App Store
• Shopify App Bridge — gestión de sesión e integración con el admin de Shopify
• Theme App Extensions — mecanismo de entrega del widget del storefront en los temas de los merchants
• Storefront API — acceso a datos de productos y carrito de Shopify
• TypeScript — tipado estático en ambas apps
• npm workspaces — monorepo manteniendo storefront y admin como paquetes separados