Audiophile
protocol : Audiophile
An entry from the chronicle of built things — its purpose, its materials, and the bargains struck along the way.
Audiophile is a production-ready e-commerce platform for high-end audio equipment: a storefront of headphones, speakers, and earphones with a full cart and checkout flow, built as one end-to-end type-safe monorepo.
The client is React with TanStack Query in front of a Node.js API, Prisma mapping a MongoDB database beneath it. TypeScript runs the full length of the stack, and Zod validates every request at the API boundary, so the contract between the two services is checked at runtime as well as compile time.
Authentication and hardening are part of the exhibit: JWT sessions carried in httpOnly cookies, Helmet on every response, and rate limiting in front of the API. The client and the API deploy as separate services on Render.
tech_stackInventory of Materials
- ReactInterface
- Node.jsRuntime
- PrismaData mapper
- MongoDBDatabase
- ZodValidation
- TanStack QueryServer state
Engineering Tradeoffs
Splitting the client and API into separately deployed services bought independent deploys and an explicit contract between the two halves, at the price of running and configuring two services instead of one.
That split made authentication the hard part. Keeping JWTs in httpOnly cookies shields them from script access, but cookies across two origins turn CORS and cookie configuration into deliberate, easy-to-get-wrong work — the cost of not parking tokens in localStorage.
Optimistic updates through TanStack Query make cart interactions feel instant, but every optimistic mutation needs a rollback path for when the server disagrees. The cache-invalidation rules that keep the UI honest are real complexity the instant feel is paid for with.