Wandr Jewelry: E-Commerce Engine with Stripe

Wandr Jewelry is a high-end e-commerce platform engineered for luxury jewelry brands that need more than a storefront. The core challenge: build a system that handles secure payment processing, real-time inventory automation, and a dual-checkout architecture (card payments and direct WhatsApp orders) without sacrificing the premium visual experience that high-ticket products demand.

The platform supports two distinct purchase flows, both engineered for conversion:

Stripe Payment Gateway: Full integration with the Stripe API for secure credit card transactions (Visa, MasterCard). Payment intents, error handling, and confirmation flows are managed through a custom service layer that abstracts Stripe's SDK, keeping components clean and the checkout flow resilient to API edge cases.

WhatsApp Direct Orders: A "Personal Touch" checkout path that serializes the full cart state (items, quantities, pricing) into a structured WhatsApp message and routes it directly to the seller. This gives high-ticket buyers a human touchpoint without requiring the seller to manually reconstruct order details from fragmented DMs.

Every completed transaction, whether paid via Stripe or routed through WhatsApp, triggers an automated sync to a Google Sheets database via Google Apps Script. No manual data entry, no reconciliation lag. The pipeline handles:

Order logging with timestamps, item details, quantities, and payment method.

Inventory decrement on successful checkout to prevent overselling.

Dual-source consistency ensuring both checkout paths write to the same data layer.

Cart state, checkout flow, and UI state are managed through Zustand, chosen for its minimal boilerplate and predictable update patterns. The store architecture keeps cart operations (add, remove, quantity updates, total calculations) isolated from UI rendering logic, making the checkout flow testable and the component tree lean.

The luxury market demands a visual experience that matches the product. Framer Motion powers the signature "curtain" reveal animations, page transitions, and micro-interactions throughout the store. Every animation was performance-profiled to ensure smooth 60fps rendering, with layout animations using transform-only properties to avoid triggering reflows.

Built with React.js and structured around a modular component architecture:

Presentational and container separation for testability and reuse.

Custom hooks for Stripe integration, cart operations, and WhatsApp message serialization.

Responsive layout system using Tailwind CSS utility classes, ensuring the luxury aesthetic holds from mobile to desktop without custom media query overrides.

The visual design was crafted in Figma with a focus on high-ticket product presentation: generous whitespace, editorial typography, and photography-forward layouts. Translating this to code meant building a component library that preserves the premium feel while supporting the complex interactive requirements of dual-checkout, animated transitions, and real-time cart updates.

Wandr Jewelry ships as a production-ready e-commerce engine that handles the full purchase lifecycle: browsing, cart management, dual-path checkout, payment processing, and automated inventory sync. It demonstrates that luxury e-commerce doesn't require a monolithic platform when the engineering is modular, the integrations are tight, and the frontend experience is built to convert.

Live site: wandrjewelry.vercel.app