Web
Design and build
E-commerce platform
A production e-commerce template on Next.js 16: storefront, cart, real Stripe checkout, accounts and admin, all driven from one config file and runnable end to end with no API keys.
Stack: Next.js, TypeScript, Tailwind CSS, Prisma, Auth.js, Stripe, Vitest, Playwright
Problem
Most store templates stop at a nice product grid. This one had to get money, stock and security right before it looked good.
What I built
- The server re-prices every cart line from the database before creating the payment intent; one pricing engine, integer cents only.
- Order lifecycle with an event timeline and an idempotent paid transition; status changes that cancel an order return stock.
- Security: per-account lockout (5 per 15 minutes), per-IP ceiling, no user enumeration, bcrypt cost 12, CSRF origin checks, and two CSPs (nonce plus strict-dynamic on dynamic routes, a static policy on cacheable pages).
- Catalogue moved from in-memory filtering to SQL with nine composite indexes; SQLite in WAL mode with busy_timeout.
- The whole theme derives at runtime from two seed colours in OKLCH, including dark mode, focus rings and the OG image.
- A business-model switch (physical, digital, subscription, services) reshapes the UI without component edits.
Proof
- Cut p95 response time by 24% (3685 ms to 2784 ms) under a 150-user load test with zero errors, by moving catalogue filtering into indexed SQL
- Shipped with 101 unit tests plus Playwright end-to-end tests, which caught five real defects before release
Stack
- Next.js
- TypeScript
- Tailwind CSS
- Prisma
- Auth.js
- Stripe
- Vitest
- Playwright
Share this case