01E-commerce
Elyra
Beauty e-commerce, end to end
A full direct-to-consumer storefront for an LED skincare brand — catalogue, checkout, editorial blog and an automated content pipeline. I own the design, the storefront, the admin and the infrastructure.
- Role
- Design & Full-stack
- Year
- 2025 — 2026
- Type
- E-commerce
- Status
- Live
Stack
- Next.js 16
- TypeScript
- Tailwind v4
- Supabase
- Stripe
- MDX
- Resend
- Vercel
The problem
The brand had a product but no way to sell it. Off-the-shelf platforms locked the storefront into a template, took a cut of every sale, and made the editorial side — the part that actually brings traffic — an afterthought.
The goal was a storefront I fully control: fast, indexable, multi-currency, and cheap to run — with content production that does not depend on someone remembering to write a blog post.
What I built
01
Storefront & checkout
Product catalogue rendered statically with incremental revalidation, so the pages are as fast as a static site while stock and pricing stay current.
Checkout runs on Stripe Checkout with a webhook that fulfils the order, writes it to Postgres and triggers the transactional email through Resend. Prices and currency resolve from the visitor's region rather than a single hard-coded market.
02
Editorial engine
The blog is MDX, so an article is a file — versioned, diffable, and renderable with real components instead of a WYSIWYG blob.
Scheduled jobs draft and publish content on a cadence, keeping the long-tail SEO surface growing without manual work.
03
Admin
A drag-and-drop merchandising panel for reordering collections and featured products, backed by Supabase row-level security so the admin surface is genuinely locked down rather than hidden behind an unlisted URL.
Engineering decisions
Static-first rendering
Product and article routes are prerendered and revalidated on demand. Cold traffic never waits on a database round-trip.
Webhook-driven fulfilment
Order state is derived from Stripe events, never from the browser. A closed tab mid-payment cannot lose an order.
Scheduled automation
Cron routes handle content generation, product sync and analytics cleanup — the site maintains itself between releases.
Row-level security
Authorisation lives in Postgres policies, so an API mistake cannot leak another user's data.
Outcome
A storefront the brand owns outright, with no platform fees and no template ceiling — around 400 source files covering the shop, the blog, the admin and the automation.