Vándalos Coffee

Descripción general del Proyecto

En esta ocasión, el reto consistía en desarrollar un e-commerce para la marca de café de especialidad Vándalos Coffee. Una marca premium que necesitaba potenciar su presencia en internet y vender sus productos (café, infusiones y accesorios) a través de su propia web.

Este proyecto ha sido bastante divertido, ya que he combinado diferentes tecnologías de Frontend con la Storefront API de Shopify. Por lo tanto, una de las claves del proyecto es que he utilizado Shopify como Headless. Además, he implementado GraphQL, una tecnología que no había usado antes en profundidad y que ha sido muy interesante aplicar.

Primeras decisiones

El objetivo principal ha sido desde un primer momento crear un diseño web que represente a la marca de café de especialidad Vándalos Coffee.

Más allá de la parte visual, que es lo que ve el usuario y es fundamental, como desarrollador tuve que decidir qué tecnología era la más adecuada para este caso. Después de plantear varios escenarios, como podía ser crear un tema a medida en WordPress con WooCommerce, me pregunté: ¿y por qué no Astro?

La decisión de apostar por Astro la empujaba el reto de conseguir el mejor rendimiento posible en su web, teniendo en cuenta que de este modo puedo generar contenido estático en producción. Para todo lo que tiene que ver con el carrito y la pasarela de pagos, Shopify sería el motor encargado. Aunque podría haber elegido WordPress como Headless, la API de WooCommerce no era en este caso la mejor opción. Además, la API de Shopify funciona a la perfección, integrándose sin problemas independientemente de la tecnología usada en el Frontend.

Por otro lado, aunque normalmente se asocia Shopify Headless con React o el desarrollo nativo con Liquid, la combinación de Astro con Vue es fantástica para un negocio que está empezando. Esta elección permite generar mucho contenido estático, que es ideal para el posicionamiento SEO, además de conseguir un rendimiento óptimo; aspectos que considero fundamentales para la experiencia de usuario. Finalmente, la apuesta por el paradigma del Static Site Generation (SSG) tiene también un componente fundamental para mí: la seguridad. Al servir archivos estáticos, reducimos drásticamente la superficie de ataque, protegiendo el sitio frente a vulnerabilidades comunes en servidores dinámicos.

Pensando en la parte visual, el diseño

Teniendo en cuenta que su branding es espectacular y que su logo tiene un guiño a los dibujos animados de los años 30, he querido aplicar un diseño que combine la agilidad y los conceptos de un e-commerce moderno con la estética que la propia marca tiene en su packaging.

En base a esta idea, el trabajo que he aplicado combina conceptos de diseño web moderno como el famoso “bento grid”, combinado con texturas para generar un aspecto vintage. La paleta de colores ha sido definida con cuidado y en base a la marca, y la elección tipográfica también refuerza todo el concepto visual. Todo ello maquetado desde cero utilizando Vanilla CSS, sin depender de frameworks para los estilos.

Quiero añadir en este punto que el diseñador Mr John Vanilla, el cual ha sido el diseñador del branding de Vándalos Coffee me facilitó todo el material visual que necesitaba, además de compartir algunos wireframes en Figma con diferentes propuestas para algunos componentes que al final hemos utilizado en el diseño final.

Retos técnicos y Soluciones Avanzadas

Este proyecto no se basaba solo en mostrar productos; la arquitectura se ha diseñado para ofrecer una experiencia de usuario (UX) fluida y robusta:

• Gestión de Estado en Arquitectura MPA: Aunque Astro funciona por defecto como una Multi-Page Application, quería mantener el espíritu y la fluidez de una SPA moderna. Implementé un Sidecart (carrito lateral) que evita recargas innecesarias y gestioné el estado global con Nano Stores. Esto permite persistencia entre navegaciones y una interacción inmediata.
• Astro Actions y Server Defer: Para la lógica de negocio, evité crear endpoints manuales. Utilicé Astro Actions para conectar con la API de Shopify. Un punto clave fue el uso de Server Defer para consultar el stock en tiempo real antes de permitir la compra. Así evité frustrar al usuario intentando añadir productos agotados, mejorando la UX proactivamente.
• Integraciones y Optimización:
  • Data Fetching: Uso Fetch nativo porque se integra de forma natural con Cloudflare, la plataforma donde he centralizado todo mi Frontend para obtener la mayor seguridad posible. Soy consciente de que en el proceso de build bajo Node.js usar Axios no daría problemas, pero al trabajar bajo demanda en el runtime con variables de entorno y funciones en el Edge, prefiero no depender de librerías externas. Además esto normalmente genera bastantes frustraciones cuando no conoces bien cómo funciona Cloudflare. Por este motivo, conocer la plataforma de despliegue es vital; por eso elegí Cloudflare por encima de opciones más dev-friendly como Vercel o Netlify. Aunque estas últimas simplifican el flujo de trabajo, en mi opinión, la seguridad que ofrece Cloudflare a día de hoy es incuestionable. Finalmente, combiné el uso de fetch con GraphQL para conectar con la API de Shopify, extrayendo solo la data estrictamente necesaria y reduciendo al mínimo la carga útil.
  • Marketing: Conexión con Brevo y Klaviyo para estrategias de mailing y recuperación de carritos.
  • UI/UX Moderno: Scroll suave con Lenis, reproductor de vídeo con Plyr, notificaciones no intrusivas con Notyf y detalles visuales como Canvas Confetti para celebrar interacciones.
  • Performance: Implementación de debounce (Lodash) al añadir al carrito para evitar saturar la API y optimización SEO completa (imágenes, metadatos).

Resultados

El resultado es una web desplegada en el Edge de Cloudflare, con dominio de correo propio configurado y un diseño totalmente personalizado que carga al instante. He logrado un e-commerce que se siente artesanal en su diseño pero industrial en su rendimiento, utilizando tecnologías modernas de Frontend como Astro y Vue 3, y un backend consolidado en el mercado como es el de Shopify, con toda la seguridad que esto conlleva para el negocio de mi cliente.