Project Overview
For this project, the challenge was to develop an e-commerce platform for Vándalos Coffee, a premium specialty coffee brand looking to boost its online presence and sell products (coffee, tea, and accessories) directly through its own website.
This project was particularly engaging as it allowed me to blend various Frontend technologies with Shopify’s Storefront API. Consequently, a key aspect of this build was utilizing Shopify as a Headless CMS. I also implemented GraphQL—a technology I hadn’t used in depth before—which proved to be a fascinating addition to the stack.
Initial Decisions
From the start, the main objective was to create a web design that truly represented the Vándalos Coffee brand identity.
Beyond the visuals—which are fundamental for the user—as a developer, I had to determine the most suitable technology for this specific use case. After considering several scenarios, such as building a custom WordPress theme with WooCommerce, I asked myself: why not Astro?
The choice to bet on Astro was driven by the challenge of achieving maximum web performance. By taking this route, we could generate static content for production, while Shopify would handle the heavy lifting for the cart and payment gateway. Although WordPress could have been used as a Headless solution, the WooCommerce API wasn’t the best fit for this specific scenario.
Furthermore, while Headless Shopify is typically associated with React or native Liquid development, the combination of Astro and Vue is fantastic for an emerging business. It allows us to generate a significant amount of static content—ideal for SEO ranking—while remaining scalable for the future. Plus, the Shopify API works seamlessly, integrating perfectly regardless of the technology used on the Frontend.
Visual Design & Aesthetics
Given that the brand’s visual identity is spectacular—featuring nods to 1930s “rubber hose” animation—I wanted to apply a design that combined the agility and concepts of a modern e-commerce site with the aesthetic found on their physical packaging.
Based on this concept, the work combines current design patterns, such as the famous “bento grid,” with a play on textures, a carefully curated color palette, and deliberate typography choices. All of this was hand-coded from scratch using Vanilla CSS, without relying on CSS frameworks, to ensure total control over the style and weight of the site.
Technical Challenges & Advanced Solutions
This project went beyond simply displaying products; the architecture was designed to offer a fluid and robust User Experience (UX):
- State Management in an MPA Architecture: Although Astro functions by default as a Multi-Page Application, I wanted to maintain the spirit and fluidity of a modern SPA. I implemented a Sidecart to avoid unnecessary page reloads and managed the global state using Nano Stores. This allows for data persistence between navigation and immediate user interaction.
- Astro Actions & Server Defer: For business logic, I avoided creating manual endpoints. Instead, I utilized Astro Actions to connect with the Shopify API. A key feature was the use of Server Defer to check stock in real-time before allowing a purchase. This proactively improves UX by preventing users from attempting to add out-of-stock items.
- Integrations & Optimization:
- Data Fetching: Optimized use of Axios with GraphQL to fetch strictly the necessary data, reducing payload size.
- Marketing: Integration with Brevo and Klaviyo for mailing strategies and abandoned cart recovery.
- Modern UI/UX: Smooth scrolling with Lenis, video playback with Plyr, non-intrusive notifications with Notyf, and visual details like Canvas Confetti to celebrate interactions.
- Performance: Implementation of debounce (Lodash) when adding to the cart to prevent API saturation, alongside complete SEO optimization (images, metadata).
Results
The result is a website hosted on Netlify, with a configured custom email domain and a fully personalized design that loads instantly. We achieved an e-commerce platform that feels artisanal in its design but offers industrial-grade performance.
