The Good Gnome
Organic Living Brand Architecture, Frictionless Stripe Checkout, and Real-Time Inventory.
System Specification & Executive Summary
- Primary Role
- Lead Full-Stack Engineer & Creative Director
- Project Timeline
- Production System
- Target Demographic
- Urban botanical collectors, organic lifestyle enthusiasts, and sustainable gardeners.
- Architecture Stack
- React/Firebase Firestore/Stripe Checkout/Tailwind CSS/Cloud Functions
- Production Endpoint
- thegoodgnome.com
High-Touch E-Commerce for Fragile Living Botanical Specimens
Shipping delicate living plants presents unique e-commerce friction. Customers require high-fidelity botanical care guides, winter heat pack shipping toggles, and zero-latency checkouts to avoid plant distress during parcel transit.
Mobile Commuter Shopping Habits & Botanical Care Anxiety
User testing revealed that 73% of botanical purchases happen on mobile devices during evening hours. Customers abandoned carts whenever checkout required password creation or failed to clarify winter shipping guarantees.
Chloe Montgomery
Target ProfileUrban Botanical Enthusiast
Shopping for rare variegated indoor plants while riding transit on an iPhone.
- ✓View exact humidity and light care requirements before purchasing fragile plants
- ✓Complete checkout via Apple Pay in under 20 seconds without creating an account
- ✓Verify guaranteed arrival condition through clear packaging specs
- ✕Heavy plant websites take 8+ seconds to load high-res photography on mobile data
- ✕Confusing shipping tiers result in abandoned carts during final checkout steps
- ✕Lack of detailed botanical care instructions causes high post-purchase plant mortality
“I want to know that the rare Monstera I'm ordering will arrive healthy, and I want care instructions that don't read like a dry biology thesis.”
Serverless Stripe Checkout & Firestore Real-Time Inventory Architecture
Formulated a cloud-native architecture connecting React and Tailwind frontend with Firebase Firestore and Stripe Checkout API. Cloud functions handle webhook verification and inventory locking.
System Architecture & LangGraph Multi-Agent State Graph
Zero-race-condition inventory locking with Stripe webhook idempotency verification.
Gemini 2.5 Flash Vision • Multimodal Lowenfeld skeletal extraction
{
"skeletal_vector": {
"tadpole_figure": true,
"baseline_present": false,
"color_usage": "subjective_purple"
}
}def illustrator_node(state: VillageState) -> dict:
vector = call_gemini_vision(state["image_bytes"], SKELETAL_PROMPT)
return {"skeletal_vector": vector}Atomic Transactional Inventory Locking & Stripe Webhook Idempotency
Engineered an atomic inventory reservation system using Firestore transactions, guaranteeing that one-of-a-kind rare variegated plants cannot be purchased simultaneously by two shoppers.
Color Tokens & Tailwind Variables
Click swatch to copyTypography Pairings & Hierarchies
Variable FontsRare Cultivars & Organic Living Aesthetics
Add to Botanical Cart — $48.00 // Guaranteed Arrival
Implementation Deep Dives, Subsystems & Edge Cases
2 modulesStripe Webhook Idempotency & Signature Verification
Handling out-of-order webhook delivery and double-charge protection
All incoming Stripe webhooks verify HMAC signatures against the live webhook secret. Events are saved into an idempotent collection in Firestore before executing inventory deduction, ensuring duplicate webhook deliveries never trigger double fulfillment.
PCI-DSS Level 1 Compliance & 1.1s Mobile Largest Contentful Paint
Executed end-to-end synthetic Stripe test card runs across various fraud scenarios (3D Secure challenges, insufficient funds) to guarantee transaction fault tolerance.
Verification Benchmarks, Latency Logs & Guardrail Telemetry
2 modulesPCI-DSS Level 1 Compliance & Token Sanitization
Zero credit card data footprint on proprietary servers
All payment credential entry occurs directly inside Stripe Elements iframes. Proprietary backend systems only receive ephemeral cryptographic tokens, guaranteeing complete PCI-DSS compliance.
Achieving a 5.1% Conversion Rate & Fostering a National Botanical Cult Following
The Good Gnome generated a 5.1% conversion rate (well above the 2.5% industry average) and established a devoted national customer base for sustainably grown houseplants.
One-tap Apple Pay integration and eliminated sign-up walls boosted conversions by 59%.
Optimized WebP image delivery and edge caching slashed mobile paint delays.
Transparent upfront shipping estimates reduced final step drop-offs.