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 hemos 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 ver si podíamos conseguir el mejor rendimiento en su web, teniendo en cuenta que de este modo podemos 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íamos haber elegido Wordpress como Headless, la API de Woocommerce no era en este caso la mejor opción.
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. Nos permite generar mucho contenido estático, que es ideal para el posicionamiento SEO, y escalar en el futuro. Además la API de Shopify funciona a la perfección, integrándose sin problemas independientemente de la tecnología usada en el Frontend.
Pensando en la parte visual, el diseño
Teniendo en cuenta que su branding es espectacular y que 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 patrones de diseño actuales como el famoso “bento grid”, con un juego de texturas, una paleta de colores cuidada, y una elección tipográfica que no ha sido al azar. Todo ello maquetado desde cero utilizando Vanilla CSS, sin depender de frameworks para los estilos.
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í evitamos frustrar al usuario intentando añadir productos agotados, mejorando la UX proactivamente.
- Integraciones y Optimización:
- Data Fetching: Uso de Axios optimizado con GraphQL para traer estrictamente la data necesaria, reduciendo 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 alojada en Cloudflare, con dominio de correo propio configurado y un diseño totalmente personalizado que carga al instante. Hemos logrado un e-commerce que se siente artesanal en su diseño pero industrial en su rendimiento.
