The Certified Christian
Print-on-Demand E-Commerce Platform
Key Technical Highlights
Zustand for ephemeral UI state + TanStack Query for server state — clean separation prevents the anti-pattern of storing server data in client stores
Fabric.js-powered product design tool — customers upload artwork, add text, and reposition elements on a canvas before ordering; canvas state serialises to JSON and is stored with the order
Full Stripe Refunds API integration — refunds triggered programmatically when a return request is approved in the admin panel, no manual Stripe dashboard interaction
Complete admin panel: product management, order tracking, inventory alerts, customer records, promo code engine, and returns management
OTP-based email verification via Resend + React Email templates — custom email components for every transactional event
The Case Study
Overview
The Certified Christian is a full-stack print-on-demand e-commerce platform for custom branded merchandise. The platform handles the complete commerce lifecycle — browsing, cart, checkout, order management, and post-purchase returns — with a full admin panel and a post-MVP product design tool.
State Management Architecture
The application uses a deliberate split: Zustand manages ephemeral client-side state (cart UI open/closed, modal states, filter selections). TanStack Query manages all server state (product data, orders, user profile). This separation prevents the common anti-pattern of stuffing server data into Zustand stores, which breaks React Query's caching and invalidation model.
The Design Tool
Post-MVP, customers can customise products before ordering. The Fabric.js canvas lets users upload their own artwork, add styled text, and reposition elements. The final canvas state serialises to JSON and is stored alongside the order record — enabling print-ready output generation and accurate order reproduction.
Payments and Returns
Stripe handles all payments with webhook confirmation before order state transitions. Returns are managed through the admin panel: when a return is approved, the Stripe Refunds API is called programmatically — the admin never needs to touch the Stripe dashboard.
Auth and Email
Full authentication with credentials + Google OAuth. OTP-based email verification for new accounts. Resend powers all transactional emails built as React Email components — order confirmation, shipping updates, return status, promo codes.