Orenda On Forever
Technologies Used
Web Project Info
Gallery
Immersive homepage with curved advertising banners
The product photography brief required a photorealistic depth that standard flat photography cannot achieve for sports equipment at this price tier. Rather than embedding a WebGL scene (which introduces significant load-time overhead for users on mobile or slow connections), the decision was made to use Blender-rendered images as the primary visual medium. The renders are composited into curved hero banners and product showcase sections using CSS transforms and SVG clipping paths, creating a three-dimensional visual impression without any runtime 3D engine.
The cart architecture needed to handle both authenticated and guest users without losing basket state on logout or page refresh. For authenticated users, cart items are stored in a Supabase carts table linked to their user ID with RLS preventing cross-user reads. For guests, items are stored in localStorage. On login, the system merges the localStorage guest cart with the database cart, resolving conflicts by taking the higher quantity for duplicate SKUs.
Payment processing uses Stripe with a Node.js backend. The client calls a /create-checkout-session endpoint, which uses the Stripe SDK to create a session with line items pulled from the Supabase products table. Stripe handles payment collection and fires a webhook to the backend on completion. The webhook handler verifies the Stripe-Signature header and writes the fulfilled order to the orders table.
Key Features
Blender-rendered visuals composited with CSS transforms as the primary product medium
Hybrid cart: Supabase RLS-backed for authenticated users, localStorage for guests, merged on login
Stripe Checkout session with server-side line item validation against Supabase products table
Stripe webhook handler with signature verification for order fulfillment
Gender-organized product catalog with role-specific browsing paths
Curved advertising banners via SVG clip-path and CSS compositing
User Experience
User Flows
Accessibility
Architectural Implementation
Guest-to-Auth Cart Merge
On authentication, a client-side merge function reads all localStorage cart entries and queries the user's existing Supabase cart rows in a single transaction. For each SKU in localStorage, if a matching row exists in Supabase it updates the quantity to max(localStorage_qty, db_qty). Otherwise it inserts a new row. The localStorage entries are then cleared. This prevents item loss during the login flow.
Stripe Webhook Order Fulfillment
The Node.js backend registers a /webhook endpoint that receives Stripe payment_intent.succeeded events. The handler uses stripe.webhooks.constructEvent with the raw request buffer and Stripe-Signature header to verify authenticity before processing. On success, it writes a fulfilled order record to Supabase and updates product inventory counts atomically using a PostgreSQL transaction.
Outcomes
E-commerce platform launched with live Stripe payment processing
Secure multi-role cart and order system operational in production
Blender visual language established as the brand identity standard