Back to PortfolioBack
2026
Artisan E-Commerce / ConfiguratorBead·Craft · بيد كرافت

One bracelet,
your story.

A bilingual storefront and crafter dashboard for a Tunisian artisan selling custom, made-to-order beaded bracelets — with a visual configurator that lets customers string their own design, bead by bead, before checkout.

Live site
BeadCraft Studio storefront
Handcrafted in Tunis Made to order Ships in 3–5 days 24 governorates
Contents
01

Made-to-Order Bracelet Commerce

Turning a maker’s craft into a product.

BeadCraft Studio turns a one-person handmade-bracelet business into a real online product. Customers browse bead collections and ready-made designs, then open a visual configurator to build their own bracelet — choosing beads, cord, and charm with a live preview — and save, share, or order it. Behind the storefront, the crafter runs a dashboard for inventory, an order pipeline (New → Confirmed → In Production → Shipped → Delivered), and per-wilaya shipping. Built on Next.js 16 Server Components with Zustand driving the interactive surfaces.

The problem

A skilled artisan could make beautiful custom bracelets but had no way to sell them online — no product catalogue, no way for customers to visualise a custom piece, and no system to manage made-to-order production and Tunisian delivery.

The answer

A two-surface app: a warm, bilingual storefront with a real-time bracelet configurator that makes customisation feel tactile, and a crafter dashboard that turns each custom order into a tracked production job with idempotent checkout and per-wilaya shipping.

02

Make it feel tactile, not technical

The configurator

BeadCraft bracelet configurator

Customers pick a piece, then build it bead by bead — choosing beads, cord, and charm with a live 2D preview in curved, flat, or grid layouts. Every choice updates a Zustand store, and finished designs can be saved, shared by link, and reordered.

Live 2D preview
Shareable designs
EN / FR storefront
Idempotent checkout
03

A palette rooted in place

Collections & designs

Medina collection beads
Ready-made bracelet designs
Sahara collection beads

Collection names and bead colours are drawn from Tunisian places and motifs — Medina, Sahara, Sidi Bou — so the catalogue reads as local, not generic.

04

The operational side

Crafter dashboard

New
Confirmed
In Production
Shipped
Delivered

Inventory

A bead inventory grid and detail drawer keep stock and low-stock flags in view.

Orders

Each custom order becomes a tracked job moving through a five-stage pipeline.

Shipping

A per-wilaya fee editor sets delivery pricing across all 24 governorates.

Overview

KPIs, top beads, and a wilaya breakdown give the crafter an at-a-glance read.

Real-time 2D bracelet configurator (curved / flat / grid layouts)
Save, share, and reorder custom designs via share keys
Bilingual EN/FR storefront with bead collections and ready-made designs
Guest checkout across 24 Tunisian wilayas with TND pricing
Crafter dashboard with a New → Delivered order pipeline
Per-wilaya shipping-fee editor and KPI overview
Idempotency keys on order creation; optimistic locking on status changes
Repository-pattern data access with Zod validation at every boundary
05

What it's built on

Technology stack

Two
Surfaces
Storefront + crafter dashboard
EN / FR
Languages
Bilingual, TND pricing
24
Delivery
Tunisian wilayas

Frontend

Next.js 16
React 19
TypeScript
Tailwind v4
Zustand

Data & Auth

PostgreSQL
Prisma 6
Auth.js
Zod

Runtime

Bun

Let’s work together

Need something like BeadCraft built — or taken further?

I partner with founders and small teams to ship production software, start to finish. Tell me what you’re building.

Start a projectEmail meWhatsApp
Next case studyMenu QR