WeBuildCrew
🏪 Marketplace · Retail

MarketHub — Multi-vendor Marketplace

A multi-vendor marketplace where independent sellers list products, buyers discover and order, and payments split automatically between platform and vendors.

Timeline
13 weeks
Role
Architecture & full-stack development
Team
2 engineers + designer
Year
2025
Next.jsTypeScriptPostgreSQLPrismaStripe ConnectMeilisearchTailwind CSS
🏪
MarketHub

12%

Avg. commission

<200ms

Search latency

500+

Vendors onboarded

100%

Automated payouts

Client goals

  • Onboard many independent vendors self-serve
  • Make discovery fast so buyers convert
  • Move money safely with automatic split payouts

Project overview

MarketHub connects independent sellers with buyers in one platform. It had to solve the marketplace chicken-and-egg problem: make discovery and trust strong enough that both sides find each other useful immediately.

  • Supply: vendor onboarding, listings, payouts
  • Demand: search, filters, checkout, reviews
  • Money: buyer → platform → vendor, minus commission
  • Trust: verification, reviews, dispute handling

The client problem

Our solution

We modelled vendors, listings, orders and payouts first, then built fast faceted search for discovery and Stripe Connect for compliant split payments — so a single buyer payment automatically routes commission to the platform and the balance to the vendor.

Technical architecture

Next.js storefront and admin, PostgreSQL for the relational core (orders, payouts, commissions), Meilisearch for discovery, and Stripe Connect for money movement — all scoped and authorised server-side.

What we built

Features

🏬

Vendor onboarding

Self-serve signup with Stripe Connect accounts.

🔎

Faceted search

Sub-200ms search and filters via Meilisearch.

💸

Split payments

Automatic platform commission + vendor payout.

Reviews & ratings

Verified buyer reviews build trust.

📦

Order management

Status tracking from order to delivery.

🛡️

Verification

KYC and vendor verification workflow.

🧮

Commission engine

Per-category and per-vendor fee config.

📊

Admin analytics

Revenue, GMV and vendor performance.

Under the hood

Technical code

lib/payouts.ts
TypeScript
const session = await stripe.checkout.sessions.create({  mode: "payment",  line_items: [{ price_data: buildPrice(listing), quantity: 1 }],  payment_intent_data: {    application_fee_amount: commission(listing.price),       // platform cut    transfer_data: { destination: vendor.stripeAccountId },  // vendor payout  },  success_url: BASE + "/orders/success",});
app/api/stripe/webhook/route.ts
TypeScript
export async function POST(req: Request) {  const sig = req.headers.get("stripe-signature")!;  const event = stripe.webhooks.constructEvent(    await req.text(), sig, process.env.STRIPE_WEBHOOK_SECRET!  );  if (event.type === "checkout.session.completed") {    const s = event.data.object as Stripe.Checkout.Session;    await db.organization.update({      where: { id: s.metadata!.orgId },      data: { plan: s.metadata!.priceId, status: "active" },    });  }  return Response.json({ received: true });}

Integrations

APIs & services

Stripe Connect

Split payments and automated vendor payouts.

Meilisearch

Instant faceted search and filtering.

Cloudinary

Product image hosting and transforms.

Resend

Order and payout notification emails.

Google Maps

Location-based discovery and delivery zones.

Process

Development workflow

  1. 1

    Discovery

    Goals, users and success metrics defined on a free call.

  2. 2

    Planning

    Fixed scope, milestone plan and timeline in writing.

  3. 3

    UI/UX design

    Wireframes and a clean, modern design system.

  4. 4

    Backend setup

    Database schema, auth and core services.

  5. 5

    API development

    Typed, documented endpoints and integrations.

  6. 6

    Frontend

    Responsive, accessible UI wired to the API.

  7. 7

    Testing

    QA across devices plus performance & security checks.

  8. 8

    Deployment

    CI/CD, monitoring and a smooth production launch.

  9. 9

    Support

    Ongoing maintenance, updates and new features.

Speed & SEO

Performance & SEO

Performance

  • Server-side & static rendering for instant first paint
  • Image optimisation and lazy loading
  • Code-splitting and route-level prefetching
  • Edge/CDN caching with smart revalidation
  • Green Core Web Vitals (LCP, CLS, INP)
  • Database indexing and query tuning

SEO

  • Per-page metadata, canonical URLs and Open Graph
  • Structured data (JSON-LD) for rich results
  • Programmatic sitemap & robots
  • Semantic, accessible HTML
  • Clean, descriptive slug URLs

Built secure

Security

🔒Session-based auth with role permissions
🔒Server-side authorization on every protected route
🔒Input validation (Zod) on client and server
🔒Secure payments via hosted Checkout (no card data stored)
🔒Rate limiting and abuse protection
🔒Encrypted secrets and least-privilege access

Outcome

Results & impact

12%

Avg. commission

<200ms

Search latency

500+

Vendors onboarded

100%

Automated payouts

MarketHub onboarded 500+ vendors with fully automated payouts and sub-200ms search, turning a manual operation into a scalable platform earning commission on every transaction.