Quintal
Catálogo digital con carrito interactivo para distribuidor de frutos secos premium. Buenos Aires, Argentina.
Selector de gramaje con precio dinámico, filtros por categoría y generación automática del pedido como mensaje de WhatsApp. Sin registro, sin checkout tradicional.
Demo en Vercel
🌰
Quintal
Frutos secos premium · Buenos Aires
11
Productos
9
Categorías
3
Componentes
ninguno
Backend
Catálogo · Desktop
Grid de productos con selector de gramaje
Carrito · Checkout
Carrito lateral con checkout WhatsApp
Quintal es un distribuidor de frutos secos premium que opera principalmente a través de WhatsApp, llamadas y listas de precios por imagen. El proceso de venta era completamente manual: el cliente contactaba, el vendedor respondía con precios, el cliente aclaraba cantidades y gramajes, y recién ahí se confirmaba el pedido.
En productos que se venden por peso (250g, 500g, 1kg), esto generaba fricción constante y errores frecuentes. No había ningún punto donde el cliente pudiera ver el catálogo completo, comparar productos o calcular el precio exacto antes de escribir.
El resultado era tiempo perdido en la pre-venta, pedidos mal tomados, y una imagen inconsistente con la calidad premium del producto.
Lo que lo hace diferente
💬
WhatsApp como canal de checkout
Al confirmar el pedido, se genera un mensaje pre-formateado con nombre, gramaje, cantidad y total de cada ítem. Se abre directamente en WhatsApp con el número del negocio pre-cargado. El cliente solo presiona enviar — sin formularios, sin pago online.
⚖️
Precio calculado en el frontend
Solo se almacena pricePerKg por producto. El precio para cada presentación se calcula en tiempo real: Math.round(pricePerKg × gramaje.factor). Un solo valor a actualizar por producto, lógica explícita y legible.
🛒
Carrito con clave compuesta por gramaje
Una nuez en 250g y la misma nuez en 500g son dos ítems independientes en el carrito. La clave productId-gramaje permite manejar esto sin colisiones. El carrito es claro y flexible sin lógica adicional.
🔍
Filtrado combinado y memoizado
El catálogo filtra simultáneamente por categoría y texto libre (nombre y descripción). El filtrado es instantáneo — memoizado con useMemo para evitar recómputos innecesarios en cada render.
🖼️
Fallback visual de imágenes
Cada producto tiene un emoji y un gradiente de color como respaldo. Si la imagen externa falla, la card no se rompe: muestra el gradiente con el emoji centrado. La experiencia visual se mantiene consistente siempre.
🎨
Design system custom con Tailwind
Paleta personalizada en tailwind.config: familias cream (beige cálido), olive (verde apagado) y wood (marrón tierra) más tipografía serif para headings. Coherencia visual de marca sin salir del sistema de clases de Tailwind.
Stack
Frontend
Herramientas
Deploy