← Back
Projects
Verdant Lane
Production-minded storefront with a Stripe-backed catalog, persistent cart, protected receipts, and durable order processing.
Project Snapshot
- Role
- Frontend Developer
- Product type
- E-commerce storefront
- Scope
- Catalogue, Checkout & receipts
- Quality & delivery
- Signed webhooks & idempotent orders
Stack
- Next.js App Router
- React 19
- TypeScript
- Stripe Checkout + Webhooks
- Neon Postgres
- Zustand
- React Hook Form + Zod
- Radix UI + CSS Modules
- Vitest + Playwright
Context
An e-commerce storefront that needs a Stripe-led catalogue, trustworthy Checkout data, and durable order records.
Constraints
- Keeping the live Stripe catalog consistent between the storefront and Checkout without trusting browser-owned product, price, currency, or quantity data.
- Authorizing receipt access, authenticating webhook events, and persisting order state safely across duplicate deliveries and retries.
- Keeping builds and CI deterministic and secretless while still supporting a live Stripe-backed production deployment.
Key Decisions
- Validate the catalogue before Checkout. Index one cached Stripe snapshot by product, slug, and price, then revalidate every item, quantity, currency, redirect, and promotion.
- Protect receipts and webhook processing. Use a per-session HttpOnly proof for receipts and verify signed raw-body webhooks before recording payment outcomes.
- Persist monotonic order state. Store durable payment outcomes and a unique fulfillment outbox record in Postgres to handle duplicate deliveries and retries.
Verified Outcomes
- Connected a Stripe-backed catalogue to Checkout while revalidating browser-supplied items and quantities.
- Protected itemized receipts with a per-session HttpOnly proof.
- Stored idempotent, monotonic order state and a unique fulfillment outbox record in Postgres.
Trade-off
The deployed storefront uses Stripe test mode. It demonstrates the catalogue, Checkout, and protected receipt flow without representing a live retail operation.