A clothing label that does not exist, with a shop that tells the truth. The bag is checked against the real shelf every time it opens, and an order is taken whole or not at all.
Kalahari Threads is a small Windhoek label with twenty-four pieces, most of them in two or three colours and five sizes. It is made up. What it proves is the part of a shop that is easy to get wrong, which is what happens between adding something to the bag and paying for it. Stock, prices and codes can all change in that gap. Here the bag is checked against the shelf every time you open it, a line that has changed says exactly how, and an order either takes everything off the shelf or takes nothing. The back office changes the same shelf, so you can make it all happen yourself. Pieces can be saved to a wishlist and moved to the bag later, with the stock checked again at that moment, and a lookbook page shows the label's photographs.
The page asks the server for the range. Stock is generated from each size and colour, so about one variant in ten is sold out and one in six is nearly gone. That is what makes the edge cases easy to find.
The size picker asks for the shelf again
Choosing a colour and size does not trust the list you loaded a minute ago. The picker fetches the stock for that product fresh, so a size that sold while you were looking is shown as sold.
The bag keeps only what you chose
The bag lives in your browser and holds the item, the quantity and the price you saw. It holds no personal details, and the server never trusts it. Every price, count and total is worked out again on the server.
Opening the bag is a check, not a lookup
The server compares each line with the shelf. A line can be fine, short of stock, gone from the range, or at a new price, and each is told to you in words with a button to fix it. Delivery by country and area, a discount code and the 15% VAT already inside the prices are worked out in the same pass.
Paying is one step, not several
The order checks every line and takes every quantity in a single write to the shelf's one document, with a check that nothing else changed since it was read. If any line fails, nothing is taken and each failing line is named.
The back office moves it on
The order is marked paid, then packed, then shipped, and the same office changes stock, prices, codes and which pieces are in the range. Those edits show up in your bag the next time you open it.
Real versus mocked
What is real and what is mocked in this demo
Part
Status
Detail
Stock and the shelf
Real
Every size and colour has a count. The picker, the bag and the order all read it, and the back office writes it.
All-or-nothing order
Real
One write checks every line and takes every quantity, or takes nothing. Tested with 30 parallel orders for the last shirt and 40 for a stock of five. On the live site, 15 parallel orders for a size with five in stock: exactly 5 went through and the shelf ended at 0.
Price and stock changes in the bag
Real
A changed price must be accepted, and a short or retired line must be fixed, before checkout opens. Nothing is changed silently.
Delivery
Real
Zones and weight bands, minimum spends, expiry in Windhoek time and 15% VAT included in the price, with totals that always add up. A property test covers codes, countries and baskets.
Back office
Real
Orders, stock, prices, codes and the range all change what the public sees. Changes affect your own copy only.
Payment
Mocked
A test card form. The card details are checked in the page and never sent. Nothing is charged.
Email
Mocked
Nothing is ever sent, not an order confirmation, not the waiting list. The tracking number is invented.
Products
Mocked
Invented. Product and lookbook photographs are licensed stock (Unsplash), not real garments; colourways without a photograph show a fabric swatch. No real brand, fabric supplier or trademark is used.
Stock levels
Mocked
Generated from each variant, not a warehouse.
Data and privacy
Kalahari Threads is fictional, so use made-up names and details. What you enter lives in your own private copy of the demo, which no other visitor can see, for up to 24 hours. A nightly job at 02:00 Windhoek time clears it. Nothing is charged, nothing is sent, and the card form never leaves your browser.
Under the hood
Initial JS
132 KB gzipped, React, Router and the motion code included (the budget is 150 KB). Measured on the live site.
Lighthouse
Live site, mobile, three runs: Performance 85 to 95, Accessibility 100, Best Practices 93, SEO 100.
demos/kalahari/src/lib/stock.js The shelf: seeded stock, a line's status, and the all-or-nothing order commit.
demos/kalahari/src/lib/cart.js Prices a bag: discount, delivery, total and the VAT inside it.
demos/kalahari/src/lib/shipping.js Delivery zones, weight bands and free-delivery rules.
demos/kalahari/src/lib/discounts.js Codes, minimum spends and expiry in Windhoek time.
packages/demo-kit/src/store.js The store and its atomic update, shared by every demo.
What I would do differently
The shop does not hold stock while someone is checking out, so whoever loses the race finds out at the last step. That is honest and simple, but it is the first thing a busy real shop would change, with a short reservation like the 15 minute hold in the safari demo. I would also measure what the extra check on every bag open costs before calling it cheap.
Namib HorizonsA small safari company that does not exist, with a booking system that does. Seats are counted live, held for 15 minutes and sold without ever being sold twice.
Ember & SaltA restaurant that does not exist, with a reservation system that does. It only offers tables that are really free, and a service board that runs the night.