E-commerce · Design + Build
Mastribe — a premium marketplace for African fashion.
Full design and development: Figma design system, then a custom-coded Next.js storefront — catalogue, cart, checkout, and admin. Designed, built, integrated, and launched end-to-end by Prodix.
Visit the live site (opens in a new tab)
The problem.
Describe the original brief in 2–3 sentences: what Mastribe came to Prodix with, and why an off-the-shelf template or freelancer wasn't going to cut it. The Figma file shows the destination (a premium storefront for African fashion designers) but not the starting problem — need the client's original ask to write this honestly instead of reverse-engineering it from the finished UI.
01
A storefront that reads premium, not generic. The brand needed to hold its own next to established fashion e-commerce, not look like a template.
02
A full commerce flow, not just a landing page. Browse, product detail, cart, and checkout all needed to work as one coherent system.
03
A pain point from the original brief — technical, operational, or brand.
04
A pain point from the original brief — technical, operational, or brand.
Our approach.
- 01
Discover.
What we framed, researched, and scoped before designing anything. The design file shows the destination, not the discovery work that led there — add once the discovery notes are available.
- 02
Design.
We designed the full storefront in Figma as one connected system rather than a set of one-off screens: home, shop, product detail, cart, checkout, and the supporting pages (about, contact, FAQ, shipping & returns, policies) all draw from the same component set — buttons, nav, product cards — so the UI stays consistent as the catalogue grows. The product detail page carries the real weight of a fashion storefront: size and colourway selection, fit notes, and care instructions live on one screen so a shopper never has to guess before adding to bag. Checkout mirrors that discipline — contact, delivery, and payment collected in one flow, with the order summary pinned alongside so the total is never a surprise.
- 03
Build.
We coded the storefront as one Next.js application rather than stitching a site-builder to a hosted cart. The catalogue — products, collections, designers — lives in a Postgres database behind Prisma, so merchandising is structured data, not page edits. Checkout runs on Stripe. Customers get real accounts: sign-up with email verification, password reset, order history, order tracking, and a wishlist. An admin back office manages products, collections, designers, coupons, and promotions without touching code.
- 04
Launch.
Integration, testing, and handover.
What shipped.
A Figma design system.
Components, type scale, and colour tokens the storefront is built from.
A custom-coded storefront.
A Next.js front-end covering home, shop, collections, designers, product detail, cart, and checkout — no site-builder, no template.
A commerce engine built in, not bolted on.
Prisma-backed catalogue, Stripe payments, customer accounts with order tracking, and an admin back office for products, coupons, and promotions.
- Figma
- Next.js
- TypeScript
- Tailwind CSS
- Prisma + Postgres
- Stripe
- Vercel
Screens.
Results.
—
Results pending
Add once confirmed with the client.
Request a quote from the Mastribe team, with name and role.
Let's build it.
Tell us what you're trying to launch. We'll reply within one business day with an honest read — including whether you actually need us yet.