Soheil Yousefi Frontend · Design engineer
CASE / 02

Merchanta

Wholesale purchasing for the buying side and the selling side at once.

Role
Frontend architecture · UI
Year
2026
Stack
React · TS · TanStack
Status
Self-directed showcase
FIG 00 · MERCHANTA — MARKETPLACE OVERVIEW PROTOTYPE · SEEDED DATA
Merchanta cover composition: the marketplace positioning statement beside a catalogue panel of packaging SKUs, a counter-offer quote card and a vendor portal summary
One product with two audiences: an approved buyer purchasing against a contract, and a supplier quoting against it. Every figure on this page shows seeded prototype data.
01 — CATALOG

Price is a range, not a number

In wholesale the same SKU has several prices at once — a tier ladder, a contract rate, a minimum order quantity, and whatever a supplier will counter for a large enough release. A single price label cannot carry that, so the product page shows the whole ladder and marks the tier the buyer is actually in.

The quantity field is the pivot: it drives the tier highlight, the extended total, and whether the primary action is add-to-order or request-a-quote.

Merchanta product page: a corrugated box with a four-row quantity and unit price tier table, the buyer's own tier highlighted, a quantity stepper showing the extended total, and a panel listing six other suppliers offering the same SKU
FIG 01 · PRODUCT DETAIL — the tier the buyer is in is marked in the table rather than summarised above it, so the next price break is always visible.
02 — ORDERING

One basket, several purchase orders

A wholesale basket is not one order. It is grouped by supplier, each group carrying its own terms, freight and minimums, and it resolves into a separate purchase order per supplier on approval. The checkout is built around that grouping instead of hiding it, and a line that misses a supplier minimum says so where the line is, with the adjustment that fixes it.

FIG 02 · BULK ORDER — SHIPPING & TERMS
Merchanta bulk order checkout: fourteen line items grouped under three suppliers, an inline warning that one line is below the supplier minimum with an adjust action, and an order summary showing tier savings, freight, tax and a two-step approval chain
Approval is part of the order, not a separate inbox: the routing policy, the people it names and the step the order is waiting on all sit beside the total.
03 — NEGOTIATION

A quote round you can still read months later

An RFQ is a conversation with money in it, and the part that usually gets lost is why a price changed. Each round puts list, requested and countered price on one row, keeps the message thread beside it, and states plainly what accepting would create.

Merchanta quote negotiation: an RFQ at round three with list, requested and countered unit prices per line, terms under negotiation, a benchmark against competing quotes, and a dated message timeline on the right
EVIDENCE · 01

A quote round is a row: list, requested and countered price side by side, so a negotiation can still be read months later.

04 — TWO SIDES

The supplier sees the same price list

The vendor portal is not a second product. It reads the same catalogue, the same contracts and the same quote rounds from the other side, which is what keeps a counter-offer and a price list from drifting apart.

Merchanta vendor portal: an operations overview with orders to fulfil, open RFQs and payout figures across the top, a fulfilment queue filtered to orders needing action, inventory alerts against stock thresholds, and quote requests awaiting a response
FIG 03 · VENDOR PORTAL — the supplier's queue is the buyer's order list read from the other end.
05 — FULFILMENT

An order is a set of shipments

A purchase order rarely arrives at once. The order page is built around partial fulfilment: each shipment carries its own status and tracking, received quantities are reconciled against ordered quantities line by line, and a discrepancy is a state the page can show rather than an exception someone has to email about.

Merchanta order fulfilment: a five-step order status rail, three shipments in delivered, in-transit and awaiting-release states with per-line received quantities, a receiving progress bar noting one open discrepancy, and an invoicing panel showing a three-way match
FIG 04 · ORDER FULFILMENT — receiving, invoicing and the three-way match are on the order, not in a separate accounting screen.
WHAT I'D DO NEXT
Contract pricing that expires — a price hold is a date, and the interface should show it running out.
A supplier-side quote builder that works from the buyer’s benchmark rather than a blank form.
The approval chain is modelled for one organisation shape; multi-entity buyers would need it to branch.
PROOF
Live prototype URL REQUIRED
Component source REPO REQUIRED

A proof link renders only once its destination exists.