A Demo by Devioand
This Is NotA Prototype.
Aura Roasters is a live demonstration of what Devioand builds — production-grade headless commerce, not a pitch-deck mockup.
What you're looking at
A Sovereign Engineering Demo for Headless Commerce
Aura Roasters was built by Devioand to demonstrate exactly what a modern, headless WooCommerce storefront looks like when built to production standards from day one — not retrofitted after the first rewrite.
E-commerce is the ideal stress-test for modern web architecture: real-time inventory, typed product queries, faceted search, a secure checkout handoff, and SEO-critical PDP routes at scale. If this stack handles specialty coffee, it handles your store too.
Next.js 16
Frontend Framework
App Router · React 19
WordPress 6
Commerce Backend
WooCommerce + WPGraphQL
Typesense
Instant Search
Faceted · Typo-tolerant
Vercel
Infrastructure
Edge · Zero downtime
The architecture
Every Layer Chosen Deliberately
No default boilerplate. Each technology was selected because it solves a specific production problem that cheaper stacks ignore.
Frontend Framework
Next.js 16
App Router with React Server Components, streaming, and edge-ready rendering. Product pages, the shop catalog, and brew guides all rendered at the edge — sub-second performance on every device.
Commerce Backend
WordPress + WooCommerce
Battle-tested headless commerce: WPGraphQL exposes products, inventory, categories, and orders as a typed GraphQL API. Stripe, PayPal, subscriptions, coupons — all built into WooCommerce, all available without custom glue code.
GraphQL API Layer
WPGraphQL
WPGraphQL + WooGraphQL turns WordPress into a fully typed GraphQL endpoint. The woo-normalizer bridges the WooProduct schema to the app's central Product type — zero runtime drift, full TypeScript safety.
Instant Search
Typesense
Typo-tolerant, millisecond product search with faceting by category, origin, and price. Synced from the WooCommerce catalog via the seed-products script. No Elasticsearch complexity. Results as you type.
Frontend Infrastructure
Vercel
Zero-downtime deployments on the edge, global CDN, and serverless API routes. The IS_LIVE env var flips the entire data layer from demo to production — no code changes, just set the variable and deploy.
WordPress Hosting
Pantheon
WordPress runs on Pantheon with separate dev, test, and live environments. One-click database cloning, PHP 8.2, managed infrastructure, and Git-based code deployments — enterprise-grade hosting out of the box.
Under the hood
Production Patterns, Not Demo Shortcuts
The features that separate an engineering firm from a code shop are the ones you never see — until they save you from a crisis.
Headless Checkout Handoff
Next.js never touches payment data. The cart is serialized to URL params, handed to WordPress's /start-checkout endpoint, and WooCommerce's native checkout (Stripe, PayPal) takes over. PCI compliance stays 100% on the WordPress side.
WPGraphQL Typed Schema
Products, categories, and inventory are queried via WPGraphQL + WooGraphQL. woo-normalizer.ts bridges the WooProduct response to the app's central Product type — TypeScript catches any schema drift before it reaches production.
IS_LIVE Data Toggle
A single environment variable (NEXT_PUBLIC_WP_GRAPHQL_URL) switches the entire data layer from demo mode to live WooCommerce. Set it and deploy — no code changes, no conditional imports scattered across the app.
Typesense Faceted Search
The product catalog is indexed in Typesense for millisecond, typo-tolerant search with multi-facet filtering. The seed-products script syncs from WooCommerce on demand — search is always in sync with the store.
CI/CD Pipeline
Every commit goes through linting, type-checking, and build validation before deployment. The main branch is always shippable — no manual QA steps before going live.
Composable Architecture
Frontend, commerce backend, and search are fully decoupled. WooCommerce can be swapped for Shopify, BigCommerce, or any GraphQL store without touching a single frontend component.
// User clicks Proceed to Checkout
proceedToCheckout(cartItems)
// Cart serialized to URL params
const url = new URL(WC_CHECKOUT_URL)
items.forEach(i => url.searchParams
.set(`item[${i.id}]`, i.qty))
// WP reconstructs cart + redirects
window.location.href = url.toString()
// Stripe/PayPal handles payment
✓ Next.js never touches payment data
Try it live
Press ⌘K to open the search modal. Every result is pulled from Typesense — typo-tolerant, faceted, and synced from the WooCommerce product catalog.
Content & commerce
How Products Get Into the Demo
Six hand-crafted specialty coffees and one brewing gear product — each with full origin data, flavor profiles, and roaster recipes.
01
WooCommerce as the Source of Truth
Products live in WordPress + WooCommerce on Pantheon. Each product has custom ACF fields for flavor profile, origin transparency data, roaster recipe, and brew guides — all exposed via WPGraphQL.
02
WPGraphQL → Normalizer → UI
The woo-normalizer.ts function maps WooProduct (raw GraphQL response) to the app's central Product type. Every component consumes the normalized type — no GraphQL-specific code ever leaks into the UI layer.
03
Typesense Index Sync
Run `pnpm seed-products` to push the full WooCommerce catalog to Typesense. The search index mirrors product names, categories, origins, flavor notes, and SCA scores for instant faceted search.
| Product | Category | SCA Score | FOB $/lb |
|---|---|---|---|
| Ethiopia Yirgacheffe | Single Origin | 91.5 | $6.40 |
| Colombia Huila Honey | Single Origin | 89.25 | $5.85 |
| Yemen Mokha Natural | Single Origin | 92.0 | $18.50 |
| The Meridian Blend | Blend | 87.0 | $3.80 |
| Sumatra Mandheling | Single Origin | 85.75 | $3.45 |
| Kalita Wave 185 Stainless | Gear | — | — |
The Devioand doctrine
This Is What Sovereign Engineering Looks Like
Every decision in this codebase reflects the five principles Devioand applies to every client engagement.
01
Absolute Client Sovereignty
Every repo, every cloud account, every API key provisioned in your name. Devioand is an invited collaborator — not a gatekeeper. You can fire us in five minutes and keep 100% of the work.
02
Production-First Engineering
We don't build demos. This platform was architected from commit zero for real traffic — typed queries, secure checkout handoffs, edge caching, and error boundaries throughout.
03
Zero-Layer Collaboration
No account managers, no telephone game. You speak directly to the engineers writing your code. Questions answered in minutes, not days.
04
Strategic Tech Candor
We stress-test ideas before writing a line. If a feature won't scale, we say so. If there's a better architecture, we show it. You're paying for our expertise, not our typing speed.
05
Cognitive Performance
Calm is fast. We protect focus time because tired developers write bugs. Your production environment is only as reliable as the person who last touched it.
“We believe in retention by excellence, not by handcuffs.”
— Devioand Doctrine
The Code Ownership Guarantee
Standard on every Devioand engagement
- ✓All code pushed to your GitHub org — not ours
- ✓All cloud infra in your name with your billing
- ✓Architecture docs updated in real-time in your wiki
- ✓Zero friction off-boarding — no transfer fees
Built with AI. Verified by engineers.
We use AI to accelerate boilerplate, but every architectural decision and security-critical path has human expert review. AI code is guilty until proven innocent.
Ready to build the real thing?
We built this in days.We can build yours too.
Whether you run a specialty retail brand, a DTC product company, or an enterprise store — this same stack, with this same level of engineering rigour, is available for your business.