Portfolio Showcase
Stix & Pebbles
A complete e-commerce platform for a handmade craft business in Far North Queensland. Products made from natural materials — river stones, driftwood, creek crystals, mountain rocks, weathered timber.
Client: Melinda, Irvinebank QLD · Type: Handmade crafts e-commerce + AI chatbot
Built by: Marc Dinnerville · allgoodnow@mailfence.com
What This Document Covers
This document is a technical and functional overview of the Stix & Pebbles e-commerce platform — live at stixandpebbles.pages.dev. It explains what the platform does, how it's built, and what makes it different from a standard Shopify or WooCommerce store.
Inside you'll find: the complete e-commerce system including product catalogue, persistent cart, and Stripe checkout; the custom AU Post shipping calculator built from real rate tables across 5 international zones; the "Mini Mel" AI shopping assistant that knows every product and its story; the admin dashboard for managing orders, subscribers, content, and analytics; and the security and SEO architecture underneath it all.
For business readers: this shows what a modern online shop looks like when it's built without platform fees, plugin subscriptions, or percentage cuts on every sale. For technical readers: it covers the architecture from Astro SSR through to Stripe Elements tokenisation, weight-based shipping logic, and Workers AI inference with cart-aware context.
01 — What The Platform Does
A complete online shop — not a template with a buy button.
Stix & Pebbles is a full e-commerce platform for Melinda — an artisan making jewellery, ornaments, and art from natural materials found in Far North Queensland. Each piece has a story tied to where its materials came from, and the site feels like browsing an artist's workshop rather than a warehouse.
What Customers Can Do
- Browse and buy one-of-a-kind handmade pieces
- Chat with "Mini Mel" — an AI that knows every product
- Filter by category: Wearables, Bling, Ornaments, Collections
- Get accurate shipping estimates to anywhere in the world
- Sign up for newsletters about new pieces
- Place custom orders for bespoke commissions
What Melinda Can Do (Admin)
- View messages with AI-suggested replies in her voice
- Manage newsletter subscribers with double opt-in
- See analytics on customer questions and patterns
- Generate blog content with AI assistance
- Track orders with full customer and shipping details
- Manage product stock, pricing, and descriptions
02 — Technology Stack
Every layer is chosen for a reason.
The result is a full e-commerce platform that loads in under one second from anywhere in the world, costs nothing to host, and requires zero server maintenance.
| What It Does | Technology | Why It Matters |
|---|---|---|
| Builds the website | Astro 5 | Server-rendered pages arrive fully formed — fast and SEO-friendly |
| Makes it interactive | Solid.js | Reactive islands for cart, chatbot, filters — no unnecessary JS |
| Hosts everything | Cloudflare Pages | Served from 300+ edge locations worldwide. Free tier |
| Stores all data | Cloudflare D1 | Serverless SQLite — zero maintenance, no patching |
| Powers Mini Mel | Workers AI (Llama 3.1 8B) | No monthly API fees. Free tier — 10,000 requests/day |
| Handles payments | Stripe Elements | PCI-compliant card tokenisation. No card data on server |
| Sends emails | Resend | Order confirmations + newsletters — 3,000/month free |
| Blocks spam | Cloudflare Turnstile | Invisible bot protection — no CAPTCHAs |
03 — Design & Experience
Earth tones, natural textures, handmade warmth.
The site's aesthetic mirrors the materials Melinda works with — warm earth tones, natural textures, and a handcrafted feel that sets it apart from generic e-commerce templates.
Dark & Light Mode
Complete alternate theme — every element, product card, checkout form, and animation adapts correctly across both modes.
Scroll Animations
GSAP + ScrollTrigger with Lenis smooth scroll — hardware-accelerated with considered pacing.
Offline Support
Service worker caches pages and assets. Customers can browse products even without internet.
Product Storytelling
Each piece shows its materials, its meaning, and where in FNQ its materials came from. Not just a price tag.
04 — E-Commerce Platform
Complete shopping experience. No Shopify. No platform fees.
Every product gets a description, price, materials list, weight (for shipping calculations), and a meaning — the story behind it. Stock is tracked automatically. The cart persists across browser sessions so customers don't lose their selections.
Product Catalogue
Images, descriptions, materials, meanings, stock management for every piece. Category filtering across Wearables, Bling, Ornaments, and Collections.
Persistent Cart
localStorage-backed cart with live item count, quantity controls, and weight tracking. Survives browser sessions and page reloads.
Stripe Checkout
PCI compliant — card details never touch the server. Tokenised directly to Stripe via Elements. Server-side payment intent confirmation.
Order Management
Server-side validation, D1 database storage, confirmation emails via Resend, admin order tracking with full customer details.
AU Post Shipping Calculator
A proper logistics tool. Every item has a weight in grams. At checkout, the system adds cart weights plus a packaging allowance, then calculates the correct rate from real Australia Post rate tables across five international zones.
| Zone | Coverage | Rate Type |
|---|---|---|
| 1–2 | Domestic Australia (Standard + Express) | Exact AU Post rates |
| 3 | New Zealand | Base + per-kg calculation |
| 4 | Asia-Pacific | Base + per-kg calculation |
| 5 | US / UK / Europe / Rest of World | Base + per-kg calculation |
Built from real rate tables — no third-party plugin, no subscription, no external API.
Why Not Shopify?
This Platform
- $0/month hosting
- 0% transaction fee
- AI chatbot included
- Custom shipping calculator
- Full admin dashboard
- No plugin dependencies
Shopify Basic
- $39/month minimum
- 2.9% + 30c per transaction
- AI chatbot: $50+/month extra
- Shipping apps: $20-40/month
- Limited admin customisation
- Plugin bloat slows the site
05 — Mini Mel — The AI Persona
Warm, conversational, knows every product and its story.
Mini Mel is an AI shopping assistant built on Workers AI that helps visitors find the right gift, explains the significance of creek crystals, or describes what makes a particular wind chime resonate. It speaks in Melinda's voice — warm and personal, not corporate. Proactive triggers appear when customers browse specific product pages.
FAQ Matching
Common questions get instant answers from a pre-built FAQ database — no AI inference needed. Faster response, zero cost.
Cart Awareness
Mini Mel knows what's in the customer's cart and makes relevant suggestions based on what they're already buying.
Synonym Recognition
"bracelet" = "bangle" = "wrist piece" — the AI understands product name variations and maps them correctly.
Voice Consistency
Auto-checks every response against Melinda's authentic voice profile. Rewrites anything that sounds generic before the customer sees it.
The Customer Journey
Browse
Customer lands on a product page. Mini Mel proactively offers to help based on the product category they're viewing.
Ask
"What's this made from?" or "Do you have anything similar in blue?" — Mini Mel draws from the full product database to answer.
Recommend
Based on the conversation and cart contents, Mini Mel suggests complementary pieces — "That bracelet pairs beautifully with the creek crystal earrings."
Buy
Customer adds to cart, shipping is calculated from item weights, and checkout flows through Stripe — all without leaving the conversation.
06 — Admin Dashboard & Newsletter
Everything in one place. Any device.
Melinda manages her entire online business from a single private dashboard. No logging into separate services for email, analytics, orders, and content. Everything is designed for a sole operator who needs to check in quickly between making pieces.
Message Inbox
All contact form submissions. AI-suggested replies written in Melinda's voice — one click to send.
Subscribers
Full subscriber management. View, search, export. Double opt-in with tokenised one-click unsubscribe.
Analytics
AI conversations, popular questions, visitor locations, voice consistency score across all interactions.
Content Writer
AI generates blog posts by topic. Edit, refine, publish with one click. SEO metadata auto-generated.
Order Management
Orders by status, customer details, item lists, shipping addresses, and internal notes.
07 — Security
Enterprise-grade protection for a one-person business.
For non-technical readers: the site protects itself. Spam is blocked invisibly, payments are handled securely by Stripe, and no customer data is exposed. For technical readers: here's the full security stack.
| Protection | What It Stops |
|---|---|
| Cloudflare Turnstile | Spam bots — invisible challenge, no CAPTCHAs, zero friction |
| KV-Backed Rate Limiting | Request flooding — sliding window counters with automatic cooldown |
| Honeypot + Input Validation | Automated spam submissions and cross-site scripting (XSS) |
| Timing-Safe Authentication | Password guessing — constant-time comparison prevents timing leaks |
| CSRF Token Protection | Cross-site request forgery — every form verified with unique tokens |
| Stripe PCI Compliance | Card data never touches the server — tokenised directly to Stripe |
08 — SEO & Structured Data
Product, Article, FAQ, LocalBusiness, and Breadcrumb JSON-LD schemas. Dynamic Open Graph and Twitter Card meta per page. Canonical URLs. Auto-generated sitemap. Every product page is individually optimised for search engines.
09 — Performance & Costs
Real numbers. Not marketing claims.
Measured results from the live production site, compared against a typical Shopify store running similar product and payment functionality.
| Metric | This Site | Shopify Basic |
|---|---|---|
| Page load | Under 1 second | 2–4 seconds |
| Mobile PageSpeed | 95+ | 40–60 |
| Server response (TTFB) | 50ms | 200–800ms |
| First Contentful Paint | <1s | 1.5–3s |
| Time to Interactive | <2s | 4–8s |
Everything runs on Cloudflare's free tier — hosting, database, AI, bot protection, email. The only cost is the domain name at ~$15/year. A Shopify store with equivalent features (AI chatbot, custom shipping, newsletter) would cost $100–$200/month in platform fees and plugins alone.
See More Work
Daintree Thai Boxing Live
10 AI-powered tools, 3 chatbot personas, admin dashboard, semantic caching, multi-layer security. $0/month.
Cognito — AI Demo Live
Qwen 3 30B chatbot on Cloudflare Workers. Adversarial-hardened, lead capture, FAQ matching. Pure serverless — $0/month.
GitHub: cognito-demo · developer-portfolio
The Bottom Line
Full e-commerce. AI chatbot. $0/month.
A complete online store with AI shopping assistant, weight-based international shipping, newsletter system, admin dashboard, and enterprise security — running entirely on Cloudflare's free tier. No Shopify fees. No WooCommerce plugins. No percentage cut on sales.
Visit the live site · allgoodnow@mailfence.com
Designed and developed by Marc Dinnerville