Résumé

E-commerce rebuild

Ascendtials

A storefront for a research-use peptide catalog. I recovered the original static site's source, moved pricing and order logic onto the server, and rebuilt it as a Next.js app on Supabase.

Visit ascendtials-site.vercel.app Overview
Ascendtials storefront home page with a research-use-only banner, kit headline and catalog buttons
49product pages pre-rendered at build
11tabs in the owner dashboard
3Supabase Edge Functions

The challenge

The store started as a static HTML site on a Supabase backend. Prices, order totals and protected-page checks all ran in browser JavaScript, which anyone can read and change, and the account pages rendered first and redirected after.

Its "Summer Sale" badges were synthetic too: each item's discount percentage was generated from a seed, not compared with any price the store had actually charged.

The approach

I rebuilt the source from a mirror of the live site, then moved every rule that matters off the client. Checkout now sends only item codes and quantities. A place-order Edge Function re-prices each line from a server price map plus live catalog overrides, and a payment webhook verifies its HMAC signature before a database function marks the order paid and credits the referral, each exactly once.

Pricing lives in one plain module that both the site and the server price map are built from. New prices are blended with the previous list price, charm-rounded in integer cents so float noise can't bump a price up a step, and a strikethrough "was" price only appears where the item really sold for more before. Then I ported the whole thing to the Next.js App Router, with middleware that redirects signed-out visitors before a protected page renders.

  • Server-side pricingClient totals are ignored; the checkout function recomputes every line and rejects inactive or out-of-stock items.
  • Honest "was" pricesA markdown shows only against a real prior list price, never a made-up one.
  • Affiliate programApplications, referral codes, payout requests and a payout ledger, all behind Row Level Security.
  • Owner dashboardEleven tabs for analytics, orders, affiliates, messages, catalog prices and stock, certificates and photos.

How an order is priced

  1. 01BrowsePrices rendered from the shared catalog module
  2. 02CartLines re-anchor to live prices and stock
  3. 03place-orderServer re-prices and stores the order
  4. 04WebhookSignature checked, paid once, referral once

Only real markdowns.

The 10mL size shows a struck-through price because it genuinely listed higher before; the 3mL size didn't, so it shows none.

Ascendtials product page for bacteriostatic water with two size options, one showing a struck-through previous price

Three pricing rules, worked through.

Blend with the prior price, charm-round to the next X4.99 or X9.99, and price kits from their live parts at about 13% off. These are sample numbers run through the real functions.

Diagram of the pricing engine with three worked examples: a price drop, a price increase and a kit

Two gates on everything.

Middleware and server checks decide who sees a page; Row Level Security and security-definer functions decide what the database will actually do.

Architecture diagram of page guards, the place-order and payment-webhook Edge Functions, and Postgres Row Level Security

Tools

  • Next.js
  • React
  • TypeScript
  • Supabase
  • PostgreSQL
  • Edge Functions
  • Resend
  • Vercel

Home page captured from ascendtials-site.vercel.app (which still serves the static version of the store); the product page from a local run of the Next.js port; the pricing and architecture diagrams drawn from the repo's code. Checkout is intentionally switched off until payments are configured, and no account, admin or order screens are shown. The visual design comes from the original static site.

Next projectSherlockScanSherlockScan landing page with Investigate Plagiarism and Upload a PDF buttons