Case study · E-commerce

Verda Spice: one website for shoppers and for the trade

Single-origin, organic Kerala spices, sold two ways from one system. Shoppers buy from one jar. Approved businesses see their own price list and order in bulk. The team runs it all from an admin they use every day.

Watch the walkthrough Visit the live site

Verda Spice home page: a close-up of black and green peppercorns behind the headline “Spice, with a story.”

Client: Verda Spice Ltd
What we built: Online shop, trade ordering area, admin panel, email system
Platform: Cloudflare (Workers, D1, R2), React
Live site: verda-spice.molvernlabs.workers.dev

The brief

Two very different customers. One website that treats both well.

Verda Spice sells whole spices from small farms in Kerala: black pepper, green cardamom, whole nutmeg and mace. Two very different kinds of customer buy them.

At home

Someone cooking at home wants a jar or two and a simple checkout.

In trade

A restaurant, deli or food maker wants a proper price list, bigger quantities, a purchase order number and a VAT invoice.

They needed one website that treats both well, a way to run the business without a developer, and a brand that feels like the product: calm, rooted, and a little bit precious.

What we built

Three connected pieces, one database.

One codebase family and one database, with a fast API, an email system that keeps customers and the team informed, and hosting with no servers to look after.

The shop

For consumers.
The trade area

For approved businesses.
The admin

For the Verda Spice team.

For consumers

The shop

A dark, editorial storefront that lets the spice do the talking.

The spice collection page: four product cards over a film of the plantation and the headline “Spice, sourced with intent.” — The collection page, over a slow film of the plantation.

Made to feel like the product.
A film-led home page, a plantation film behind the collection, smooth page transitions and a considered type scale. On devices that support it, a soft cursor and subtle parallax. It all switches off for anyone who prefers reduced motion.
Buy more, save more.
Each spice page shows its price breaks and highlights the one you are on as you change the quantity.
A basket that does the sums.
Delivery, VAT and any discount are worked out by the server, so the price you see is the price you pay. Everything can be saved for later.
Discount codes with clear answers.
A code is applied with a click, and if it can’t be used the customer is told why (a minimum order, an expired code) rather than just “invalid”.
Check out as a guest, or keep an account.
Accounts have no password to forget: customers sign in with a six-digit code sent to their email.
Follow your order.
Anyone can track an order with its number and email address and see it move through Preparing, Dispatched, On its way and Delivered, with the carrier and tracking note. Signed-in customers get their full history, a VAT invoice for each order, and a one-click “order again”.
Honest stock.
“Low stock” and “Out of stock” show on the product, and the last jar can only be bought once.

Black Peppercorns product page with a quantity picker and a table of price breaks. — A spice page, with price breaks that follow the quantity.

The checkout drawer with delivery details and a discount code applied. — Checkout as a guest, with a discount code.

Order tracking page showing a four-step progress bar for an order that is on its way. — Preparing, Dispatched, On its way, Delivered, with the carrier and tracking note.

A signed-in customer’s order history, with an invoice link and an Order again link for each order. — Order history, with an invoice and “Order again” for each order.

More of the shop

The basket drawer listing three spices, with a subtotal and a Proceed to checkout button. — The basket does the sums.

The order-received drawer: “Thank you,” with the order number and what happens next. — Order received.

The Track your order form, asking for an order number and email address. — Track an order with its number and email.

A VAT invoice showing business details, line items, VAT and the amount due. — A VAT invoice for every order.

The About section: a jar of peppercorns beside the founder’s note about wanting pepper that tastes of something. — About: the story, told properly.

The Sourcing section: “Sourced from certified organic farms in Kerala,” beside a photograph of the Western Ghats. — Sourcing: where the spice comes from.

Open to everyone

A built-in accessibility panel lets every visitor tune the site to how they read: light or dark theme, three text sizes, text alignment, a dyslexia-friendly font, high contrast, highlighted links, and options to stop text animation or all motion. The film backdrop can be swapped for a plain background. Choices are remembered between visits.

The accessibility panel with theme, text size, contrast, dyslexia-friendly font and motion options. — The accessibility panel.

The collection page in the light theme with larger text. — The same page in the light theme with larger text.

Also in the shop

A story told properly: About, Sourcing and Our Farmers sections, with a 3D farmers carousel (and a flat 2D version for anyone who wants it).
A contact page, and a newsletter sign-up that asks for explicit consent and puts a working unsubscribe link in every email.
Per-page titles and descriptions, a sitemap and a social sharing card, so the site is ready to be found.

The Our Farmers page: “Kerala grows it. We just refuse to get in the way.” — Our Farmers.

The contact page: “Get in touch,” with the team’s contact details. — Contact.

