Vándalos Coffee

Project Overview

For this project, the challenge was to develop an e-commerce platform for the specialty coffee brand Vándalos Coffee—a premium brand that needed to sharpen its digital presence and sell its products (coffee, infusions, and accessories) through its own website.

This project was a blast to build, as it allowed me to bridge various Frontend technologies with Shopify’s Storefront API. Therefore, one of the keys to the project was that I utilized Shopify as a Headless CMS. Additionally, I implemented GraphQL, a technology I hadn’t used in depth before, which proved to be a very interesting application.

Initial Decisions

From the very beginning, the main objective was to create a web design that truly represented the Vándalos Coffee specialty coffee brand.

Beyond the visuals—which are fundamental for the user—as a developer, I had to decide which technology was the most suitable for this case. After considering several scenarios, such as building a custom WordPress theme with WooCommerce, I asked myself: why not Astro?

The decision to bet on Astro was driven by the challenge of achieving the best possible performance on the site, considering that this way I can generate static content in production. For everything related to the cart and the payment gateway, Shopify would be the engine in charge. Although I could have chosen WordPress as a Headless solution, the WooCommerce API was not the best option in this case. Furthermore, the Shopify API works perfectly, integrating seamlessly regardless of the technology used on the Frontend.

On the other hand, although Headless Shopify is usually associated with React or native development with Liquid, the combination of Astro with Vue is fantastic for an emerging business. This choice allows for generating a significant amount of static content, which is ideal for SEO positioning, while also achieving optimal performance—aspects I consider fundamental for the user experience. Finally, the commitment to the Static Site Generation (SSG) paradigm also has a fundamental component for me: security. By serving static files, we drastically reduce the attack surface, protecting the site against common vulnerabilities found in dynamic servers.

Visual Identity & Design

Given that the branding is spectacular and its logo features a nod to 1930s cartoons, I wanted to apply a design that combined the agility and concepts of a modern e-commerce site with the aesthetic the brand itself uses in its packaging.

Based on this idea, the work I applied combines modern web design concepts like the famous “bento grid” with textures to create a vintage look. The color palette was carefully defined based on the brand, and the typography choices also reinforce the overall visual concept. All of this was coded from scratch using Vanilla CSS, without relying on frameworks for the styles.

I want to add at this point that the designer Mr John Vanilla, who was the branding designer for Vándalos Coffee, provided all the visual material I needed, in addition to sharing some wireframes in Figma with different proposals for some components that we ultimately used in the final design.

Technical Challenges & Advanced Solutions

This project was not just about displaying products; the architecture was designed to offer a smooth 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 (lateral cart) that avoids unnecessary reloads and managed the global state with Nano Stores. This allows for persistence between navigations and immediate interaction.
• Astro Actions and Server Defer: For business logic, I avoided creating manual endpoints. I used Astro Actions to connect with the Shopify API. A key point was the use of Server Defer to check stock in real-time before allowing the purchase. This prevented frustrating the user by trying to add out-of-stock products, proactively improving the UX.
• Integrations and Optimization:
  • Data Fetching: I use native Fetch because it integrates naturally with Cloudflare, the platform where I have centralized my entire Frontend to obtain the highest possible security. I am aware that in the Node.js build process, using Axios would not be a problem, but when working on-demand in the runtime with environment variables and functions at the Edge, I prefer not to rely on external libraries. Furthermore, this usually generates quite a few frustrations when you are not familiar with how Cloudflare works. For this reason, knowing the deployment platform is vital; that’s why I chose Cloudflare over more “dev-friendly” options like Vercel or Netlify. Although the latter simplify the workflow, in my opinion, the security offered by Cloudflare today is unquestionable. Finally, I combined the use of fetch with GraphQL to connect with the Shopify API, fetching strictly the necessary data and reducing the payload.
  • Marketing: Connection 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 saturating the API and complete SEO optimization (images, metadata).

Results

The final product is a website deployed at the Edge of Cloudflare, with a configured custom email domain and a fully personalized design that loads instantly. I have delivered an e-commerce platform that feels artisanal in its design but industrial in its performance. By combining modern Frontend technologies like Astro and Vue 3 with a battle-tested backend like Shopify, I have ensured my client’s business is fast, scalable, and—above all—secure.