Title : The Green Haven
Subtitle A performance-first headless e-commerce store for sustainable living goods.
Role Sole Developer
Stack Astro.js (Frontend), Shopify (E-commerce Backend), Tailwind CSS, Cloudflare Pages
The Hook Reimagining e-commerce with a zero-javascript (static-first) frontend, proving that sustainability in design translates to exceptional speed and user experience.
The Problem Standard e-commerce platforms (like traditional Shopify Liquid or generic WooCommerce) often suffer from bloated JavaScript, leading to slow page loads, frustrated users, and lost revenue. For a brand focused on sustainability, a slow, wasteful website is a branding contradiction. The goal was to build an MVP storefront that achieved 100/100 performance scores while maintaining a premium feel.
The Process 1. Stack Selection: Chose Astro.js for its unique "islands architecture," which allowed me to deliver pure HTML for marketing content and only hydrate minimal JavaScript for interactive elements (like the cart or product variant selectors).
2. Headless E-commerce: Integrated the Shopify Storefront API to handle products, collections, and the checkout flow, decoupling the complex business logic from the user experience.
3. Performance Focus: Optimized every image using Astro’s native <Image /> component, enforced strict accessibility guidelines, and deployed on Cloudflare Pages for ultra-fast global edge delivery.
Key Metrics Lighthouse Performance Score: 100/100
Time to Interactive (TTI): under 1s
Accessibility: 100/100
Lessons Learned While Astro is incredibly fast, managing complex cart states and product dynamic data without a client-side framework (like React/Vue) requires careful architectural planning. This project taught me the power of leveraging Web Components and native browser features for lightweight interactivity.