Halden

Overview

Halden is a demo fashion e-commerce build covering both sides of a shop: the storefront a customer buys from and the dashboard the owner runs it with. The two share one data layer, so an order placed at checkout shows up in the admin, drops stock levels, and honours discount codes created there.

Challenge

Most store demos stop at a pretty product grid. The goal here was to prove the harder part — that the cart, stock, orders and admin hold together as a system — without needing real payment accounts or a hosted database for a visitor to try it.

Approach

The storefront and admin were built on shared persisted stores behind a single catalogue API, with prices always read from the catalogue rather than the bag, and stock enforced when an item is added, when the bag loads and again at checkout. Checkout is simulated and clearly labelled, ending in an order confirmation with a lookup and status history.

Design

Warm paper and ink with square corners and an editorial serif for headlines. A deep oxblood is used only to mark sale prices so it keeps its meaning. Motion is restrained and CSS-only: scroll reveals, a hero intro and subtle hover lift.

Development

Next.js 16 with TypeScript, Tailwind CSS v4 and shadcn/ui. 37 sample products across 8 categories, filter and sort state kept in the URL, and a typed catalogue seam that could be swapped for a real backend. 117 automated tests cover the cart, stock, filters, discounts and admin actions.

Responsive Experience

Audited across 19 routes at mobile, tablet and desktop widths with no horizontal overflow or clipped text.

Final Result

Live at halden-store-silk.vercel.app as a portfolio demo. All products, orders and payments are sample data; nothing is charged and data stays in the visitor’s own browser.

Key Features

• Storefront with category pages, filters, sort and full-text search
• Shopping bag and wishlist that persist between visits
• Simulated checkout with order confirmation, lookup and status history
• Admin: orders, products, inventory, customers, discounts, analytics and settings
• Orders placed on the storefront appear in the admin and decrement stock
• Discount codes and shipping rules that apply at checkout