Baron Stitches
Full-Stack Engineer, client build
E-commerce storefront · 2026 · Live
Baron Stitches is an atelier in Uyo selling ceremonial and formal wear, agbada, senator, suits, and casual pieces. I built the whole system solo in two weeks: the schema, the storefront, the order and payment path, and the console the shop runs its own catalogue from. It serves the client's real garments and real photography, with the payment flow built behind server-side verification and an independent amount check.
The problem
A tailoring house sells two things that behave differently. A ready-to-wear piece is stock, counted per size. A made-to-measure piece is a commission with a set of measurements attached. Both have to sit in one catalogue without asking the customer to work out which is which, and the money has to be provably real before an order exists.
Architecture
- Client
- Next.js 16 App Router with React 19: server components render the catalogue and product pages, client components handle the cart and forms. Tailwind CSS v4 on theme tokens, Framer Motion throughout. Dark mode is hand-rolled on useSyncExternalStore rather than a library, so the server and client agree on theme at first paint.
- State
- Cart in a React context persisted to local storage, keyed by product and size so one garment in two sizes is two lines. React Query backs the admin product CRUD.
- API
- A server action places orders, holding the payment secret key server-side. Reads go straight to Postgres through PostgREST, including a single nested query that returns a product with its per-size stock in one request.
- Data
- Supabase Postgres across six entities: products, inventory, customers, orders, order items, and admin users. Stock is its own table keyed by product and size. Garment photography in object storage.
- Auth
- Two-stage admin sign-in: the account must exist and be active before credentials are checked at all. Session enforcement is server-side in the protected layout. No customer accounts, deliberately, to keep checkout friction low.
- Infra
- Vercel, with Supabase providing database, auth, and object storage, and Resend for transactional email.
Decisions
The browser cannot be trusted to say a payment happened
A payment callback fires in the customer's browser, which makes it forgeable. Orders are therefore never written from the callback. The server action re-fetches the transaction from the processor using a secret key that never reaches the client, then independently re-computes the amount against the order total before anything touches the database, allowing a kobo for rounding. A transaction the processor reports as successful is still refused if the figures disagree. The cost is an extra round trip at the slowest point in the flow, accepted because the alternative is writing paid orders nobody paid for.
A garment can be stock and made-to-measure at once
The same design might be bought off the rack in size 42 today or commissioned to measurements, so a single type column cannot describe it. Availability is two orthogonal flags instead of an enum, giving four valid states the interface branches on, and every order line carries its own type beside either a size or a measurement set. Stock became its own table for the same reason: quantity is per size, not per product, so no single column could hold it, and the low-stock threshold and SKU belong next to the quantity rather than on the garment.
A cart read from the browser cannot be rendered on the server
A returning customer's basket lives in local storage, which the server cannot see, so reading it during the first render makes the client disagree with the HTML it was sent. The provider always starts empty and loads after mount behind a hydration flag the header waits on, so the basket count appears once instead of flickering through a stale value. The cost is an extra render pass and a brief moment where a returning cart reads as empty, accepted because a hydration mismatch is a correctness bug and the flicker is a cosmetic one.
Outcomes
- Live storefront for a working atelier: the shop's own garments and photography, per-size stock, and search, filtering, and sorting across the catalogue
- Admin console the shop runs itself from, with product and inventory management, image upload, and a dashboard computing stock levels, low-stock alerts, and category breakdown from live queries
- Payment path built end to end behind server-side verification and an independent amount check
- Delivered solo in two weeks, from schema to production deployment
Built with
- Next.js
- React
- TypeScript
- Tailwind CSS
- Supabase
- PostgreSQL
- React Query
- Framer Motion
- Paystack
- Resend
- Vercel
Screens
