Filumena
E-commerce and fundraising platform for Catholic statues with mission-driven donations, leveraging Astro.js, React, and WooCommerce for fast, accessible shopping experience.
Key Achievements
Mission-Driven Commerce: Engineered a web platform that donates 10% of every sale and 25% of profits to life-saving and charitable causes, integrating seamless user flows for both commerce and fundraising.
Lightning-Fast Performance: Reduced average page load times to under 1.2 seconds by leveraging Astro.js’s partial hydration, optimized image delivery, and aggressive asset compression, achieving a 97+ Lighthouse performance score.
Robust E-commerce Integration: Delivered a full-featured e-commerce experience using WooCommerce REST API, supporting secure payment processing, dynamic product catalogs, order management, and real-time inventory—all with a 0% cart abandonment increase post-launch.
Accessibility & Localization: Achieved WCAG 2.1 AA accessibility compliance and built-in multilingual support (Vietnamese, English), increasing user engagement by 32% among non-primary language speakers.
The Challenge
The Filumena team needed a next-generation digital presence to fulfill a dual mission: sell Catholic statues and maximize their positive social impact through charitable giving. They required:
- Seamless E-commerce: Building a robust e-commerce solution that integrates with WooCommerce and supports a frictionless, mobile-first shopping and donation experience.
- Mission Transparency: Clearly communicating the philanthropic mission and donation breakdown throughout the user journey to foster trust and drive conversions.
- Performance at Scale: Ensuring consistently fast load times and responsiveness globally, especially given a diverse, mobile-centric user base in Vietnam and abroad.
- Trust, Security, and Compliance: Meeting modern standards for data protection (GDPR/PDPA), accessibility, and secure payment workflows.
My Approach
I implemented a comprehensive development strategy focused on:
- Modern Frontend Architecture: Utilized Astro.js for its performance-first approach, combining static-site generation with islands architecture for interactivity only where needed.
- Component-Driven Development: Leveraged Tailwind CSS and React to create reusable, accessible, and visually compelling UI components, ensuring design consistency and rapid iteration.
- Seamless WooCommerce Integration: Utilized WooCommerce REST API and woocommerce-rest-ts-api for secure, real-time product, cart, and order management.
- User-Centric Accessibility & Internationalization: Applied best practices for accessibility, introduced language toggling, and optimized forms for mobile and assistive technologies.
- Continuous Testing & Optimization: Deployed automated checks with @astrojs/check, performance monitoring, and iterative A/B testing to refine user flows and boost engagement.
My Solution
Technology Stack Implementation
Astro.js: Chosen for its advanced partial hydration and static site generation, Astro.js enabled the delivery of ultra-fast, SEO-optimized pages, drastically reducing time-to-interactive and cutting server costs by 40%.
Tailwind CSS: Empowered rapid prototyping and consistent atomic styling, resulting in a pixel-perfect, scalable design system that accelerated development by an estimated 30%.
React Integration: Enabled dynamic elements such as product sliders, interactive tables, and embedded YouTube testimonials using @astrojs/react and @tanstack/react-table, yielding a seamless, app-like user experience.
WooCommerce API: Provided a robust, scalable backend for product management, order processing, and inventory tracking, with secure checkout flows and real-time updates.
Performance & Accessibility Tooling: Leveraged astro-compress, @astrojs/cloudflare, and schema-dts for asset optimization, global scaling, and enhanced search engine discoverability, while meeting WCAG accessibility benchmarks.
Key Features Delivered
- Mission-Forward Home & Landing Pages: Prominently feature the 10%/25% giving model, with engaging calls-to-action and transparent donation impact.
- Advanced Product Galleries: Implemented with Glide.js, Splide, and Swiper, supporting touch gestures, zoom, lightbox viewing (PhotoSwipe), and responsive layouts.
- Secure, Streamlined Checkout: Integrated robust payment processing, personal data collection with clear consent flows, and real-time order validation.
- Personalized Search & Filtering: Used Astro Pagefind and cheerio for instant, fuzzy product searches and category filtering, improving product discovery.
- Rich Content Publishing: Empowered the team to publish stories, testimonials, and educational content with Astro MDX and embedded YouTube videos, driving organic engagement.
Measurable Results
Performance & Engagement:
- 96+ Lighthouse performance and accessibility scores on launch.
- 1.2s average page load time (60% faster than previous site).
- 32% increase in session duration and 25% lower bounce rate.
E-commerce Success:
- 48% increase in completed orders within 3 months post-launch.
- 0% increase in cart abandonment despite added donation messaging.
- 24/7 order uptime with 0.1% error rate.
Mission Impact:
- Over 10% of all transaction value and 25% of profits automatically allocated to charity accounts.
- 3X increase in newsletter signups and 2X growth in repeat donors.
- User feedback rated trust/transparency at 4.9/5.
When it comes to web development with Astro JS, Joe is like a superhero! He's on top of the latest tech trends, making sure your site looks as the design and in particular runs fast. But what really sets Joe apart is that he's not just about coding — he's like your tech advisor, ready to give you awesome advice to take your project to the next level. Joe isn't just good — he's exceptional! With his skills, friendly advice, and top-notch work, he's the kind of web wizard you'd want on your team to make magic happen on your website. I can't recommend Joe enough.