# case · 06 / 07 · 2024
● live demoe-commercenext.js 16supabaserazorpay
Arvora — production-grade full-stack e-commerce with real payments.
#01 · tech stack
#02 · architecture
Supabase-first. No API layer for reads.
storefront
· next.js app router
· server components
· client cart (zustand)
supabase js sdk
supabase
· postgresql · rls
· auth (email/pass)
· storage (images)
payments
· razorpay webhook
· hmac-sha256 verify
· stripe + cod
api routes only
admin
· full crud
· recharts analytics
· order lifecycle
schema
· 9 core tables
· jsonb addresses
· nested categories
detail · 01
supabase-first reads
100% client-side data fetching via Supabase JS SDK — no traditional API layer for queries. Only payment webhooks use Next.js API routes. Keeps the architecture simple and fast.
detail · 02
payment verification
Razorpay HMAC-SHA256 signature validated server-side before any order is created. Payment gateway flows are the only thing behind an API route.
detail · 03
self-referencing categories
parent_id FK supports unlimited nesting depth. A single categories table handles flat and nested hierarchies without schema changes.
#03 · storefront · customer-facing
Everything a real store actually needs.
// shopping experience
+Product catalogue — category filters, rating filters, sort, pagination
+Product detail pages — image galleries, verified review system (1–5★)
+Smart cart — free shipping progress bar (₹2,999+), quantity controls, auto 18% GST
+Multi-step checkout — shipping form → payment → order confirmation
+Multi-gateway payments — Razorpay (UPI, cards, netbanking, wallets), Stripe, COD
+Order tracking — post-purchase order detail and history
// account & loyalty
+Supabase Auth — email/password, profile management, address book
+Order history and real-time delivery tracking
+Loyalty program — earn rewards, exclusive member offers, early drops
+Newsletter subscription with email capture
+Customer testimonials from verified purchasers
+India-first — INR, 18% GST, ₹2,999 free-shipping, COD as default
#04 · admin dashboard
Production-quality. Not a toy panel.
// analytics
Revenue trends, orders by status, revenue by category, AOV, KPI cards. Period filters: 7d / 30d / 90d / 1yr. Powered by Recharts.
// product management
Full CRUD — multi-image upload (Supabase Storage), SKU, inventory tracking, featured toggle, draft/active/archived status.
// order lifecycle
7-state workflow: pending → paid → processing → shipped → delivered (+ cancelled / refunded). Full status history per order.
// category management
Nested parent/child categories with images. Self-referencing schema supports unlimited depth.
// customer management
Profiles with lifetime value, order count, role filtering, bulk CSV export.
// store settings
Toggle payment methods on/off, set announcement bar copy, configure free-shipping threshold — no redeploy needed.
#05 · database schema
// core tables
productscategoriesordersorder_itemsprofilesreviewscouponsstore_settings
Orders carry full denormalized shipping/billing address as JSONB, payment method, gateway transaction ID, and tax/shipping breakdown — no joins needed to reconstruct an order. Categories use a parent_id self-reference for unlimited nesting. File attachments stored via Supabase Storage with public CDN URLs.
#06 · by the numbers