For approved businesses

The trade area

Trade buyers get their own area at /trade, with its own header, footer and a clean paper-and-ink look. It is deliberately a different place from the consumer shop, and it is kept out of search results.

The trade area home page: “Single-origin Kerala spices, supplied to the trade,” with Apply for a trade account and Sign in buttons. — A separate, plainer place for business buyers.

Apply online.
A business fills in a short application and confirms its email with a code. The team then approves it from the admin (or, if they prefer, new accounts can be approved automatically with one switch). The business is emailed either way.
Prices stay private until approved.
The trade price list is only sent to approved accounts, and that is decided on the server. A shopper can’t see it by looking at the page.
A real price ladder.
From six jars, in steps of six, with the price per jar stepping down as the quantity rises.
Ordering like a business.
An optional PO number, trade pricing shown excluding VAT with the VAT worked out at checkout, its own delivery rules, a VAT invoice for each order, and reorder in one click.
Talk to a person.
A trade contact form sits alongside email and WhatsApp, and messages land in the same inbox as everything else.

Trade catalogue showing a price per jar from six jars, with a quantity stepper and Add button for each spice. — Approved businesses see their own price list.

The trade checkout drawer with delivery details, delivery, VAT and total, and a Send order request button. — Trade checkout, with an optional PO number.

The Apply for a trade account form, asking for business, contact and VAT details. — Applying for an account.

A trade account page for an approved business, with its details and past orders, each with Invoice and Order again links. — A trade account: details and order history.

The same catalogue, two views

Signed out, the catalogue shows the range but never the prices. Once a business is approved, the same page shows its own price ladder.

The trade catalogue for a visitor who is not signed in: products listed, prices hidden. — Signed out, the catalogue shows the range but never the prices.

Trade catalogue showing a price per jar from six jars, with a quantity stepper and Add button for each spice.

The trade area’s three summary cards above a four-step “How it works.” — How trade ordering works.

The trade contact page with a message form and other ways to reach the team. — Talk to a person.

For the Verda Spice team

The admin

The part of the project the team lives in. It is built to be calm and quick, and to tell you what to do next.

A day-start overview.

“Needs your attention” lists the things that matter: stock running low, unpaid orders, businesses waiting for approval, unread messages. Beside it, the last 30 days with comparisons.

Every admin screenshot comes from a demo copy with invented data.

Admin overview with a “needs your attention” list, recent orders and a last-30-days revenue chart. — Overview: what needs attention, recent orders and the last 30 days.

Inside the admin

Orders.

Search, filter by price list, jump between “awaiting payment” and cancelled, export to CSV. Record payment with a note, cancel with the stock put back, and print a VAT invoice with gapless numbering. Key in a phone order for a customer in a few clicks.

The admin orders list with search, a price-list filter, and tabs for awaiting payment and cancelled. — Orders.

Admin order panel showing items, payment, a four-step shipment bar, and carrier and tracking note fields. — An order: payment, shipment, carrier and tracking note.

Shipments.

Move an order from Preparing to Dispatched, On its way and Delivered, add the carrier and a tracking note, and the customer is emailed at each step.

The shipments list with status tabs and a button to move each parcel to its next step. — Shipments.

Trade accounts and messages.

A queue of applications with the business’s details, to approve or decline with a note that goes to them. Messages from the website’s forms land in one inbox, with an unread count.

The trade accounts queue with an application open, showing the business’s details and Approve and Decline buttons. — A trade application, ready to approve or decline.

The messages inbox listing enquiries from the website’s contact forms. — Messages.

Products and inventory.

Both price lists per product, draft and archive states, search-engine fields, and stock changes that always carry a reason, so there is a trail.

The products list showing each spice’s price range, stock and live status. — Products.

The product editor with a retail price ladder and a separate trade price ladder. — Two price lists for every product.

The inventory list with jars in stock, a stock-level bar and a status for each spice. — Inventory, with a reason for every change.

Discounts.

Percentage or fixed-amount codes with minimum orders, dates, usage limits and an audience: consumers, businesses, or both.

The discounts list showing each code’s value, who it is for, its usage and status. — Discounts.

The discount editor with fields for type, audience, minimum order, dates and usage limit. — Every code has an audience.

Campaigns, mailing lists and compose.

Campaigns tie a message to a code; mailing lists let you target groups. Write an email, pick subscribers and lists, see exactly how many people it will reach after de-duplication, and send. Every message carries its own unsubscribe link, and anyone who unsubscribes is respected everywhere.

The campaigns list with an active campaign tied to a discount code. — Campaigns.

Mailing lists with their member counts. — Mailing lists.

