From Zero to #1 on Google.
Sub-Second Speed.
A+ Security.
We didn't just build Crumbology a website; we engineered an unfair advantage. This is a full-stack, custom e-commerce platform built on the same zero-latency architecture trusted by Porsche, Spotify, and Stripe.
While competitors are losing customers to slow, bloated templates, Crumbology is converting traffic instantly—even on a weak mobile connection. We stripped away the legacy code to deliver a platform that dominates search rankings and forces visitors to take action.
The Brief
Scaling a Premium Digital Infrastructure.
Crumbology is a premium loaded cookie bakery in Mandurah. With a rapidly scaling Instagram presence, they quickly outgrew their temporary launch site. They needed a platform capable of handling complex online ordering, delivery logistics, a custom loyalty program, and subscription boxes—all optimized for a customer base that is 90% mobile.
"I needed to take orders while I'm elbow-deep in cookie dough. Now I get a Discord ping the instant an order comes in, and the whole thing just runs itself."
Project Requirements
The R&D Advantage (Full Disclosure):
Because this is a family business, we operated with zero constraints on quality and unlimited iteration time. This project served as Kevra Digital's ultimate proving ground. Every feature, integration, and line of code was engineered purely because it was the optimal technical solution, not because of a rushed agency deadline.
The Numbers
Proof, not promises
Every metric is verifiable on the live site. Click any card to see how we achieved it.
Astro SSR, CSS inlining (zero render-blocking), LCP preload with srcset 400w/640w/800w, GA4 deferred via requestIdleCallback, Supabase lazy import saves ~46KB for guests
Semantic HTML, ARIA labels, 4.5:1 contrast, focus management, prefers-reduced-motion support across all animations
HTTPS everywhere, no mixed content, correct aspect ratios, no deprecated APIs, modern image formats
Multi-level JSON-LD graph (Bakery + DessertShop + DeliveryService), dynamic canonicals, filtered sitemap, AI crawler blocking via robots.txt
HSTS 2yr preload, X-Frame-Options DENY, strict CSP headers, rate limiting on all inputs, Cloudflare Turnstile, honeypot fields on every form — securityheaders.com A+
Schema graph combining Bakery + DessertShop + DeliveryService types, Product schema with BreadcrumbList, FAQPage schema with 60+ questions
20 dynamic product pages generated from Astro content collections, plus static pages for ordering, VIP, subscriptions, FAQ, and more
99/100 on mobile — simulates slower networks & older devices. Still exceptional.
Zero render-blocking CSS (all inlined), viewport-only prefetch, GPU-accelerated animations, lazy-loaded images with proper sizing
Security Deep-Dive
Bank-grade protection. Zero friction.
Security isn't optional. Every form, every payment, every login is protected by multiple layers - because one breach destroys more trust than a hundred perfect deliveries.
💡 A bouncer at the door - lets real customers in, blocks troublemakers. Except this bouncer never sleeps and checks every ID.
Invisible Bot Trap
Every form has a hidden field that humans can't see. Bots auto-fill every field - if the hidden one has data, the submission is silently rejected. Zero friction for real customers.
Technical details
Rate Limiting
Every action has a speed limit. Magic links: 2 per 15 minutes. Payments: 10 per 5 minutes. Promo checks: 20 per 5 minutes. After that? Blocked.
Technical details
Price Tamper Protection
The browser says a cookie costs $7.50. But what if someone edits the code and says $0.01? The server re-checks every price against the source of truth before charging.
Technical details
Input Sanitisation
Every field is stripped of dangerous characters before it touches the server. SQL injection, XSS, script tags — all neutralised before they can cause harm.
Technical details
Dependency Scanning — Snyk
Every third-party package is scanned for known vulnerabilities before it ships. Used by Google and Salesforce to keep their dependency trees clean.
Technical details
Code Analysis — SonarCloud
Every line of code is statically analysed for security vulnerabilities, bugs, and code smells. Trusted by NASA and Bosch to catch what humans miss in code review.
Technical details
E-Commerce & Payments
From visitors to Customers in under 60 seconds
A complete purchase funnel - from browsing to payment to confirmation - with every step designed to feel instant and trustworthy.
Browse
Product pages with real-time pricing and availability
Add to Cart
Flying cookie animation confirms the action
Cart Drawer
Slide-out drawer with upsells and progress milestones
Checkout
Stripe Elements embedded form - card details never touch the server
Confirmation
Email receipt + Discord notification + database record - all simultaneously
💡 Stripe is as secure as your bank. Card details go directly to Stripe - like tap-to-pay, the shopkeeper never sees your card number.
Key Engineering Decisions
- ✓ Card details never touch the server - Stripe Elements handle PCI compliance
- ✓ Server-side price re-validation on every payment
- ✓ Metadata chunking solves Stripe's 500-character limit
- ✓ Database-driven promo codes with expiry dates and usage limits
- ✓ Webhook handles 6 event types, returns 200 on email failures to prevent Stripe retry storms
Technical details
Cart & Upsell Engine
A cart that sells for you
The cart isn't just a list of items - it's a conversion engine designed to increase average order value through psychology and smart UX.
$26.00 to Bonus 50 Crumbs
Classic Choc Chip
$9.50 ea
Biscoff Bliss
$9.50 ea
Mini Biscoff
$5.50 ea
💡 Like the chocolate bars at the supermarket checkout - except smarter. The cart shows customers how close they are to earning free rewards.
Progress Milestones
Spend $30 → earn 25 Crumbs. Spend $60 → earn 50 Crumbs. Spend $100 → earn 25 Crumbs + free mini cookie. Visual progress bar drives higher baskets.
Upsell Grid
'People also bought' section with one-tap add. Shows complementary products, not random items.
Same-Day Pickup Timer
Countdown showing time remaining for same-day pickup orders. Creates urgency without being pushy.
Inline Promo Codes
Enter and validate promo codes without leaving the cart. Instant feedback: valid (shows discount), invalid (shows reason), expired (shows when it ended).
Persistent Cart
Cart saved to localStorage. Close your browser, come back next week - your cookies are still waiting.
Technical details
VIP Loyalty - Crumb Club
Turning one-time buyers into regulars
A full loyalty program that turns one-time buyers into regulars. Customers earn 'Crumbs' (points) on every order, level up through tiers, and unlock rewards.
💡 Qantas Frequent Flyer, but for cookies. Earn points on every order, level up through tiers, unlock rewards. Keeps customers coming back.
Tier Progression — earn more Crumbs as you level up
Live Dashboard Demo
Crumbs earned. Instantly.
Every order awards Crumbs in real time — no refresh, no delay. The animated odometer counter makes earning feel rewarding rather than transactional. This is the actual VIP dashboard, running live on crumbology.au.
- ✓ Odometer-style counter animates on every award
- ✓ Full ledger — reason and timestamp on every transaction
- ✓ Atomic DB operations prevent double-awards
Magic Link Login
No passwords to remember. Click a link in your email and you're in - like a hotel key card, one-use and expires automatically.
Crumbs Ledger
Odometer-style animated counter showing total Crumbs earned. Every transaction recorded with reason and timestamp.
5-Tier Progression
Baby Crumb → Smart Cookie → Batch Boss → Legendary Crumb → The Crumbologist. Each tier unlocks new perks.
Gold Status
+33% earn rate on all purchases. Unlocked at Batch Boss tier. Makes every order more rewarding.
Hidden Crumbs
Gamified Easter egg on the VIP dashboard. Discover hidden crumbs by visiting specific pages (50 bonus Crumbs per discovery).
Referral Tracking
Earn 10 Crumbs for telling us how you found us - Instagram, Facebook, TikTok, Google, or a friend.
Crumbs for Feedback
Bonus Crumbs for completing customer surveys - real customer data at a fraction of traditional research costs. Plan: expand with targeted surveys for product feedback, delivery preferences, and new flavour ideas.
Technical details
Subscriptions - Loaded Legends
Recurring revenue, on autopilot
Recurring revenue for the business, convenient fresh cookies for the customer. Three tiers designed for different appetites and budgets.
💡 Like a meal kit subscription but for loaded cookies. Customers pick their flavours, set their schedule, and fresh cookies show up on time.
Monday Survival Kit
Start your week right with a selection of loaded cookies delivered every Monday.
Signature Reset
A generous box of signature flavours, delivered every two weeks.
Party Starter
The ultimate cookie box - enough to share (or not). Perfect for offices and families.
Smart Features
- ✓ Intelligent flavour picker with real-time quota counter
- ✓ Pickup or delivery toggle with suburb validation (11 suburbs)
- ✓ Public holiday handling - automatic schedule adjustment
- ✓ Stripe Billing Portal - customers self-manage subscriptions
Technical details
Interactive Product Config
Build your dream platter
An interactive product configurator that lets customers build custom cookie platters - pick your cookies, see them fill the box in real-time.
Build your Platter
0/12Visual Box Builder
70% cookie selection grid + 30% live box preview. Watch your platter fill up as you pick flavours.
Surprise Me
One-click random fill for indecisive customers. Uses weighted random selection favouring bestsellers.
Real-Time Box Preview
Mock box visualization updates instantly as cookies are added or removed. Satisfying visual feedback.
Zero React
Built with pure vanilla JavaScript for maximum performance. No framework overhead, no hydration delay.
Technical details
Tech Stack
Every tool chosen for a reason
Every tool was chosen for a reason. No bloat, no trends - just the right tool for each job.
Astro 5
Used by Ferrari, Porsche, NHS, and Nordstrom. Server-first architecture delivers HTML, not JavaScript.
Stripe
Same payment system as Shopify, Amazon, and Google. PCI compliant out of the box.
Supabase
Like Firebase but open-source - your data isn't locked in. PostgreSQL database with row-level security.
Vercel
Edge deployment with automatic preview URLs on every commit. Zero-config hosting.
Resend
Transactional email that actually reaches inboxes. Branded order confirmations and notifications.
Discord
Real-time order notifications and error reporting. The baker gets a ping the instant an order lands.
Keystatic
Git-based CMS - content changes auto-deploy in 30 seconds. No WordPress, no plugins, no updates.
Cloudflare
DNS, Turnstile bot protection, and edge caching. The security perimeter.
How They Connect
SEO & Schema Strategy
The invisible work that drives traffic
SEO isn't magic - it's structured data, fast pages, and telling Google exactly what your business is. Most bakery websites don't do any of this.
💡 Schema is a nutrition label for Google - instead of guessing, you tell it exactly: 'This is a bakery in Mandurah, these are our products, here are our reviews.'
Pages Indexed
Pages Excluded
FAQ Questions
Schema Types
Multi-Type Schema Graph
Bakery + DessertShop + DeliveryService combined in a single JSON-LD graph. Google understands the full business model.
Product Schema
Every cookie has structured product data - name, price, availability, breadcrumbs. Shows rich results in search.
FAQ Schema
60+ questions across categories, marked up with FAQPage schema. Appears as expandable answers in Google results.
Intelligent Sitemap
29 pages indexed, 9 excluded (transactional pages, VIP dashboard, checkout). Google only sees what matters.
AI Crawler Blocking
robots.txt blocks AI training crawlers while allowing legitimate search engines. Protects content from being scraped.
Technical details
Mobile & Accessibility
92% of orders come from phones
92% of Crumbology's customers order from their phones. Every pixel was designed for thumbs first, then adapted up to desktop.
Responsive Bento Grid
1 column on mobile → 2 columns on tablet → 3 columns on desktop. Content reflows naturally, never overflows.
Touch-Optimised Targets
Minimum 44px touch targets on all interactive elements. No tiny buttons, no frustrating mis-taps.
Reduced Motion Support
All animations respect prefers-reduced-motion. Sparkle particles drop from 70 to 20 on mobile to save battery.
Dark Mode Flash Prevention
Inline script in <head> detects theme preference before the page paints. No white flash on dark mode loads.
Semantic HTML & ARIA
Proper heading hierarchy, landmark regions, ARIA labels on interactive elements. Screen readers navigate the site effortlessly.
4.5:1 Contrast Ratios
Every text element meets WCAG AA contrast requirements. Tested across both light and dark themes.
Technical details
Notification System
Three things happen when an order lands
When an order lands, three things happen simultaneously - the customer gets confirmation, the baker gets notified, and the system records everything.
💡 Jess gets a Discord ping on her phone the instant an order comes in. No checking email. The order details are right there - items, total, pickup time, customer name.
Order Placed
Stripe webhook fires on successful payment
Customer Email
Branded confirmation email via Resend with order summary and pickup details
Baker Notification
Detailed order email to the bakery with preparation instructions
Discord Embed
Real-time rich embed in Discord with items, total, and customer info
Error Reporting
Separate Discord channel for errors - severity-coded, auto-posted
Technical details
Results & Future
The scoreboard
Crumbology launched in March 2026. Rather than invent numbers, we'll add real data as it comes in. Bookmark this page - it gets better with time.
Lighthouse Score
Security Rating
Google Rank
Total Pages
Load Time
Accessibility
Coming Soon - Real Data Updates
Conversion Tracking
Real conversion rate data from GA4 - how many visitors become customers.
Monthly Traffic Growth
Organic search growth tracked month-over-month from Google Search Console.
Revenue Attribution
Which channels drive the most revenue - organic, social, direct, referral.
Let's Talk
Ready to build something like this?
Every project gets the same attention: perfect Lighthouse scores, bank-grade security, and a site that actually sells. Let's talk about what you need.
View Live Site →