The compose screen with a subject, message, audience choices and a Review and send button. — Compose: see exactly who it will reach.

Customers.

Everyone who has placed an order, grouped by email address, with what they have ordered and spent.

The customers list, grouped by email address, with order counts and spend. — Customers, grouped by email address.

Analytics.

Revenue ex VAT, retail against trade, orders, average order, jars sold, top products and a map of sales by UK postcode area, all compared with the previous period.

The figures in these screenshots are sample data from a demo copy, not results.

Analytics page with daily revenue, a retail and trade split, and sales by UK postcode area. — Analytics: retail and trade side by side, with a UK region breakdown below.

Analytics scrolled to the UK postcode-area breakdown and top products. — Sales by UK postcode area, and top products.

Everything is recorded.

A full activity log and a notification bell for the things worth knowing.

The activity log listing admin, customer and system events with times. — A full activity log.

The notifications list with new orders and contact messages. — Notifications.

Settings the client owns.

Business details for invoices, delivery fees and VAT (separately for consumers and trade), automatic approval of business accounts, how long unpaid orders are held, and who receives alerts.

The settings page with business details, delivery fees and VAT for consumers and trade. — Settings the client owns.

Emails

Emails that do their job

Eleven designed emails, in the same voice as the site, keep everyone informed without anyone having to chase.

An order confirmation that says what happens next; a message each time the order is dispatched, on its way and delivered; their sign-in code; and, for businesses, a clear approval or decline.

Order confirmation email: “Thanks, Arjun. We’ve got your order,” with what happens next and the items. — Order confirmation

Dispatched email with a four-step progress bar, carrier and tracking reference. — Dispatched

On-its-way email with the progress bar at step three. — On its way

Delivered email with the progress bar complete. — Delivered

Sign-in code email showing a six-digit code. — Sign-in code

Trade account approved email with a button to sign in to the trade area. — Trade account approved

Trade application declined email, with a note explaining why. — Trade account declined

A new-order email with the customer’s details and a button straight to the order in the admin; contact messages; and alerts when a spice runs low or runs out.

New order email for the team, with the customer’s details and an Open order in admin button. — New order (to the team)

Contact message email for the team, with a Reply by email button. — Contact message (to the team)

Low-stock alert email for the team, with an Open in admin button. — Low-stock alert (to the team)

Out-of-stock alert email for the team. — Out-of-stock alert (to the team)

See it work

Two short walkthroughs

Recorded on a demo copy with invented data. Both have on-screen captions, so they work with the sound off.

About 90 seconds

A customer finds a spice, checks out as a guest with a discount code, the team sees the order, records payment and dispatches it with a tracking note, and the customer follows it on the tracking page.

What you will see

A customer browses the collection
Price breaks update as the quantity changes
The basket works out delivery, VAT and discounts
Guest checkout, with a discount code
The team sees it straight away
Record the payment, then dispatch with a tracking note
The customer follows it, with an email at every step

About 95 seconds

A business finds the trade area, sees that prices are hidden, applies and confirms its email, the team approves it in the admin, the trade price list appears, and the business orders with a PO number and finds the order in its account.

What you will see

A business finds the trade area
The catalogue shows the range, but no prices
It applies, and confirms its email
The team approves it in the admin
The trade price list appears
It orders with a PO number, and finds the order in its account

Under the hood

For the people who like to know how it is built

The three front ends reach the API privately, so the browser only ever talks to the site it is on.

Cloudflare Workers
D1
R2
React
Vite
Hono
Zod
TypeScript

Platform

Cloudflare Workers for the shop, the admin and the API, D1 (SQLite) for data, R2 for uploaded images. There are no servers to patch, and a quiet day costs next to nothing.
Stack

React and Vite on the front end, Hono, Zod and TypeScript on the API.
One price engine

Checkout, quotes and the admin’s phone-order form all use the same code to price an order, so a customer is never quoted one thing and charged another.
Prices are decided on the server

Which price list you see depends on your account, never on the browser, and the API doesn’t send a price list to someone who shouldn’t have it.
Safe with stock

Stock is taken off in one step when an order is placed, so two people can’t buy the last jar; low and out-of-stock alerts go to the team.
Careful by default

Passwordless sign-in with limited attempts, rate limits on every open form, and an API with no public address (the sites reach it privately), so the browser only ever talks to the site it is on.
Tidy housekeeping

A daily job cancels unpaid orders after the number of days the client chooses, and puts the stock back.
Built to be run by the client

Everything above is editable in the admin without touching code.

Want a shop, a trade portal or an admin that works the way your business does?

Tell us what you sell and who buys it. We’ll show you what that could look like.

Talk to Molvern Labs Visit Verda Spice